twotalesanimation
46 lines
2.0 KiB
TypeScript
46 lines
2.0 KiB
TypeScript
import Reveal from "./Reveal";
|
|
import { filmography } from "@/content/site";
|
|
|
|
export default function Filmography() {
|
|
return (
|
|
<ul className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 lg:gap-x-6">
|
|
{filmography.map((c, i) => (
|
|
<li key={c.slug}>
|
|
<Reveal delay={(i % 5) * 60}>
|
|
<figure className="group">
|
|
<div className="relative aspect-[2/3] overflow-hidden bg-ink-2 ring-1 ring-line">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={c.poster}
|
|
alt={`${c.title} poster`}
|
|
loading="lazy"
|
|
className="h-full w-full object-cover grayscale-[35%] transition duration-700 ease-out group-hover:scale-[1.04] group-hover:grayscale-0"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
|
<div className="absolute top-2 left-2 flex flex-wrap gap-1">
|
|
{c.upcoming && (
|
|
<span className="bg-accent px-1.5 py-0.5 font-mono text-[9px] tracking-[0.2em] text-ink uppercase">
|
|
Upcoming
|
|
</span>
|
|
)}
|
|
{c.network && (
|
|
<span className="bg-black/70 px-1.5 py-0.5 font-mono text-[9px] tracking-[0.2em] text-fg uppercase backdrop-blur-sm">
|
|
{c.network}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<figcaption className="mt-3">
|
|
<p className="text-sm leading-snug">{c.title}</p>
|
|
<p className="mt-1 font-mono text-[10px] tracking-[0.2em] text-muted uppercase">
|
|
{c.year} · {c.format}
|
|
</p>
|
|
</figcaption>
|
|
</figure>
|
|
</Reveal>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|