Skip to content
Clone
07f791d
38 lines 1.7 KB
import type { ReactNode } from 'react'
import { ThemeSwitch, useTheme } from '@/features/theme-toggle'
import { routes } from '@/shared/config'
import { t } from '@/shared/i18n'
import { navigate, navigationHref } from '@/shared/lib'
import { LegalLink } from '@/shared/ui'
export function AppShell({ children }: { children: ReactNode }) {
const theme = useTheme()
return (
<div className="flex min-h-dvh flex-col bg-page px-4 pt-6 pb-[max(28px,env(safe-area-inset-bottom))] text-ink md:px-12 md:pt-10 md:pb-8 lg:px-16 lg:pt-12 lg:pb-10">
<header className="flex h-10 shrink-0 items-center justify-between">
<a
href={navigationHref(routes.home)}
className="inline-flex min-h-11 items-center gap-2.75"
aria-label={t('shell.home')}
onClick={(event) => {
if (event.button || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return
event.preventDefault()
navigate(routes.home)
}}
>
<img src="/media/gitdataai-red-panda.png" width={40} height={40} alt="" />
<span className="font-latin text-[19px] font-semibold tracking-[-0.4px]">GitDataAI</span>
</a>
<ThemeSwitch model={theme} />
</header>
<main id="main" className="flex flex-1 flex-col items-center justify-center py-6 md:py-8">
<section className="w-full max-w-[400px]">{children}</section>
</main>
<footer className="flex shrink-0 flex-wrap items-center justify-center gap-x-3 text-xs leading-normal text-muted">
<LegalLink kind="terms" />
<LegalLink kind="privacy" />
<span className="font-latin">© 2026 GitDataAI</span>
</footer>
</div>
)
}