Files
road-monitoring-ui/src/app/layout.tsx

72 lines
2.0 KiB
TypeScript

import type { Metadata } from 'next';
import { Geist_Mono, Poppins, Inter } from 'next/font/google';
import '@vidstack/react/player/styles/default/theme.css';
import '@vidstack/react/player/styles/default/layouts/video.css';
import 'leaflet/dist/leaflet.css';
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-zoom.css';
import './globals.css';
import { ThemeProvider } from '@/providers/ThemeProvider';
import AppInitializer from '@/providers/AppInitializer';
import QueryProvider from '@/providers/QueryProvider';
import { Toaster } from '@/components/ui/sonner';
import { TooltipProvider } from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';
const inter = Inter({subsets:['latin'],variable:'--font-sans'});
const poppins = Poppins({
variable: '--font-poppins',
subsets: ['latin'],
weight: ['400', '500', '600', '700'],
});
const geistMono = Geist_Mono({
variable: '--font-geist-mono',
subsets: ['latin'],
});
export const metadata: Metadata = {
title: {
default: 'RoadMonitor',
template: '%s | RoadMonitor',
},
description: 'Road infrastructure monitoring and pothole detection platform',
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html
lang="en"
suppressHydrationWarning
className={cn('font-sans', "font-sans", inter.variable)}
>
<head>
<link rel="stylesheet" href="/flags/flags.css" />
</head>
<body className={`${poppins.variable} ${geistMono.variable} antialiased`}>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<QueryProvider>
<AppInitializer>
<TooltipProvider delayDuration={0}>
{children}
<Toaster position="top-center" />
</TooltipProvider>
</AppInitializer>
</QueryProvider>
</ThemeProvider>
</body>
</html>
);
}