@@ -2,7 +2,7 @@ import type { Interpolation, Theme } from "@emotion/react";
22import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined" ;
33import Button from "@mui/material/Button" ;
44import type { FC , HTMLAttributes } from "react" ;
5- import { Link as RouterLink } from "react-router-dom" ;
5+ import { Link as RouterLink , useNavigate } from "react-router-dom" ;
66import type { Template } from "api/typesGenerated" ;
77import { ExternalAvatar } from "components/Avatar/Avatar" ;
88import { AvatarData } from "components/AvatarData/AvatarData" ;
@@ -16,10 +16,25 @@ export const TemplateCard: FC<TemplateCardProps> = ({
1616 template,
1717 ...divProps
1818} ) => {
19+ const navigate = useNavigate ( ) ;
20+ const templatePageLink = `/templates/${ template . name } ;
1921const hasIcon = template . icon && template . icon !== "" ;
2022
23+ const handleKeyDown = ( e :React . KeyboardEvent ) => {
24+ if ( e . key === "Enter" && e . currentTarget === e . target ) {
25+ navigate ( templatePageLink ) ;
26+ }
27+ } ;
28+
2129return (
22- < div css = { styles . card } { ...divProps } >
30+ < div
31+ css = { styles . card }
32+ { ...divProps }
33+ role = "button"
34+ tabIndex = { 0 }
35+ onClick = { ( ) => navigate ( templatePageLink ) }
36+ onKeyDown = { handleKeyDown }
37+ >
2338< div css = { styles . header } >
2439< div >
2540< AvatarData
@@ -60,6 +75,9 @@ export const TemplateCard: FC<TemplateCardProps> = ({
6075startIcon = { < ArrowForwardOutlined /> }
6176title = { `Create a workspace using the${ template . display_name } }
6277to = { `/templates/${ template . name } }
78+ onClick = { ( e ) => {
79+ e . stopPropagation ( ) ;
80+ } }
6381>
6482 Create Workspace
6583</ Button >
@@ -79,6 +97,11 @@ const styles = {
7997color :"inherit" ,
8098display :"flex" ,
8199flexDirection :"column" ,
100+ cursor :"pointer" ,
101+ "&:hover" :{
102+ color :theme . experimental . l2 . hover . text ,
103+ borderColor :theme . experimental . l2 . hover . text ,
104+ } ,
82105} ) ,
83106
84107header :{
@@ -95,27 +118,6 @@ const styles = {
95118height :32 ,
96119} ,
97120
98- tags :{
99- display :"flex" ,
100- flexWrap :"wrap" ,
101- gap :8 ,
102- justifyContent :"end" ,
103- } ,
104-
105- tag :( theme ) => ( {
106- borderColor :theme . palette . divider ,
107- textDecoration :"none" ,
108- cursor :"pointer" ,
109- "&: hover" :{
110- borderColor :theme . palette . primary . main ,
111- } ,
112- } ) ,
113-
114- activeTag :( theme ) => ( {
115- borderColor :theme . roles . active . outline ,
116- backgroundColor :theme . roles . active . background ,
117- } ) ,
118-
119121description :( theme ) => ( {
120122fontSize :13 ,
121123color :theme . palette . text . secondary ,