mirror of
https://github.com/jakejarvis/sofa.git
synced 2026-08-29 01:35:39 -04:00
jakeandClaude Opus 4.6
fc982bee1b
- Add global MotionConfig reducedMotion="user" in root layout
- Add color-scheme: dark, theme-color meta, skip-to-main-content link
- Add aria-hidden={true} to ~60+ decorative icons across 33 files
- Add aria-label to all icon-only buttons (logout, star rating, play, delete, etc.)
- Replace transition-all with specific properties (11 files)
- Add motion-safe: prefix for CSS hover transforms and animate-pulse
- Add prefers-reduced-motion: reduce override in globals.css
- Add useReducedMotion guard to status-dot pulsing animation
- Fix focus-visible styles on auth form inputs (focus → focus-visible, stronger ring)
- Add text-balance to all headings (13 files)
- Replace "..." with "…" (U+2026) in all loading/placeholder text
- Add autocomplete, spellCheck, role="alert" to auth form
- Add aria-label to Switch controls and filmography select
- Fix heading hierarchy (h3 → h2 where h2 was skipped)
- Add break-words to title overview, overscroll-contain to drawer
- Add confirmation dialog for destructive library removal
- Add group-focus-within:opacity-100 for keyboard-accessible backup actions
- Add role="radio" + aria-checked to star rating buttons
- Add aria-label to carousel region, role="img" to TMDB logo SVG
- Add text-foreground to native select for dark mode consistency
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { IconPlus, IconStar } from "@tabler/icons-react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
interface HeroBannerProps {
|
|
tmdbId: number;
|
|
type: "movie" | "tv";
|
|
title: string;
|
|
overview: string;
|
|
backdropPath: string | null;
|
|
voteAverage: number;
|
|
}
|
|
|
|
export function HeroBanner({
|
|
tmdbId,
|
|
type,
|
|
title,
|
|
overview,
|
|
backdropPath,
|
|
voteAverage,
|
|
}: HeroBannerProps) {
|
|
const href = `/titles/tmdb-${tmdbId}-${type}`;
|
|
|
|
return (
|
|
<div className="animate-stagger-item relative -mt-6 mb-4 ml-[calc(-50vw+50%)] mr-[calc(-50vw+50%)] overflow-hidden">
|
|
<div className="relative w-full min-h-[280px] max-h-[420px] aspect-[21/9]">
|
|
{backdropPath ? (
|
|
<Image
|
|
src={backdropPath}
|
|
alt={title}
|
|
fill
|
|
priority
|
|
className="object-cover"
|
|
/>
|
|
) : (
|
|
<div className="h-full w-full bg-gradient-to-br from-card via-secondary to-muted" />
|
|
)}
|
|
|
|
{/* Gradient overlays */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/60 to-transparent" />
|
|
<div className="absolute inset-0 bg-gradient-to-r from-background/80 via-transparent to-transparent" />
|
|
|
|
{/* Content */}
|
|
<div className="absolute inset-0 flex items-end">
|
|
<div className="w-full px-4 pb-8 sm:px-6">
|
|
<div className="mx-auto max-w-6xl">
|
|
<div
|
|
className="animate-stagger-item"
|
|
style={{ "--stagger-index": 3 } as React.CSSProperties}
|
|
>
|
|
<div className="mb-3 flex items-center gap-2">
|
|
<span className="rounded bg-primary/20 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-primary">
|
|
{type}
|
|
</span>
|
|
{voteAverage > 0 && (
|
|
<span className="flex items-center gap-1 text-sm text-primary">
|
|
<IconStar
|
|
aria-hidden={true}
|
|
className="size-3.5 fill-primary"
|
|
/>
|
|
{voteAverage.toFixed(1)}
|
|
</span>
|
|
)}
|
|
<span className="text-xs text-muted-foreground">
|
|
Trending today
|
|
</span>
|
|
</div>
|
|
<Link href={href} className="group/title">
|
|
<h2 className="font-display text-3xl tracking-tight text-balance sm:text-4xl transition-colors group-hover/title:text-primary">
|
|
{title}
|
|
</h2>
|
|
</Link>
|
|
<p className="mt-2 line-clamp-2 max-w-2xl text-sm text-muted-foreground">
|
|
{overview}
|
|
</p>
|
|
<Link
|
|
href={href}
|
|
className="mt-4 inline-flex h-9 items-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-shadow hover:shadow-md hover:shadow-primary/20"
|
|
>
|
|
<IconPlus aria-hidden={true} className="size-4" />
|
|
Add to Library
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|