106 lines
3.5 KiB
TypeScript
106 lines
3.5 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import Image from "next/image";
|
||
|
||
const ADS_COPY: Record<string, { title: string; subtitle: string }> = {
|
||
"riseofkinkdom.jpeg": {
|
||
title: "Atteignez 50 Millions d’Impuissance !",
|
||
subtitle: "Rejoignez « Rise of Kink Doms » et dominez vos adversaires.",
|
||
},
|
||
"voat.png": {
|
||
title: "Aymeric Pierre vend votre voiture !",
|
||
subtitle: "Offre exclusive : 69,42 BTC, garantie World PvP Champion.",
|
||
},
|
||
};
|
||
|
||
export default function AdsGalleryClient({ files }: { files: string[] }) {
|
||
return (
|
||
<main className="flex min-h-screen flex-col bg-[#0e0e10]">
|
||
<section className="mx-auto w-full max-w-6xl flex-1 px-4 py-12">
|
||
<motion.h1
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||
className="mb-10 text-3xl font-extrabold text-red-600"
|
||
>
|
||
Galerie des publicités
|
||
</motion.h1>
|
||
|
||
{files.length === 0 ? (
|
||
<motion.p
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.2 }}
|
||
className="text-gray-400"
|
||
>
|
||
Aucune bannière trouvée dans{" "}
|
||
<code className="text-sm">/public/ads</code>.
|
||
</motion.p>
|
||
) : (
|
||
<motion.ul
|
||
initial="hidden"
|
||
animate="visible"
|
||
variants={{
|
||
hidden: {},
|
||
visible: {
|
||
transition: {
|
||
staggerChildren: 0.1,
|
||
},
|
||
},
|
||
}}
|
||
className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
|
||
>
|
||
{files.map((file) => {
|
||
const copy = ADS_COPY[file];
|
||
return (
|
||
<motion.li
|
||
key={file}
|
||
variants={{
|
||
hidden: { opacity: 0, y: 20 },
|
||
visible: { opacity: 1, y: 0 },
|
||
}}
|
||
className="overflow-hidden rounded-xl border border-[#1c2536] bg-[#0b1320] shadow"
|
||
>
|
||
<div className="relative h-42 w-full">
|
||
<Image
|
||
src={`/ads/${file}`}
|
||
alt={file}
|
||
fill
|
||
className="object-cover"
|
||
sizes="(min-width:1024px) 33vw, (min-width:640px) 50vw, 100vw"
|
||
priority
|
||
/>
|
||
</div>
|
||
|
||
{copy && (
|
||
<div className="px-4 py-3 text-center">
|
||
<h2 className="text-[15px] font-bold leading-snug text-amber-100">
|
||
{copy.title.split(/(50 Millions)/).map((part, i) =>
|
||
part === "50 Millions" ? (
|
||
<span key={i} className="text-red-500">
|
||
{part}
|
||
</span>
|
||
) : (
|
||
part
|
||
)
|
||
)}
|
||
</h2>
|
||
<p className="mt-1 text-sm text-gray-300">
|
||
{copy.subtitle}
|
||
</p>
|
||
</div>
|
||
)}
|
||
<p className="truncate bg-[#0b1320] px-3 py-2 text-center text-xs text-gray-500">
|
||
{file}
|
||
</p>
|
||
</motion.li>
|
||
);
|
||
})}
|
||
</motion.ul>
|
||
)}
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|