1
- import type { ThemeUtilsCSS } from '@fuel-ui/css' ;
2
- import { cssObj } from '@fuel-ui/css' ;
3
- import { Box , Flex } from '@fuel-ui/react' ;
4
1
import type { FC , ReactNode } from 'react' ;
5
2
import { Helmet } from 'react-helmet' ;
6
3
import { META_DESC , META_OGIMG } from '~/constants' ;
7
4
import { OverlayDialog } from '~/systems/Overlay' ;
8
5
9
6
import { coreStyles } from '../styles' ;
10
7
8
+ import { Box , Flex , cx } from '@fuels/ui' ;
9
+ import { tv } from 'tailwind-variants' ;
11
10
import { Header } from './Header' ;
12
11
13
12
type ContentProps = {
14
13
// eslint-disable-next-line @typescript-eslint/no-explicit-any
15
14
as ?: any ;
16
15
children : ReactNode ;
17
- css ?: ThemeUtilsCSS ;
16
+ className ?: string ;
18
17
} ;
19
18
20
- const Content = ( { as, children, css } : ContentProps ) => {
19
+ const Content = ( { as, children, className } : ContentProps ) => {
20
+ const classes = styles ( ) ;
21
+
21
22
return (
22
- < Box
23
- as = { as }
24
- css = { { ...styles . content , ...css } }
25
- className = "layout__content"
26
- >
23
+ < Box as = { as } className = { cx ( classes . content ( ) , className ) } >
27
24
{ children }
28
25
</ Box >
29
26
) ;
@@ -39,6 +36,7 @@ type LayoutProps = {
39
36
} ;
40
37
41
38
export const Layout : LayoutComponent = ( { title, children } : LayoutProps ) => {
39
+ const classes = styles ( ) ;
42
40
const titleText = title || '' ;
43
41
return (
44
42
< >
@@ -55,11 +53,13 @@ export const Layout: LayoutComponent = ({ title, children }: LayoutProps) => {
55
53
href = "data:image/png;base64,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"
56
54
/>
57
55
</ Helmet >
58
- < Flex as = "main" direction = "column" css = { styles . root } >
56
+ < Flex as = "main" direction = "column" className = { classes . root ( ) } >
59
57
< Header />
60
58
< OverlayDialog />
61
- < Box css = { styles . scrollView } >
62
- < Box css = { coreStyles . scrollableContent } > { children } </ Box >
59
+ < Box className = { classes . scrollView ( ) } >
60
+ < Box > { children } </ Box >
61
+ { /* TODO: add scrollable content class */ }
62
+ { /* <Box className={coreStyles.scrollableContent()}>{children}</Box> */ }
63
63
</ Box >
64
64
</ Flex >
65
65
</ >
@@ -68,20 +68,16 @@ export const Layout: LayoutComponent = ({ title, children }: LayoutProps) => {
68
68
69
69
Layout . Content = Content ;
70
70
71
- const styles = {
72
- root : cssObj ( {
73
- width : '100vw' ,
74
- height : '100vh' ,
75
- overflow : 'hidden' ,
76
- position : 'absolute' ,
77
- } ) ,
78
- scrollView : cssObj ( {
79
- flex : 1 ,
80
- ...coreStyles . scrollable ( ) ,
81
- } ) ,
82
- content : cssObj ( {
83
- padding : '$16 $4 $4 $4' ,
84
- maxWidth : 955 ,
85
- margin : '0 auto' ,
86
- } ) ,
87
- } ;
71
+ export const styles = tv ( {
72
+ slots : {
73
+ root : 'w-screen h-screen overflow-hidden absolute' ,
74
+ // TODO: add scrollable in scrollView
75
+ scrollView : 'flex-1' ,
76
+ content : 'p-4 pt-16 max-w-[955px] mx-auto' ,
77
+
78
+ // scrollView: cssObj({
79
+ // flex: 1,
80
+ // ...coreStyles.scrollable(),
81
+ // }),
82
+ } ,
83
+ } ) ;
0 commit comments