arbret/frontend/app/layout.tsx
counterweight 0378a8edd7
Make HTML lang attribute dynamic based on selected language
- Create HtmlLang client component that updates document.documentElement.lang
- Add HtmlLang component to layout.tsx to sync HTML lang attribute with locale
- HTML lang now updates automatically when user changes language
2025-12-26 11:38:38 +01:00

49 lines
1.5 KiB
TypeScript

import { AuthProvider } from "./auth-context";
import { Providers } from "./components/Providers";
import { HtmlLang } from "./components/HtmlLang";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="es">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap"
rel="stylesheet"
/>
<style>{`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'DM Sans', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
input:focus {
border-color: rgba(139, 92, 246, 0.5) !important;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}
button:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}
button:active:not(:disabled) {
transform: translateY(0);
}
a:hover {
text-decoration: underline;
}
`}</style>
</head>
<body>
<Providers>
<HtmlLang />
<AuthProvider>{children}</AuthProvider>
</Providers>
</body>
</html>
);
}