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/InfoCard.tsx
+5 -5
View File
@@ -17,19 +17,19 @@ export function InfoCard({ meta, selected, onClick }: InfoCardProps) {
className={cn(
"group rounded-2xl border p-5 text-left transition",
selected
? "border-amber-400/40 bg-amber-400/10 shadow-lg shadow-amber-500/10"
: "border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.06]",
? "border-amber-400 bg-amber-50 shadow-sm"
: "border-stone-200 bg-white hover:border-stone-300 hover:bg-stone-50",
)}
>
<div className="mb-2 flex items-center gap-2">
<h3 className="font-medium text-white">{meta.title}</h3>
<h3 className="font-medium text-stone-950">{meta.title}</h3>
{meta.badge ? (
<span className="rounded-full bg-emerald-400/15 px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide text-emerald-300">
<span className="rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide text-emerald-700">
{meta.badge}
</span>
) : null}
</div>
<p className="text-sm text-slate-400">{meta.subtitle}</p>
<p className="text-sm text-stone-600">{meta.subtitle}</p>
</button>
);
}
components/MovieHeader.tsx
+11 -20
View File
@@ -5,10 +5,10 @@ import { getPosterUrl, getUsCertification, type TmdbMovieDetails } from "@/lib/t
export function MovieHeader({
movie,
onClear,
showBack = true,
}: {
movie: TmdbMovieDetails;
onClear?: () => void;
showBack?: boolean;
}) {
const poster = getPosterUrl(movie.poster_path, "w500");
const year = movie.release_date?.slice(0, 4);
@@ -16,19 +16,10 @@ export function MovieHeader({
return (
<div className="space-y-6">
{onClear ? (
<button
type="button"
onClick={onClear}
className="inline-flex w-fit items-center gap-2 text-sm text-slate-400 transition hover:text-amber-200"
>
<ArrowLeft className="h-4 w-4" />
Search another movie
</button>
) : (
{showBack && (
<Link
href="/"
className="inline-flex w-fit items-center gap-2 text-sm text-slate-400 transition hover:text-amber-200"
className="inline-flex w-fit items-center gap-2 text-sm text-stone-500 transition hover:text-amber-700"
>
<ArrowLeft className="h-4 w-4" />
Back to search
@@ -36,7 +27,7 @@ export function MovieHeader({
)}
<div className="flex flex-col gap-6 sm:flex-row sm:items-end">
<div className="relative mx-auto h-56 w-36 shrink-0 overflow-hidden rounded-2xl border border-white/10 bg-slate-900 shadow-2xl sm:mx-0">
<div className="relative mx-auto h-56 w-36 shrink-0 overflow-hidden rounded-2xl border border-stone-200 bg-stone-100 shadow-sm sm:mx-0">
{poster ? (
<Image
src={poster}
@@ -47,7 +38,7 @@ export function MovieHeader({
priority
/>
) : (
<div className="flex h-full items-center justify-center text-sm text-slate-500">
<div className="flex h-full items-center justify-center text-sm text-stone-500">
No poster
</div>
)}
@@ -55,10 +46,10 @@ export function MovieHeader({
<div className="space-y-3 text-center sm:text-left">
<div>
<h1 className="text-3xl font-semibold tracking-tight text-white md:text-4xl">
<h1 className="text-3xl font-semibold tracking-tight text-stone-950 md:text-4xl">
{movie.title}
</h1>
<p className="mt-1 text-slate-400">
<p className="mt-1 text-stone-600">
{[year, movie.runtime ? `${movie.runtime} min` : null]
.filter(Boolean)
.join(" · ")}
@@ -67,14 +58,14 @@ export function MovieHeader({
<div className="flex flex-wrap justify-center gap-2 sm:justify-start">
{certification ? (
<span className="rounded-full border border-amber-400/30 bg-amber-400/10 px-3 py-1 text-sm font-medium text-amber-200">
<span className="rounded-full border border-amber-300 bg-amber-100 px-3 py-1 text-sm font-medium text-amber-700">
{certification}
</span>
) : null}
{movie.genres.map((genre) => (
<span
key={genre.id}
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"
>
{genre.name}
</span>
@@ -82,7 +73,7 @@ export function MovieHeader({
</div>
{movie.overview ? (
<p className="max-w-3xl text-sm leading-relaxed text-slate-400 md:text-base">
<p className="max-w-3xl text-sm leading-relaxed text-stone-600 md:text-base">
{movie.overview}
</p>
) : null}
components/SearchBar.tsx
+12 -12
View File
@@ -74,7 +74,7 @@ export function SearchBar({
<div className="relative">
<Search
className={cn(
"pointer-events-none absolute top-1/2 -translate-y-1/2 text-amber-200/50",
"pointer-events-none absolute top-1/2 -translate-y-1/2 text-stone-400",
compact ? "left-3 h-4 w-4" : "left-4 h-5 w-5",
)}
/>
@@ -102,7 +102,7 @@ export function SearchBar({
onFocus={() => query.trim() && setOpen(true)}
placeholder="Search for a movie..."
className={cn(
"w-full border border-white/10 bg-white/5 text-white outline-none transition focus:border-amber-400/40 focus:bg-white/[0.07] focus:ring-2 focus:ring-amber-400/20",
"w-full border border-stone-300 bg-white text-stone-950 outline-none transition focus:border-amber-500 focus:bg-amber-50 focus:ring-2 focus:ring-amber-200",
compact
? "rounded-xl py-2 pl-9 pr-3 text-sm"
: "rounded-2xl py-4 pl-12 pr-4 text-base",
@@ -113,13 +113,13 @@ export function SearchBar({
{open && (
<ul
role="listbox"
className="absolute z-50 mt-2 w-full overflow-hidden rounded-2xl border border-white/10 bg-slate-950 shadow-2xl"
className="absolute z-50 mt-2 w-full overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-xl"
>
{loading && (
<li className="px-4 py-3 text-sm text-slate-400">Searching...</li>
<li className="px-4 py-3 text-sm text-stone-600">Searching...</li>
)}
{!loading && results.length === 0 && (
<li className="px-4 py-3 text-sm text-slate-400">No results found</li>
<li className="px-4 py-3 text-sm text-stone-600">No results found</li>
)}
{!loading &&
results.map((result) => {
@@ -128,7 +128,7 @@ export function SearchBar({
const inner = (
<>
<div className="relative h-14 w-10 shrink-0 overflow-hidden rounded-md bg-slate-800">
<div className="relative h-14 w-10 shrink-0 overflow-hidden rounded-md bg-stone-200">
{poster ? (
<img
src={poster}
@@ -136,21 +136,21 @@ export function SearchBar({
className="absolute inset-0 h-full w-full object-cover"
/>
) : (
<div className="flex h-full items-center justify-center text-[10px] text-slate-500">
<div className="flex h-full items-center justify-center text-[10px] text-stone-500">
N/A
</div>
)}
</div>
<div className="min-w-0">
<p className="truncate font-medium text-white">
<p className="truncate font-medium text-stone-950">
{result.title}
{year ? (
<span className="ml-2 font-normal text-slate-400">
<span className="ml-2 font-normal text-stone-500">
({year})
</span>
) : null}
</p>
<p className="line-clamp-1 text-sm text-slate-400">
<p className="line-clamp-1 text-sm text-stone-600">
{result.overview || "No overview available"}
</p>
</div>
@@ -167,7 +167,7 @@ export function SearchBar({
setOpen(false);
setQuery("");
}}
className="flex w-full items-center gap-3 border-b border-white/5 px-4 py-3 text-left transition hover:bg-white/5 last:border-b-0"
className="flex w-full items-center gap-3 border-b border-stone-100 px-4 py-3 text-left transition hover:bg-stone-50 last:border-b-0"
>
{inner}
</button>
@@ -176,7 +176,7 @@ export function SearchBar({
href={`/movie/${result.id}`}
prefetch
onClick={() => setOpen(false)}
className="flex items-center gap-3 border-b border-white/5 px-4 py-3 transition hover:bg-white/5 last:border-b-0"
className="flex items-center gap-3 border-b border-stone-100 px-4 py-3 transition hover:bg-stone-50 last:border-b-0"
>
{inner}
</Link>
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>
);
}