82 lines
5.0 KiB
JavaScript
82 lines
5.0 KiB
JavaScript
import { useEffect, useState } from "react"
|
|
import { Activity, ArrowUpRight, Blocks, Database, Moon, RefreshCw, Server, Sun } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
|
|
export default function App() {
|
|
const [theme, setTheme] = useState(() => localStorage.getItem("theme") || "light")
|
|
const [api, setApi] = useState({ loading: true, ok: false, message: "Connexion en cours..." })
|
|
|
|
useEffect(() => {
|
|
document.documentElement.classList.toggle("dark", theme === "dark")
|
|
localStorage.setItem("theme", theme)
|
|
}, [theme])
|
|
|
|
async function checkApi() {
|
|
setApi({ loading: true, ok: false, message: "Vérification..." })
|
|
try {
|
|
const res = await fetch("/api/health/", { cache: "no-store" })
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
|
const body = await res.json()
|
|
setApi({ loading: false, ok: body.status === "ok", message: body.message })
|
|
} catch (error) {
|
|
setApi({ loading: false, ok: false, message: error.message })
|
|
}
|
|
}
|
|
|
|
useEffect(() => { checkApi() }, [])
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground">
|
|
<header className="border-b border-border bg-card/80">
|
|
<div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-5">
|
|
<div className="flex items-center gap-3">
|
|
<div className="grid size-9 place-items-center rounded-xl bg-primary text-primary-foreground"><Blocks className="size-5" /></div>
|
|
<span className="font-semibold tracking-tight">Mon Projet</span>
|
|
<span className="hidden rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground sm:inline">Template</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button aria-label="Changer de thème" variant="ghost" size="icon" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
|
|
{theme === "dark" ? <Sun className="size-4" /> : <Moon className="size-4" />}
|
|
</Button>
|
|
<Button variant="outline" asChild><a href="/admin/">Administration <ArrowUpRight className="size-4" /></a></Button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="mx-auto max-w-6xl px-5 py-14">
|
|
<div className="mb-10 max-w-2xl">
|
|
<div className="mb-4 inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1 text-xs font-medium text-muted-foreground">
|
|
<span className="size-2 rounded-full bg-emerald-500"/> Django · React · MySQL
|
|
</div>
|
|
<h1 className="text-3xl font-bold tracking-tight sm:text-4xl">Ton nouveau projet commence ici.</h1>
|
|
<p className="mt-4 text-base leading-relaxed text-muted-foreground">Une base propre avec Docker, API Django, React + Vite, composants shadcn et thème clair/sombre. Tu peux remplacer cette page par ton application.</p>
|
|
</div>
|
|
|
|
<div className="grid gap-5 md:grid-cols-3">
|
|
<Card>
|
|
<CardHeader><div className="mb-2 text-primary"><Server className="size-6"/></div><CardTitle>API Django</CardTitle><CardDescription>Endpoint de vérification : /api/health/</CardDescription></CardHeader>
|
|
<CardContent>
|
|
<div className="mb-4 flex items-center gap-2 text-sm"><span className={`size-2.5 rounded-full ${api.loading ? "bg-amber-500" : api.ok ? "bg-emerald-500" : "bg-red-500"}`}/>{api.loading ? "Connexion..." : api.ok ? "Connectée" : "Indisponible"}</div>
|
|
<p className="mb-4 min-h-12 break-words text-sm text-muted-foreground">{api.message}</p>
|
|
<Button variant="outline" onClick={checkApi}><RefreshCw className="size-4"/> Réessayer</Button>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader><div className="mb-2 text-primary"><Database className="size-6"/></div><CardTitle>MySQL</CardTitle><CardDescription>MySQL 8, volume persistant et Django ORM</CardDescription></CardHeader>
|
|
<CardContent><p className="text-sm leading-relaxed text-muted-foreground">La connexion est définie dans <code>backend/core/settings.py</code> à partir des variables <code>MYSQL_*</code>.</p></CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader><div className="mb-2 text-primary"><Activity className="size-6"/></div><CardTitle>Frontend</CardTitle><CardDescription>React, Vite, Tailwind CSS v4 et shadcn/ui</CardDescription></CardHeader>
|
|
<CardContent><p className="text-sm leading-relaxed text-muted-foreground">Composants de départ prêts à personnaliser dans <code>frontend/src/components/ui/</code>.</p></CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="mt-10 rounded-xl border border-dashed border-border bg-card/60 p-6 text-sm text-muted-foreground">
|
|
<strong className="text-foreground">Prochaine étape :</strong> crée ton application Django dans <code>backend/</code> et tes pages React dans <code>frontend/src/</code>.
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|