@@ -18,89 +18,31 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
1818 ...divProps
1919} ) => {
2020 return (
21- < div
22- css = { ( theme ) => ( {
23- width : "320px" ,
24- padding : 24 ,
25- borderRadius : 6 ,
26- border : `1px solid ${ theme . palette . divider } ,
27- textAlign : "left" ,
28- textDecoration : "none" ,
29- color : "inherit" ,
30- display : "flex" ,
31- flexDirection : "column" ,
32- } ) }
33- { ...divProps }
34- >
35- < div
36- css = { {
37- display : "flex" ,
38- alignItems : "center" ,
39- justifyContent : "space-between" ,
40- marginBottom : 24 ,
41- } }
42- >
43- < div
44- css = { {
45- flexShrink : 0 ,
46- paddingTop : 4 ,
47- width : 32 ,
48- height : 32 ,
49- } }
50- >
21+ < div css = { styles . card } { ...divProps } >
22+ < div css = { styles . header } >
23+ < div css = { styles . icon } >
5124 < ExternalImage
5225 src = { example . icon }
5326 css = { { width : "100%" , height : "100%" , objectFit : "contain" } }
5427 />
5528 </ div >
5629
57- < div
58- css = { {
59- display : "flex" ,
60- flexWrap : "wrap" ,
61- gap : 8 ,
62- justifyContent : "end" ,
63- } }
64- >
65- { example . tags . map ( ( tag ) => {
66- const isActive = activeTag === tag ;
67-
68- return (
69- < RouterLink key = { tag } to = { `/starter-templates?tag=${ tag } } >
70- < Pill
71- css = { ( theme ) => ( {
72- borderColor : isActive
73- ? theme . palette . primary . main
74- : theme . palette . divider ,
75- cursor : "pointer" ,
76- backgroundColor : isActive
77- ? theme . palette . primary . dark
78- : undefined ,
79- "&: hover" : {
80- borderColor : theme . palette . primary . main ,
81- } ,
82- } ) }
83- >
84- { tag }
85- </ Pill >
86- </ RouterLink >
87- ) ;
88- } ) }
30+ < div css = { styles . tags } >
31+ { example . tags . map ( ( tag ) => (
32+ < RouterLink key = { tag } to = { `/starter-templates?tag=${ tag } } >
33+ < Pill css = { [ styles . tag , activeTag === tag && styles . activeTag ] } >
34+ { tag }
35+ </ Pill >
36+ </ RouterLink >
37+ ) ) }
8938 </ div >
9039 </ div >
9140
9241 < div >
9342 < h4 css = { { fontSize : 14 , fontWeight : 600 , margin : 0 , marginBottom : 4 } } >
9443 { example . name }
9544 </ h4 >
96- < span
97- css = { ( theme ) => ( {
98- fontSize : 13 ,
99- color : theme . palette . text . secondary ,
100- lineHeight : "1.6" ,
101- display : "block" ,
102- } ) }
103- >
45+ < span css = { styles . description } >
10446 { example . description } { " " }
10547 < Link
10648 component = { RouterLink }
@@ -112,16 +54,7 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
11254 </ span >
11355 </ div >
11456
115- < div
116- css = { {
117- display : "flex" ,
118- gap : 12 ,
119- flexDirection : "column" ,
120- paddingTop : 24 ,
121- marginTop : "auto" ,
122- alignItems : "center" ,
123- } }
124- >
57+ < div css = { styles . useButtonContainer } >
12558 < Button
12659 component = { RouterLink }
12760 fullWidth
@@ -134,4 +67,66 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
13467 ) ;
13568} ;
13669
137- const styles = { } satisfies Record < string , Interpolation < Theme > > ;
70+ const styles = {
71+ card : ( theme ) => ( {
72+ width : "320px" ,
73+ padding : 24 ,
74+ borderRadius : 6 ,
75+ border : `1px solid ${ theme . palette . divider } ,
76+ textAlign : "left" ,
77+ textDecoration : "none" ,
78+ color : "inherit" ,
79+ display : "flex" ,
80+ flexDirection : "column" ,
81+ } ) ,
82+
83+ header : {
84+ display : "flex" ,
85+ alignItems : "center" ,
86+ justifyContent : "space-between" ,
87+ marginBottom : 24 ,
88+ } ,
89+
90+ icon : {
91+ flexShrink : 0 ,
92+ paddingTop : 4 ,
93+ width : 32 ,
94+ height : 32 ,
95+ } ,
96+
97+ tags : {
98+ display : "flex" ,
99+ flexWrap : "wrap" ,
100+ gap : 8 ,
101+ justifyContent : "end" ,
102+ } ,
103+
104+ tag : ( theme ) => ( {
105+ borderColor : theme . palette . divider ,
106+ cursor : "pointer" ,
107+ "&: hover" : {
108+ borderColor : theme . palette . primary . main ,
109+ } ,
110+ } ) ,
111+
112+ activeTag : ( theme ) => ( {
113+ borderColor : theme . experimental . roles . active . outline ,
114+ backgroundColor : theme . experimental . roles . active . background ,
115+ } ) ,
116+
117+ description : ( theme ) => ( {
118+ fontSize : 13 ,
119+ color : theme . palette . text . secondary ,
120+ lineHeight : "1.6" ,
121+ display : "block" ,
122+ } ) ,
123+
124+ useButtonContainer : {
125+ display : "flex" ,
126+ gap : 12 ,
127+ flexDirection : "column" ,
128+ paddingTop : 24 ,
129+ marginTop : "auto" ,
130+ alignItems : "center" ,
131+ } ,
132+ } satisfies Record < string , Interpolation < Theme > > ;
0 commit comments