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/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>
);
}