51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
'use client';
|
||
|
||
import { X } from 'lucide-react';
|
||
import Image from 'next/image';
|
||
import { useEffect, useState } from 'react';
|
||
|
||
const ADS_IMAGES = [
|
||
'/ads/riseofkinkdom.jpeg',
|
||
'/ads/voat.png'
|
||
];
|
||
|
||
export default function PopupAd() {
|
||
const [visible, setVisible] = useState(false);
|
||
const [src, setSrc] = useState<string>(ADS_IMAGES[0]);
|
||
|
||
/* choix aléatoire + délai d’apparition */
|
||
useEffect(() => {
|
||
setSrc(ADS_IMAGES[Math.floor(Math.random() * ADS_IMAGES.length)]);
|
||
const id = setTimeout(() => setVisible(true), 5000); // 5 s
|
||
return () => clearTimeout(id);
|
||
}, []);
|
||
|
||
if (!visible) return null;
|
||
|
||
return (
|
||
<div className="fixed bottom-6 right-6 hidden md:block z-50 animate-in fade-in slide-in-from-bottom-4">
|
||
<div className="relative w-[420px] rounded-lg overflow-hidden shadow-2xl ring-1 ring-black/20">
|
||
{/* bouton fermer */}
|
||
<button
|
||
onClick={() => setVisible(false)}
|
||
aria-label="Fermer la pub"
|
||
className="absolute right-2 top-2 z-10 rounded-full bg-black/40 p-1 hover:bg-black/60"
|
||
>
|
||
<X className="h-4 w-4 text-white" />
|
||
</button>
|
||
|
||
{/* image de la pub */}
|
||
<Image
|
||
src={src}
|
||
alt="Publicité fictive"
|
||
width={420}
|
||
height={1080}
|
||
priority
|
||
className="object-cover select-none"
|
||
unoptimized
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|