1- import { makeStyles } from "@mui/styles " ;
1+ import { type Interpolation , type Theme } from "@emotion/react " ;
22import { ErrorAlert } from "components/Alert/ErrorAlert" ;
33import { Loader } from "components/Loader/Loader" ;
44import { Margins } from "components/Margins/Margins" ;
@@ -9,10 +9,9 @@ import {
99} from "components/PageHeader/PageHeader" ;
1010import { Stack } from "components/Stack/Stack" ;
1111import { TemplateExampleCard } from "components/TemplateExampleCard/TemplateExampleCard" ;
12- import { FC } from "react" ;
12+ import { type FC } from "react" ;
1313import { Link , useSearchParams } from "react-router-dom" ;
14- import { combineClasses } from "utils/combineClasses" ;
15- import { StarterTemplatesByTag } from "utils/starterTemplates" ;
14+ import type { StarterTemplatesByTag } from "utils/starterTemplates" ;
1615
1716const getTagLabel = ( tag :string ) => {
1817const labelByTag :Record < string , string > = {
@@ -40,7 +39,6 @@ export const StarterTemplatesPageView: FC<StarterTemplatesPageViewProps> = ({
4039 error,
4140} ) => {
4241const [ urlParams ] = useSearchParams ( ) ;
43- const styles = useStyles ( ) ;
4442const tags = starterTemplatesByTag
4543 ?selectTags ( starterTemplatesByTag )
4644 :undefined ;
@@ -64,24 +62,24 @@ export const StarterTemplatesPageView: FC<StarterTemplatesPageViewProps> = ({
6462
6563< Stack direction = "row" spacing = { 4 } >
6664{ starterTemplatesByTag && tags && (
67- < Stack className = { styles . filter } >
68- < span className = { styles . filterCaption } > Filter</ span >
65+ < Stack css = { styles . filter } >
66+ < span css = { styles . filterCaption } > Filter</ span >
6967{ tags . map ( ( tag ) => (
7068< Link
7169key = { tag }
7270to = { `?tag=${ tag } }
73- className = { combineClasses ( {
74- [ styles . tagLink ] : true ,
75- [ styles . tagLinkActive ] : tag === activeTag ,
76- } ) }
71+ css = { [
72+ styles . tagLink ,
73+ tag === activeTag && styles . tagLinkActive ,
74+ ] }
7775>
7876{ getTagLabel ( tag ) } ({ starterTemplatesByTag [ tag ] . length } )
7977</ Link >
8078) ) }
8179</ Stack >
8280) }
8381
84- < div className = { styles . templates } >
82+ < div css = { styles . templates } >
8583{ visibleTemplates &&
8684visibleTemplates . map ( ( example ) => (
8785< TemplateExampleCard example = { example } key = { example . id } />
@@ -92,21 +90,21 @@ export const StarterTemplatesPageView: FC<StarterTemplatesPageViewProps> = ({
9290) ;
9391} ;
9492
95- const useStyles = makeStyles ( ( theme ) => ( {
96- filter :{
93+ const styles = {
94+ filter :( theme ) => ( {
9795width :theme . spacing ( 26 ) ,
9896flexShrink :0 ,
99- } ,
97+ } ) ,
10098
101- filterCaption :{
99+ filterCaption :( theme ) => ( {
102100textTransform :"uppercase" ,
103101fontWeight :600 ,
104102fontSize :12 ,
105103color :theme . palette . text . secondary ,
106104letterSpacing :"0.1em" ,
107- } ,
105+ } ) ,
108106
109- tagLink :{
107+ tagLink :( theme ) => ( {
110108color :theme . palette . text . secondary ,
111109textDecoration :"none" ,
112110fontSize :14 ,
@@ -115,18 +113,18 @@ const useStyles = makeStyles((theme) => ({
115113"&:hover" :{
116114color :theme . palette . text . primary ,
117115} ,
118- } ,
116+ } ) ,
119117
120- tagLinkActive :{
118+ tagLinkActive :( theme ) => ( {
121119color :theme . palette . text . primary ,
122120fontWeight :600 ,
123- } ,
121+ } ) ,
124122
125- templates :{
123+ templates :( theme ) => ( {
126124flex :"1" ,
127125display :"grid" ,
128126gridTemplateColumns :"repeat(2, minmax(0, 1fr))" ,
129127gap :theme . spacing ( 2 ) ,
130128gridAutoRows :"min-content" ,
131- } ,
132- } ) ) ;
129+ } ) ,
130+ } satisfies Record < string , Interpolation < Theme > > ;