chatbot-template/app/layout.tsx

74 lines
2.1 KiB
TypeScript
Raw Normal View History

2024-11-15 12:18:17 -05:00
import type { Metadata } from 'next';
2024-10-23 12:21:30 -04:00
import { Toaster } from 'sonner';
2023-06-15 16:07:03 +04:00
2024-11-15 10:14:25 -05:00
import { ThemeProvider } from '@/components/theme-provider';
2023-05-19 12:33:56 -04:00
2024-10-23 12:21:30 -04:00
import './globals.css';
2023-11-26 12:32:01 -06:00
2024-10-11 18:00:22 +05:30
export const metadata: Metadata = {
2024-10-23 12:21:30 -04:00
metadataBase: new URL('https://chat.vercel.ai'),
title: 'Next.js Chatbot Template',
description: 'Next.js chatbot template using the AI SDK.',
2024-10-11 18:00:22 +05:30
};
2023-05-19 12:33:56 -04:00
2024-10-23 12:21:30 -04:00
export const viewport = {
maximumScale: 1, // Disable auto-zoom on mobile Safari
};
const LIGHT_THEME_COLOR = 'hsl(0 0% 100%)';
const DARK_THEME_COLOR = 'hsl(240deg 10% 3.92%)';
const THEME_COLOR_SCRIPT = `\
(function() {
var html = document.documentElement;
var meta = document.querySelector('meta[name="theme-color"]');
if (!meta) {
meta = document.createElement('meta');
meta.setAttribute('name', 'theme-color');
document.head.appendChild(meta);
}
function updateThemeColor() {
var isDark = html.classList.contains('dark');
meta.setAttribute('content', isDark ? '${DARK_THEME_COLOR}' : '${LIGHT_THEME_COLOR}');
}
var observer = new MutationObserver(updateThemeColor);
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
updateThemeColor();
})();`;
2024-10-11 18:00:22 +05:30
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
2023-05-19 12:33:56 -04:00
return (
2024-10-23 12:21:30 -04:00
<html
lang="en"
// `next-themes` injects an extra classname to the body element to avoid
// visual flicker before hydration. Hence the `suppressHydrationWarning`
// prop is necessary to avoid the React hydration mismatch warning.
// https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
suppressHydrationWarning
>
<head>
<script
2024-11-15 12:18:17 -05:00
// biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
2024-10-23 12:21:30 -04:00
dangerouslySetInnerHTML={{
__html: THEME_COLOR_SCRIPT,
}}
/>
</head>
2024-10-11 18:00:22 +05:30
<body className="antialiased">
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
2024-10-11 18:00:22 +05:30
<Toaster position="top-center" />
{children}
</ThemeProvider>
2023-06-16 11:49:14 -04:00
</body>
</html>
2024-10-11 18:00:22 +05:30
);
2023-05-19 12:33:56 -04:00
}