107 lines
3.9 KiB
TypeScript
107 lines
3.9 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { SafeProject } from "@/lib/validators/project";
|
|||
|
|
import { motion } from "framer-motion";
|
|||
|
|
import {
|
|||
|
|
BadgeCheck,
|
|||
|
|
FileText,
|
|||
|
|
Globe,
|
|||
|
|
MapPin,
|
|||
|
|
Pencil,
|
|||
|
|
Tag,
|
|||
|
|
} from "lucide-react";
|
|||
|
|
import Link from "next/link";
|
|||
|
|
|
|||
|
|
export default function UserProjectsTable({ projects }: { projects: SafeProject[] }) {
|
|||
|
|
const headers = [
|
|||
|
|
{ label: "Projet", icon: FileText },
|
|||
|
|
{ label: "État", icon: BadgeCheck },
|
|||
|
|
{ label: "Monde", icon: Globe },
|
|||
|
|
{ label: "Coordonnées", icon: MapPin },
|
|||
|
|
{ label: "Tags", icon: Tag },
|
|||
|
|
{ label: "Actions", icon: Pencil },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<section className="mx-auto max-w-6xl px-4 py-10">
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0, y: 20 }}
|
|||
|
|
animate={{ opacity: 1, y: 0 }}
|
|||
|
|
transition={{ duration: 0.4 }}
|
|||
|
|
className="flex items-center justify-between mb-6"
|
|||
|
|
>
|
|||
|
|
<h1 className="text-2xl font-bold text-amber-50">Mes projets</h1>
|
|||
|
|
<Link
|
|||
|
|
href="/dashboard/ajouter"
|
|||
|
|
className="inline-flex items-center gap-2 rounded bg-green-600 px-3 py-1.5 text-sm font-medium hover:bg-green-700"
|
|||
|
|
>
|
|||
|
|
➕ Ajouter un projet
|
|||
|
|
</Link>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
{projects.length === 0 ? (
|
|||
|
|
<p className="mt-6 text-center text-amber-50/60">Vous n’avez encore créé aucun projet.</p>
|
|||
|
|
) : (
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0, y: 20 }}
|
|||
|
|
animate={{ opacity: 1, y: 0 }}
|
|||
|
|
transition={{ duration: 0.4, delay: 0.1 }}
|
|||
|
|
className="overflow-x-auto rounded-t-2xl"
|
|||
|
|
>
|
|||
|
|
<table className="w-full border-collapse text-left text-[13px]">
|
|||
|
|
<thead>
|
|||
|
|
<tr className="bg-slate-800 text-amber-50 [&>th:first-child]:rounded-tl-xl [&>th:last-child]:rounded-tr-xl">
|
|||
|
|
{headers.map(({ label, icon: Icon }) => (
|
|||
|
|
<th key={label} className="px-3 py-2 font-semibold">
|
|||
|
|
<div className="flex items-center gap-1">
|
|||
|
|
<Icon size={14} className="opacity-70" />
|
|||
|
|
{label}
|
|||
|
|
</div>
|
|||
|
|
</th>
|
|||
|
|
))}
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
{projects.map((p) => (
|
|||
|
|
<tr key={p.id} className="bg-[#0f111c]">
|
|||
|
|
<td className="px-3 py-2">{p.projet}</td>
|
|||
|
|
<td className="px-3 py-2">
|
|||
|
|
<span className={`rounded-full px-2 py-0.5 text-[11px] font-medium ${
|
|||
|
|
p.etat === "En cours" ? "bg-yellow-400/90 text-black" :
|
|||
|
|
p.etat === "Terminé" ? "bg-green-600/90" : "bg-red-600/90"
|
|||
|
|
}`}>{p.etat}</span>
|
|||
|
|
</td>
|
|||
|
|
<td className="px-3 py-2">
|
|||
|
|
<span className={`rounded-full px-2 py-0.5 text-[11px] ${
|
|||
|
|
p.monde === "Overworld" ? "bg-emerald-700/80" :
|
|||
|
|
p.monde === "Nether" ? "bg-red-700/80" : "bg-violet-800/90"
|
|||
|
|
}`}>{p.monde}</span>
|
|||
|
|
</td>
|
|||
|
|
<td className="px-3 py-2 font-mono tabular-nums">{p.coords ?? "—"}</td>
|
|||
|
|
<td className="px-3 py-2">
|
|||
|
|
<div className="flex flex-wrap gap-1">
|
|||
|
|
{p.tags.map((t, i) => (
|
|||
|
|
<span key={t + i} className="rounded-full bg-white/10 px-2 py-0.5 text-xs">
|
|||
|
|
{t}
|
|||
|
|
</span>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td className="px-3 py-2">
|
|||
|
|
<Link
|
|||
|
|
href={`/dashboard/projets/${p.id}`}
|
|||
|
|
className="inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-indigo-400 hover:bg-white/10"
|
|||
|
|
>
|
|||
|
|
<Pencil size={12} /> Modifier
|
|||
|
|
</Link>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
))}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</motion.div>
|
|||
|
|
)}
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
}
|