70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import {
|
|
productionFactsSchema,
|
|
type ProductionFacts,
|
|
} from "@/lib/schemas";
|
|
|
|
export function ProductionFactsView({ data }: { data: unknown }) {
|
|
const result = productionFactsSchema.safeParse(data);
|
|
if (!result.success) {
|
|
return (
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-sm text-slate-400">
|
|
Could not display this insight (data format issue). Try another card or refresh later.
|
|
</div>
|
|
);
|
|
}
|
|
const parsed = result.data as ProductionFacts;
|
|
|
|
return (
|
|
<div className="space-y-5 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
|
|
{(parsed.budget || parsed.boxOffice) && (
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
{parsed.budget ? <Stat label="Budget" value={parsed.budget} /> : null}
|
|
{parsed.boxOffice ? (
|
|
<Stat label="Box office" value={parsed.boxOffice} />
|
|
) : null}
|
|
</div>
|
|
)}
|
|
|
|
{parsed.filmingLocations?.length ? (
|
|
<div>
|
|
<p className="mb-2 text-sm text-slate-400">Filming locations</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{parsed.filmingLocations.map((location) => (
|
|
<span
|
|
key={location}
|
|
className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-sm text-slate-300"
|
|
>
|
|
{location}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="space-y-3">
|
|
{parsed.facts.map((item, index) => (
|
|
<div
|
|
key={`${item.category}-${index}`}
|
|
className="rounded-xl border border-white/10 bg-slate-950/40 p-4"
|
|
>
|
|
<p className="text-xs uppercase tracking-wide text-amber-200/80">
|
|
{item.category}
|
|
</p>
|
|
<p className="mt-2 text-sm leading-relaxed text-slate-300">
|
|
{item.fact}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Stat({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="rounded-xl border border-white/10 bg-slate-950/40 p-4">
|
|
<p className="text-xs uppercase tracking-wide text-slate-500">{label}</p>
|
|
<p className="mt-1 text-lg font-medium text-white">{value}</p>
|
|
</div>
|
|
);
|
|
} |