({ children }: { children: React.ReactNode })
| 65 | } |
| 66 | |
| 67 | export const Layout = ({ children }: { children: React.ReactNode }) => { |
| 68 | const { i18n } = useTranslation() |
| 69 | const [theme, setTheme] = useState(() => { |
| 70 | if (typeof window === "undefined" || !window.localStorage) { |
| 71 | return "dark" |
| 72 | } |
| 73 | return getStorageItem(THEME) || getSystemTheme() |
| 74 | }) |
| 75 | |
| 76 | useLayoutEffect(() => { |
| 77 | const storedTheme = getStorageItem(THEME) |
| 78 | if (storedTheme) { |
| 79 | setTheme(storedTheme) |
| 80 | } |
| 81 | }, []) |
| 82 | |
| 83 | useEffect(() => { |
| 84 | setStorageItem(THEME, theme) |
| 85 | }, [theme]) |
| 86 | |
| 87 | return ( |
| 88 | <html className="overflow-y-auto overflow-x-hidden scrollbar" lang={i18n.language} dir={i18n.dir()} data-theme={theme}> |
| 89 | <head> |
| 90 | <script |
| 91 | // biome-ignore lint/security/noDangerouslySetInnerHtml: Sets correct theme on initial load |
| 92 | dangerouslySetInnerHTML={{ |
| 93 | __html: ` |
| 94 | (function () { |
| 95 | try { |
| 96 | var theme = localStorage.getItem("theme"); |
| 97 | if (!theme) { |
| 98 | theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; |
| 99 | } |
| 100 | document.documentElement.setAttribute("data-theme", theme); |
| 101 | } catch (_) {} |
| 102 | })(); |
| 103 | `, |
| 104 | }} |
| 105 | /> |
| 106 | <ClientHintCheck /> |
| 107 | <meta charSet="utf-8" /> |
| 108 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 109 | <Meta /> |
| 110 | <Links /> |
| 111 | </head> |
| 112 | <body className="h-full w-full bg-[var(--color-background)]"> |
| 113 | {children} |
| 114 | <ScrollRestoration /> |
| 115 | <Scripts /> |
| 116 | </body> |
| 117 | </html> |
| 118 | ) |
| 119 | } |
| 120 | |
| 121 | export const ErrorBoundary = () => { |
| 122 | const navigate = useNavigate() |
nothing calls this directly
no test coverage detected
searching dependent graphs…