mirror of
https://github.com/jakejarvis/sofa.git
synced 2026-08-29 00:25:38 -04:00
jake
71b39d5aca
Rename the person detail route from `app/(pages)/person/[id]` to `app/(pages)/people/[id]` and update all internal links accordingly. Strip crew members from the cast carousel so only actors are shown; remove the `crew` prop from `CastCarousel` and `TitleCast` entirely. Move the trailer trigger from the metadata row into a centered overlay on the backdrop image using a new `variant="backdrop"` prop on `TrailerDialog`, replacing the previous inline button approach. Swap several icons for better semantic matches: `IconBooks` for the library section, `IconCheck` for the "Mark Watched" button, `IconSparkles` on the Recommendations heading, and `IconDeviceTvOld` on the Seasons heading. Replace a nested `motion.p` with a plain `<p>` using CSS `transition-opacity` in `StatsDisplay`. Remove the `animate-gentle-float` keyframe and the `feed-scroll` utility from `globals.css`, replacing the latter with the existing `no-scrollbar` class.
57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { IconSparkles } from "@tabler/icons-react";
|
|
import { motion } from "motion/react";
|
|
import { TitleCard } from "@/components/title-card";
|
|
import type { RecommendedTitle } from "@/lib/types/title";
|
|
|
|
const staggerContainer = {
|
|
hidden: {},
|
|
visible: { transition: { staggerChildren: 0.05 } },
|
|
};
|
|
|
|
const staggerItem = {
|
|
hidden: { opacity: 0, y: 12, scale: 0.98 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
scale: 1,
|
|
transition: { type: "spring" as const, stiffness: 300, damping: 24 },
|
|
},
|
|
};
|
|
|
|
export function RecommendationsGrid({
|
|
recommendations,
|
|
}: {
|
|
recommendations: RecommendedTitle[];
|
|
}) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-2">
|
|
<IconSparkles className="size-5 text-primary" />
|
|
<h2 className="font-display text-2xl tracking-tight">Recommended</h2>
|
|
</div>
|
|
<motion.div
|
|
className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
|
|
variants={staggerContainer}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
{recommendations.slice(0, 12).map((rec) => (
|
|
<motion.div key={rec.id} variants={staggerItem}>
|
|
<TitleCard
|
|
id={rec.id}
|
|
tmdbId={rec.tmdbId}
|
|
type={rec.type}
|
|
title={rec.title}
|
|
posterPath={rec.posterPath}
|
|
releaseDate={rec.releaseDate ?? rec.firstAirDate}
|
|
voteAverage={rec.voteAverage}
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|