47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { MOD_GAMES } from "@/data/content";
|
|
import { useStaggerReveal } from "@/hooks/useAnimations";
|
|
import ModGameSection from "@/components/ModGameSection";
|
|
import "../styles/mods.css";
|
|
|
|
/** The mods tab: every game I've modded, each with its own list. */
|
|
export default function ModsGrid() {
|
|
const visible = useStaggerReveal(MOD_GAMES.length, 100);
|
|
|
|
return (
|
|
<div style={{ padding: "48px 0", minWidth: 0 }}>
|
|
<div
|
|
style={{
|
|
marginBottom: 8,
|
|
fontFamily: "var(--mono)",
|
|
fontSize: 11,
|
|
color: "var(--muted)",
|
|
letterSpacing: "0.08em",
|
|
textTransform: "uppercase",
|
|
}}
|
|
>
|
|
{"# mods"}
|
|
</div>
|
|
<h2
|
|
style={{
|
|
fontFamily: "var(--sans)",
|
|
fontSize: 28,
|
|
fontWeight: 700,
|
|
color: "var(--fg)",
|
|
margin: "0 0 32px 0",
|
|
letterSpacing: "-0.01em",
|
|
}}
|
|
>
|
|
{"Games I've modded"}
|
|
</h2>
|
|
|
|
<div className="mod-games">
|
|
{MOD_GAMES.map((game, i) => (
|
|
<ModGameSection key={game.id} game={game} visible={visible.has(i)} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|