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>
|
||
);
|
||
}
|