1- import { makeStyles } from "@mui/styles " ;
1+ import { useTheme } from "@emotion/react " ;
22import Typography from "@mui/material/Typography" ;
3- import { FC , ReactNode , PropsWithChildren } from "react" ;
3+ import { type FC , type ReactNode , type PropsWithChildren } from "react" ;
44import { SectionAction } from "./SectionAction" ;
5+ import { type Interpolation , type Theme } from "@emotion/react" ;
56
67type SectionLayout = "fixed" | "fluid" ;
78
@@ -31,31 +32,30 @@ export const Section: SectionFC = ({
3132 children,
3233 layout= "fixed" ,
3334} ) => {
34- const styles = useStyles ( { layout} ) ;
35+ const theme = useTheme ( ) ;
36+
3537return (
3638< section className = { className } id = { id } data-testid = { id } >
37- < div className = { styles . inner } >
39+ < div css = { { maxWidth : layout === "fluid" ? "100%" : 500 } } >
3840{ ( title || description ) && (
39- < div className = { styles . header } >
41+ < div css = { styles . header } >
4042< div >
4143{ title && (
4244< Typography variant = "h4" sx = { { fontSize :24 } } >
4345{ title }
4446</ Typography >
4547) }
4648{ description && typeof description === "string" && (
47- < Typography className = { styles . description } >
48- { description }
49- </ Typography >
49+ < Typography css = { styles . description } > { description } </ Typography >
5050) }
5151{ description && typeof description !== "string" && (
52- < div className = { styles . description } > { description } </ div >
52+ < div css = { styles . description } > { description } </ div >
5353) }
5454</ div >
5555{ toolbar && < div > { toolbar } </ div > }
5656</ div >
5757) }
58- { alert && < div className = { styles . alert } > { alert } </ div > }
58+ { alert && < div css = { { marginBottom : theme . spacing ( 1 ) } } > { alert } </ div > }
5959{ children }
6060</ div >
6161</ section >
@@ -65,23 +65,17 @@ export const Section: SectionFC = ({
6565// Sub-components
6666Section . Action = SectionAction ;
6767
68- const useStyles = makeStyles ( ( theme ) => ( {
69- inner :( { layout} :{ layout :SectionLayout } ) => ( {
70- maxWidth :layout === "fluid" ?"100%" :500 ,
71- } ) ,
72- alert :{
73- marginBottom :theme . spacing ( 1 ) ,
74- } ,
75- header :{
68+ const styles = {
69+ header :( theme ) => ( {
7670marginBottom :theme . spacing ( 3 ) ,
7771display :"flex" ,
7872flexDirection :"row" ,
7973justifyContent :"space-between" ,
80- } ,
81- description :{
74+ } ) ,
75+ description :( theme ) => ( {
8276color :theme . palette . text . secondary ,
8377fontSize :16 ,
8478marginTop :theme . spacing ( 0.5 ) ,
8579lineHeight :"140%" ,
86- } ,
87- } ) ) ;
80+ } ) ,
81+ } satisfies Record < string , Interpolation < Theme > > ;