- 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
49 lines
1.5 KiB
TypeScript
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>
|
|
);
|
|
}
|