feat: add a white theme

This commit is contained in:
Pierre Ryssen
2026-03-11 16:02:55 +01:00
parent 9642f2511a
commit d5d7b15f16
22 changed files with 297 additions and 241 deletions

View File

@@ -1,29 +1,5 @@
"use client";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import Sidebar from "@/components/Sidebar";
import AppLayout from "@/components/AppLayout";
export default function AuthLayout({ children }: { children: React.ReactNode }) {
const { status } = useSession();
const router = useRouter();
useEffect(() => {
if (status === "unauthenticated") {
router.push("/");
}
}, [status, router]);
if (status === "loading") return null;
if (status !== "authenticated") return null;
return (
<div className="flex min-h-screen bg-[#0d1117]">
<Sidebar />
<main className="ml-56 flex-1 p-8 bg-[#0d1117]">
{children}
</main>
</div>
);
return <AppLayout>{children}</AppLayout>;
}

View File

@@ -70,7 +70,7 @@ export default function TikTokPage() {
</div>
<div>
<div className="text-[9px] font-mono tracking-[0.3em] text-pink-400/70 uppercase mb-0.5">Plateforme</div>
<h1 className="text-2xl font-black tracking-widest text-white uppercase">TikTok</h1>
<h1 className="text-2xl font-black tracking-widest uppercase" style={{ color: "var(--text-primary)" }}>TikTok</h1>
</div>
</div>
@@ -99,7 +99,7 @@ export default function TikTokPage() {
{/* Chargement */}
{loading && (
<div className="flex items-center justify-center min-h-[200px] gap-3 text-[#6a8a6a] font-mono text-xs">
<div className="flex items-center justify-center min-h-[200px] gap-3 font-mono text-xs" style={{ color: "var(--text-secondary)" }}>
<Loader2 size={16} className="animate-spin text-pink-400/60" />
Chargement...
</div>
@@ -147,11 +147,11 @@ export default function TikTokPage() {
</>
)}
{/* Non connecté */}
{!loading && !stats && !error && (
<div className="bg-[#111a14] border border-[#1e2d1e] rounded-sm p-12 flex flex-col items-center justify-center gap-5 min-h-[240px]">
<div className="border rounded-sm p-12 flex flex-col items-center justify-center gap-5 min-h-[240px]"
style={{ background: "var(--surface)", borderColor: "var(--border)" }}>
<Music2 size={36} className="text-pink-400/30" />
<p className="text-[#7a9a7a] font-mono text-xs tracking-widest text-center uppercase">
<p className="font-mono text-xs tracking-widest text-center uppercase" style={{ color: "var(--text-secondary)" }}>
Connectez votre compte TikTok<br />pour afficher vos statistiques
</p>
<a
@@ -164,12 +164,13 @@ export default function TikTokPage() {
</div>
)}
{/* Erreur API */}
{!loading && error && (
<div className="bg-[#111a14] border border-red-500/25 rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]">
<div className="border border-red-500/25 rounded-sm p-8 flex flex-col items-center justify-center gap-3 min-h-[200px]"
style={{ background: "var(--surface)" }}>
<AlertTriangle size={28} className="text-red-400/60" />
<p className="text-red-400/80 font-mono text-xs tracking-widest text-center uppercase">{error}</p>
<button onClick={loadStats} className="text-[10px] font-mono tracking-widest text-[#6a8a6a] hover:text-pink-400 uppercase transition-colors">
<button onClick={loadStats} className="text-[10px] font-mono tracking-widest uppercase transition-colors hover:text-pink-400"
style={{ color: "var(--text-secondary)" }}>
Réessayer
</button>
</div>