Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
"use client";
import { useState } from "react";
import { CardAnnonce } from "@/lib/components/annonceComponents/annonceCardComponent";
import Link from "next/link";
import { AnnonceProps } from "@/lib/types/AnnonceProps";
import type { Prisma, Question } from "@prisma/client";
type Data = {
annonces: AnnonceProps[];
questions: Question[];
answers: any[];
};
export default function ProfileTabsClient({
data,
userRole,
isOwner,
}: {
data: Data;
userRole: string;
isOwner: boolean;
}) {
const [tab, setTab] = useState<"annonces" | "questions" | "answers">("annonces");
return (
<section className="w-full">
<div className="flex gap-4">
{(["annonces", "questions", "answers"] as const).map((t) => (
<button
key={t}
onClick={() => setTab(t)}
className={`font-oswald rounded-xl px-4 py-2 transition ${tab === t ? "bg-secondary text-white" : "bg-primary hover:bg-secondary text-white"} `}>
{t === "annonces" ? "Annonces" : t === "questions" ? "Questions" : "Réponses"}
</button>
))}
</div>
<div className="mt-6">
{userRole === "ADMIN" &&
isOwner &&
tab === "annonces" &&
(data.annonces.length === 0 ? (
<p className="text-white/70 italic">Aucune annonce.</p>
) : (
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
{data.annonces.map((a) => (
<div key={a.id} className="min-w-[260px]">
<CardAnnonce {...a} />
</div>
))}
</div>
))}
{tab === "questions" &&
(data.questions.length === 0 ? (
<Empty label="Aucune question." />
) : (
<ul className="divide-y divide-white/10 rounded-2xl border border-white/10 bg-white/5">
{data.questions.map((q: Question) => (
<li key={q.id} className="p-4">
<Link className="hover:text-secondary hover:cursor-pointer" scroll={true} href={`/annonces/${q.annonceId}#question${q.id}`}>
{q.content}
</Link>
<p className="mt-1 text-sm">
Publié le {new Date(q.createdAt).toLocaleDateString("fr-FR")}
</p>
</li>
))}
</ul>
))}
{tab === "answers" &&
(data.answers.length === 0 ? (
<Empty label="Aucune réponse." />
) : (
<ul className="divide-y divide-white/10 rounded-2xl border border-white/10 bg-white/5">
{data.answers.map((q: any) => (
<li key={q.id} className="p-4 ">
<Link className="hover:text-secondary hover:cursor-pointer" scroll={true} href={`/annonces/${q.annonceId}#question${q.id}`}>
{q.answer}
</Link>
<p className="mt-1 text-sm">
Répondu le {new Date(q.createdAt).toLocaleDateString("fr-FR")}
</p>
</li>
))}
</ul>
))}
</div>
</section>
);
}
function Empty({ label, cta }: { label: string; cta?: { href: string; text: string } }) {
return (
<div className="rounded-2xl border border-dashed border-white/20 p-8 text-center">
<p>{label}</p>
{cta && (
<Link
href={cta.href}
className="bg-secondary hover:bg-secondary/80 mt-4 inline-block rounded-xl px-4 py-2">
{cta.text}
</Link>
)}
</div>
);
}