SrJuggernaut/blog_juggernautplays_com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: move Header and Footer to root layout

Browse Source
This commit is contained in:
SrJuggernaut
2026-03-23 11:58:04 -06:00
parent 5c9e967163
commit 1e03ca57b9
2 changed files with 5 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/layout/FullWidth.tsx
View File

@@ -1,7 +1,5 @@
import { css, cx } from '@styled-system/css' import { css, cx } from '@styled-system/css'
import type { FC, ReactNode } from 'react' import type { FC, ReactNode } from 'react'
import Footer from '@/components/layout/fragments/Footer'
import Header from '@/components/layout/fragments/Header'
export interface FullWidthProps { export interface FullWidthProps {
className?: string className?: string
@@ -9,13 +7,7 @@ export interface FullWidthProps {
} }
const FullWidth: FC<FullWidthProps> = ({ className, children }) => { const FullWidth: FC<FullWidthProps> = ({ className, children }) => {
return ( return <main className={cx(css({ flexGrow: 1 }), className)}>{children}</main>
<>
<Header />
<main className={cx(css({ flexGrow: 1 }), className)}>{children}</main>
<Footer />
</>
)
} }
export default FullWidth export default FullWidth

4
src/routes/__root.tsx
View File

@@ -11,6 +11,8 @@ import {
Scripts Scripts
} from '@tanstack/react-router' } from '@tanstack/react-router'
import type { ReactNode } from 'react' import type { ReactNode } from 'react'
import Footer from '@/components/layout/fragments/Footer'
import Header from '@/components/layout/fragments/Header'
import GLOBAL_CSS from '@/styles/global.css?url' import GLOBAL_CSS from '@/styles/global.css?url'
config.autoAddCss = false config.autoAddCss = false
@@ -97,7 +99,9 @@ function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
<HeadContent /> <HeadContent />
</head> </head>
<body> <body>
<Header />
{children} {children}
<Footer />
<Scripts /> <Scripts />
</body> </body>
</html> </html>