juan/lensflix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

relevo de glm

Browse Source
This commit is contained in:
juan
2026-06-17 20:35:57 +02:00
parent 6620b493f5
commit cdf2893b94
20 changed files with 251 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/cards/CardContent.tsx
+8 -8
View File
@@ -65,26 +65,26 @@ export function CardContent({ movieId, cardType }: CardContentProps) {
if (loading) {
return (
<div className="space-y-3 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
<div className="h-4 w-40 animate-pulse rounded bg-white/10" />
<div className="h-4 w-full animate-pulse rounded bg-white/10" />
<div className="h-4 w-5/6 animate-pulse rounded bg-white/10" />
<p className="text-sm text-slate-400">Generating insight...</p>
<div className="space-y-3 rounded-2xl border border-stone-200 bg-white p-6">
<div className="h-4 w-40 animate-pulse rounded bg-stone-200" />
<div className="h-4 w-full animate-pulse rounded bg-stone-200" />
<div className="h-4 w-5/6 animate-pulse rounded bg-stone-200" />
<p className="text-sm text-stone-600">Generating insight...</p>
</div>
);
}
if (error) {
return (
<div className="rounded-2xl border border-red-400/20 bg-red-400/5 p-6">
<p className="text-red-200">{error}</p>
<div className="rounded-2xl border border-red-200 bg-red-50 p-6">
<p className="text-red-700">{error}</p>
<button
type="button"
onClick={() => {
setLoading(true);
setRetryToken((token) => token + 1);
}}
className="mt-4 rounded-lg border border-white/10 px-4 py-2 text-sm text-white transition hover:bg-white/5"
className="mt-4 rounded-lg border border-stone-300 px-4 py-2 text-sm text-stone-800 transition hover:bg-stone-100"
>
Try again
</button>
components/cards/HistoricalAccuracy.tsx
+15 -15
View File
@@ -7,7 +7,7 @@ export function HistoricalAccuracyView({ data }: { data: unknown }) {
const result = historicalAccuracySchema.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">
<div className="rounded-2xl border border-stone-200 bg-white p-6 text-sm text-stone-700">
Could not display this insight (data format issue). Try another card or refresh later.
</div>
);
@@ -15,32 +15,32 @@ export function HistoricalAccuracyView({ data }: { data: unknown }) {
const parsed = result.data as HistoricalAccuracy;
return (
<div className="space-y-5 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
<div className="space-y-5 rounded-2xl border border-stone-200 bg-white p-6">
<div className="flex items-end gap-4">
<div>
<p className="text-xs uppercase tracking-wide text-slate-500">
<p className="text-xs uppercase tracking-wide text-stone-500">
Accuracy score
</p>
<p className="text-4xl font-semibold text-amber-200">
<p className="text-4xl font-semibold text-amber-700">
{parsed.accuracyScore}
<span className="text-lg text-slate-500">/100</span>
<span className="text-lg text-stone-500">/100</span>
</p>
</div>
<p className="pb-1 text-sm capitalize text-slate-400">
<p className="pb-1 text-sm capitalize text-stone-600">
Confidence: {parsed.confidence}
</p>
</div>
<p className="text-slate-300">{parsed.summary}</p>
<p className="text-stone-700">{parsed.summary}</p>
{parsed.accurateElements.length > 0 && (
<div>
<p className="mb-2 text-sm font-medium text-white">What holds up</p>
<p className="mb-2 text-sm font-medium text-stone-950">What holds up</p>
<ul className="space-y-2">
{parsed.accurateElements.map((item) => (
<li
key={item}
className="rounded-lg border border-emerald-400/20 bg-emerald-400/5 px-3 py-2 text-sm text-slate-300"
className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-stone-700"
>
{item}
</li>
@@ -51,20 +51,20 @@ export function HistoricalAccuracyView({ data }: { data: unknown }) {
{parsed.inventions.length > 0 && (
<div>
<p className="mb-2 text-sm font-medium text-white">
<p className="mb-2 text-sm font-medium text-stone-950">
Dramatizations & inventions
</p>
<div className="space-y-3">
{parsed.inventions.map((item, index) => (
<div
key={`${item.claim}-${index}`}
className="rounded-xl border border-white/10 bg-slate-950/40 p-4"
className="rounded-xl border border-stone-200 bg-stone-100 p-4"
>
<p className="text-sm text-slate-300">
<span className="text-slate-500">Film claim:</span> {item.claim}
<p className="text-sm text-stone-700">
<span className="text-stone-500">Film claim:</span> {item.claim}
</p>
<p className="mt-2 text-sm text-slate-300">
<span className="text-slate-500">Reality:</span> {item.reality}
<p className="mt-2 text-sm text-stone-700">
<span className="text-stone-500">Reality:</span> {item.reality}
</p>
</div>
))}
components/cards/InternationalRatings.tsx
+9 -9
View File
@@ -7,7 +7,7 @@ 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">
<div className="rounded-2xl border border-stone-200 bg-white p-6 text-sm text-stone-700">
Could not display this insight (data format issue). Try another card or refresh later.
</div>
);
@@ -15,21 +15,21 @@ export function InternationalRatingsView({ data }: { data: unknown }) {
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="space-y-5 rounded-2xl border border-stone-200 bg-white 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"
className="rounded-xl border border-stone-200 bg-stone-100 p-4"
>
<p className="text-xs uppercase tracking-wide text-slate-500">
<p className="text-xs uppercase tracking-wide text-stone-500">
{rating.country} ({rating.countryCode})
</p>
<p className="mt-1 text-xl font-semibold text-amber-200">
<p className="mt-1 text-xl font-semibold text-amber-700">
{rating.rating}
</p>
{rating.descriptors?.length ? (
<p className="mt-2 text-sm text-slate-400">
<p className="mt-2 text-sm text-stone-600">
{rating.descriptors.join(" · ")}
</p>
) : null}
@@ -37,12 +37,12 @@ export function InternationalRatingsView({ data }: { data: unknown }) {
))}
</div>
<div className="rounded-xl border border-white/10 bg-slate-950/40 p-4">
<p className="text-sm leading-relaxed text-slate-300">
<div className="rounded-xl border border-stone-200 bg-stone-100 p-4">
<p className="text-sm leading-relaxed text-stone-700">
{parsed.discrepancyNote}
</p>
{(parsed.strictestCountry || parsed.mostLenientCountry) && (
<div className="mt-3 flex flex-wrap gap-4 text-sm text-slate-400">
<div className="mt-3 flex flex-wrap gap-4 text-sm text-stone-600">
{parsed.strictestCountry ? (
<span>Strictest: {parsed.strictestCountry}</span>
) : null}
components/cards/ProductionFacts.tsx
+10 -10
View File
@@ -7,7 +7,7 @@ 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">
<div className="rounded-2xl border border-stone-200 bg-white p-6 text-sm text-stone-700">
Could not display this insight (data format issue). Try another card or refresh later.
</div>
);
@@ -15,7 +15,7 @@ export function ProductionFactsView({ data }: { data: unknown }) {
const parsed = result.data as ProductionFacts;
return (
<div className="space-y-5 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
<div className="space-y-5 rounded-2xl border border-stone-200 bg-white p-6">
{(parsed.budget || parsed.boxOffice) && (
<div className="grid gap-3 sm:grid-cols-2">
{parsed.budget ? <Stat label="Budget" value={parsed.budget} /> : null}
@@ -27,12 +27,12 @@ export function ProductionFactsView({ data }: { data: unknown }) {
{parsed.filmingLocations?.length ? (
<div>
<p className="mb-2 text-sm text-slate-400">Filming locations</p>
<p className="mb-2 text-sm text-stone-600">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"
className="rounded-full border border-stone-200 bg-stone-100 px-3 py-1 text-sm text-stone-700"
>
{location}
</span>
@@ -45,12 +45,12 @@ export function ProductionFactsView({ data }: { data: unknown }) {
{parsed.facts.map((item, index) => (
<div
key={`${item.category}-${index}`}
className="rounded-xl border border-white/10 bg-slate-950/40 p-4"
className="rounded-xl border border-stone-200 bg-stone-100 p-4"
>
<p className="text-xs uppercase tracking-wide text-amber-200/80">
<p className="text-xs uppercase tracking-wide text-amber-700">
{item.category}
</p>
<p className="mt-2 text-sm leading-relaxed text-slate-300">
<p className="mt-2 text-sm leading-relaxed text-stone-700">
{item.fact}
</p>
</div>
@@ -62,9 +62,9 @@ export function ProductionFactsView({ data }: { data: unknown }) {
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 className="rounded-xl border border-stone-200 bg-stone-100 p-4">
<p className="text-xs uppercase tracking-wide text-stone-500">{label}</p>
<p className="mt-1 text-lg font-medium text-stone-950">{value}</p>
</div>
);
}
components/cards/RatingExplained.tsx
+12 -12
View File
@@ -5,16 +5,16 @@ import {
import { cn } from "@/lib/utils";
const intensityColors = {
mild: "text-emerald-300 bg-emerald-400/10 border-emerald-400/20",
moderate: "text-amber-300 bg-amber-400/10 border-amber-400/20",
strong: "text-red-300 bg-red-400/10 border-red-400/20",
mild: "text-emerald-700 bg-emerald-100 border-emerald-200",
moderate: "text-amber-700 bg-amber-100 border-amber-200",
strong: "text-red-700 bg-red-100 border-red-200",
};
export function RatingExplainedView({ data }: { data: unknown }) {
const result = ratingExplainedSchema.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">
<div className="rounded-2xl border border-stone-200 bg-white p-6 text-sm text-stone-700">
Could not display this insight (data format issue). Try another card or refresh later.
</div>
);
@@ -22,25 +22,25 @@ export function RatingExplainedView({ data }: { data: unknown }) {
const parsed = result.data as RatingExplained;
return (
<div className="space-y-5 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
<div className="space-y-5 rounded-2xl border border-stone-200 bg-white p-6">
<div>
<p className="text-sm uppercase tracking-wide text-slate-500">
<p className="text-sm uppercase tracking-wide text-stone-500">
{parsed.region} rating
</p>
<h3 className="mt-1 text-2xl font-semibold text-amber-200">
<h3 className="mt-1 text-2xl font-semibold text-amber-700">
{parsed.officialRating}
</h3>
<p className="mt-3 text-slate-300">{parsed.summary}</p>
<p className="mt-3 text-stone-700">{parsed.summary}</p>
</div>
<div className="space-y-3">
{parsed.factors.map((factor, index) => (
<div
key={`${factor.category}-${index}`}
className="rounded-xl border border-white/10 bg-slate-950/40 p-4"
className="rounded-xl border border-stone-200 bg-stone-100 p-4"
>
<div className="mb-2 flex flex-wrap items-center gap-2">
<span className="text-sm font-medium capitalize text-white">
<span className="text-sm font-medium capitalize text-stone-950">
{factor.category}
</span>
<span
@@ -52,12 +52,12 @@ export function RatingExplainedView({ data }: { data: unknown }) {
{factor.intensity}
</span>
{factor.approximateTiming ? (
<span className="text-xs text-slate-500">
<span className="text-xs text-stone-500">
~{factor.approximateTiming}
</span>
) : null}
</div>
<p className="text-sm leading-relaxed text-slate-300">
<p className="text-sm leading-relaxed text-stone-700">
{factor.description}
</p>
</div>
components/cards/SensitivityGuide.tsx
+7 -7
View File
@@ -14,7 +14,7 @@ export function SensitivityGuideView({ data }: { data: unknown }) {
const result = sensitivityGuideSchema.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">
<div className="rounded-2xl border border-stone-200 bg-white p-6 text-sm text-stone-700">
Could not display this insight (data format issue). Try another card or refresh later.
</div>
);
@@ -22,8 +22,8 @@ export function SensitivityGuideView({ data }: { data: unknown }) {
const parsed = result.data as SensitivityGuide;
return (
<div className="space-y-5 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
<p className="text-slate-300">{parsed.summary}</p>
<div className="space-y-5 rounded-2xl border border-stone-200 bg-white p-6">
<p className="text-stone-700">{parsed.summary}</p>
<div className="space-y-3">
{parsed.themes.map((theme, index) => (
@@ -35,17 +35,17 @@ export function SensitivityGuideView({ data }: { data: unknown }) {
)}
>
<div className="mb-2 flex flex-wrap items-center gap-2">
<h4 className="font-medium text-white">{theme.theme}</h4>
<span className="text-xs capitalize text-slate-400">
<h4 className="font-medium text-stone-950">{theme.theme}</h4>
<span className="text-xs capitalize text-stone-600">
{theme.severity}
</span>
{theme.approximateTiming ? (
<span className="text-xs text-slate-500">
<span className="text-xs text-stone-500">
~{theme.approximateTiming}
</span>
) : null}
</div>
<p className="text-sm leading-relaxed text-slate-300">
<p className="text-sm leading-relaxed text-stone-700">
{theme.description}
</p>
</div>
components/cards/SkipGuide.tsx
+18 -18
View File
@@ -2,9 +2,9 @@ import { skipGuideSchema, type SkipGuide } from "@/lib/schemas";
import { cn } from "@/lib/utils";
const recommendationStyles = {
recommended: "bg-red-400/15 text-red-200 border-red-400/25",
optional: "bg-amber-400/15 text-amber-200 border-amber-400/25",
do_not_skip: "bg-slate-400/15 text-slate-200 border-slate-400/25",
recommended: "bg-red-100 text-red-700 border-red-200",
optional: "bg-amber-100 text-amber-700 border-amber-200",
do_not_skip: "bg-stone-200 text-stone-700 border-stone-300",
};
const recommendationLabels = {
@@ -23,7 +23,7 @@ export function SkipGuideView({ data }: { data: unknown }) {
const result = skipGuideSchema.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">
<div className="rounded-2xl border border-stone-200 bg-white p-6 text-sm text-stone-700">
Could not display this insight (data format issue). Try another card or refresh later.
</div>
);
@@ -35,7 +35,7 @@ export function SkipGuideView({ data }: { data: unknown }) {
);
return (
<div className="space-y-5 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
<div className="space-y-5 rounded-2xl border border-stone-200 bg-white p-6">
<div className="grid gap-4 sm:grid-cols-3">
<Stat label="Original rating" value={parsed.originalRating} />
<Stat
@@ -49,7 +49,7 @@ export function SkipGuideView({ data }: { data: unknown }) {
</div>
<div>
<p className="mb-2 text-sm text-slate-400">Content timeline</p>
<p className="mb-2 text-sm text-stone-600">Content timeline</p>
<div className="relative h-4 overflow-hidden rounded-full bg-emerald-400/20">
{parsed.segments.map((segment, index) => {
const start = parseTimestamp(segment.start);
@@ -63,7 +63,7 @@ export function SkipGuideView({ data }: { data: unknown }) {
className={cn(
"absolute top-0 h-full rounded-full",
segment.skipRecommendation === "do_not_skip"
? "bg-slate-500/70"
? "bg-stone-300"
: "bg-red-500/80",
)}
style={{ left: `${left}%`, width: `${width}%` }}
@@ -72,7 +72,7 @@ export function SkipGuideView({ data }: { data: unknown }) {
);
})}
</div>
<div className="mt-2 flex justify-between text-xs text-slate-500">
<div className="mt-2 flex justify-between text-xs text-stone-500">
<span>0:00</span>
<span>{Math.floor(maxMinutes / 60)}h {maxMinutes % 60}m</span>
</div>
@@ -82,10 +82,10 @@ export function SkipGuideView({ data }: { data: unknown }) {
{parsed.segments.map((segment, index) => (
<div
key={`${segment.start}-${segment.end}-${index}`}
className="rounded-xl border border-white/10 bg-slate-950/40 p-4"
className="rounded-xl border border-stone-200 bg-stone-100 p-4"
>
<div className="mb-2 flex flex-wrap items-center gap-2">
<span className="font-medium text-white">
<span className="font-medium text-stone-950">
{segment.start} – {segment.end}
</span>
<span
@@ -96,29 +96,29 @@ export function SkipGuideView({ data }: { data: unknown }) {
>
{recommendationLabels[segment.skipRecommendation]}
</span>
<span className="text-xs capitalize text-slate-500">
<span className="text-xs capitalize text-stone-500">
Plot impact: {segment.plotImpact.replace("_", " ")}
</span>
</div>
<p className="text-sm text-slate-300">{segment.reason}</p>
<p className="mt-2 text-sm text-slate-400">
<span className="text-slate-500">Resume hint:</span>{" "}
<p className="text-sm text-stone-700">{segment.reason}</p>
<p className="mt-2 text-sm text-stone-600">
<span className="text-stone-500">Resume hint:</span>{" "}
{segment.resumeHint}
</p>
</div>
))}
</div>
<p className="text-xs text-slate-500">{parsed.disclaimer}</p>
<p className="text-xs text-stone-500">{parsed.disclaimer}</p>
</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 className="rounded-xl border border-stone-200 bg-stone-100 p-4">
<p className="text-xs uppercase tracking-wide text-stone-500">{label}</p>
<p className="mt-1 text-lg font-medium text-stone-950">{value}</p>
</div>
);
}