Froidefond Julien
05a18c3c77
- Installation de Tailwind CSS v4 avec @tailwindcss/postcss - Configuration PostCSS avec le plugin Tailwind v4 - Mise à jour de globals.css avec syntaxe Tailwind v4 (@theme) - Migration layout.tsx vers classes Tailwind - Création du composant NavLink avec types stricts - Configuration des couleurs personnalisées (background, foreground, card, line, primary) - Support du dark mode via classes CSS - Variables CSS migrées vers format HSL - Suppression des anciens styles CSS custom Le projet utilise maintenant Tailwind CSS v4 pour tout le styling
77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import type { ReactNode } from "react";
|
|
import "./globals.css";
|
|
import { ThemeProvider } from "./theme-provider";
|
|
import { ThemeToggle } from "./theme-toggle";
|
|
import { JobsIndicator } from "./components/JobsIndicator";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Stripstream Backoffice",
|
|
description: "Backoffice administration for Stripstream Librarian"
|
|
};
|
|
|
|
export default function RootLayout({ children }: { children: ReactNode }) {
|
|
return (
|
|
<html lang="en" suppressHydrationWarning>
|
|
<body className="min-h-screen bg-background text-foreground font-sans antialiased">
|
|
<ThemeProvider>
|
|
{/* Navigation */}
|
|
<nav className="sticky top-0 z-50 w-full border-b border-line bg-card/80 backdrop-blur-md">
|
|
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
|
{/* Brand */}
|
|
<Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
|
<Image
|
|
src="/logo.png"
|
|
alt="Stripstream"
|
|
width={36}
|
|
height={36}
|
|
className="rounded-lg"
|
|
/>
|
|
<div className="flex items-baseline gap-2">
|
|
<span className="text-xl font-bold tracking-tight">StripStream</span>
|
|
<span className="text-sm text-muted font-medium">backoffice</span>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Navigation Links */}
|
|
<div className="flex items-center gap-6">
|
|
<div className="hidden md:flex items-center gap-1">
|
|
<NavLink href="/">Dashboard</NavLink>
|
|
<NavLink href="/books">Books</NavLink>
|
|
<NavLink href="/libraries">Libraries</NavLink>
|
|
<NavLink href="/jobs">Jobs</NavLink>
|
|
<NavLink href="/tokens">Tokens</NavLink>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 pl-6 border-l border-line">
|
|
<JobsIndicator />
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Main Content */}
|
|
<main className="container mx-auto px-4 py-8">
|
|
{children}
|
|
</main>
|
|
</ThemeProvider>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
|
|
// Navigation Link Component
|
|
function NavLink({ href, children }: { href: "/" | "/books" | "/libraries" | "/jobs" | "/tokens"; children: React.ReactNode }) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className="px-3 py-2 rounded-md text-sm font-medium text-foreground/80 hover:text-foreground hover:bg-primary-soft transition-colors"
|
|
>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|