49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useState } from "react";
|
|
import type { StrapiMedia } from "@afterlife/shared";
|
|
|
|
interface ScreenshotGalleryProps {
|
|
screenshots: StrapiMedia[];
|
|
}
|
|
|
|
export function ScreenshotGallery({ screenshots }: ScreenshotGalleryProps) {
|
|
const [selected, setSelected] = useState(0);
|
|
|
|
if (screenshots.length === 0) return null;
|
|
|
|
return (
|
|
<div className="mt-12">
|
|
<div className="relative aspect-video rounded-lg overflow-hidden mb-4">
|
|
<Image
|
|
src={screenshots[selected].url}
|
|
alt={screenshots[selected].alternativeText || "Screenshot"}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
{screenshots.length > 1 && (
|
|
<div className="flex gap-2 overflow-x-auto pb-2">
|
|
{screenshots.map((ss, i) => (
|
|
<button
|
|
key={ss.id}
|
|
onClick={() => setSelected(i)}
|
|
className={`relative w-24 h-16 rounded overflow-hidden flex-shrink-0 border-2 transition-colors ${
|
|
i === selected ? "border-blue-500" : "border-transparent"
|
|
}`}
|
|
>
|
|
<Image
|
|
src={ss.url}
|
|
alt={ss.alternativeText || `Screenshot ${i + 1}`}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|