57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import {
|
|
internationalRatingsSchema,
|
|
type InternationalRatings,
|
|
} from "@/lib/schemas";
|
|
|
|
export function InternationalRatingsView({ data }: { data: unknown }) {
|
|
const result = internationalRatingsSchema.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 InternationalRatings;
|
|
|
|
return (
|
|
<div className="space-y-5 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
{parsed.ratings.map((rating) => (
|
|
<div
|
|
key={rating.countryCode}
|
|
className="rounded-xl border border-white/10 bg-slate-950/40 p-4"
|
|
>
|
|
<p className="text-xs uppercase tracking-wide text-slate-500">
|
|
{rating.country} ({rating.countryCode})
|
|
</p>
|
|
<p className="mt-1 text-xl font-semibold text-amber-200">
|
|
{rating.rating}
|
|
</p>
|
|
{rating.descriptors?.length ? (
|
|
<p className="mt-2 text-sm text-slate-400">
|
|
{rating.descriptors.join(" · ")}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="rounded-xl border border-white/10 bg-slate-950/40 p-4">
|
|
<p className="text-sm leading-relaxed text-slate-300">
|
|
{parsed.discrepancyNote}
|
|
</p>
|
|
{(parsed.strictestCountry || parsed.mostLenientCountry) && (
|
|
<div className="mt-3 flex flex-wrap gap-4 text-sm text-slate-400">
|
|
{parsed.strictestCountry ? (
|
|
<span>Strictest: {parsed.strictestCountry}</span>
|
|
) : null}
|
|
{parsed.mostLenientCountry ? (
|
|
<span>Most lenient: {parsed.mostLenientCountry}</span>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |