49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import {
|
|
CARD_META,
|
|
CARD_TYPES,
|
|
shouldShowHistoricalAccuracy,
|
|
type CardType,
|
|
} from "@/lib/cards";
|
|
import { CardContent } from "./cards/CardContent";
|
|
import { InfoCard } from "./InfoCard";
|
|
|
|
export function MovieInsightPanel({
|
|
movieId,
|
|
genres,
|
|
}: {
|
|
movieId: number;
|
|
genres: string[];
|
|
}) {
|
|
const visibleCards = CARD_TYPES.filter((type) => {
|
|
if (type === "historical_accuracy") {
|
|
return shouldShowHistoricalAccuracy(genres);
|
|
}
|
|
return true;
|
|
});
|
|
|
|
const [selected, setSelected] = useState<CardType>(visibleCards[0]);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
|
|
{visibleCards.map((type) => (
|
|
<InfoCard
|
|
key={type}
|
|
meta={CARD_META[type]}
|
|
selected={selected === type}
|
|
onClick={() => setSelected(type)}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<CardContent
|
|
key={`${movieId}-${selected}`}
|
|
movieId={movieId}
|
|
cardType={selected}
|
|
/>
|
|
</div>
|
|
);
|
|
} |