mirror of
https://github.com/jakejarvis/sofa.git
synced 2026-08-29 06:15:39 -04:00
jakeandClaude Opus 4.6
fa01a0d4a0
- Stats grid: sm:grid-cols-4 → lg:grid-cols-4 to match actual breakpoint - Continue watching cards: border → ring-1 to match actual card styling - Continue watching section: add carousel-like margins (-mx-4/px-4) - Title detail: full-viewport backdrop, responsive poster (120px/220px), metadata row + star rating instead of two generic buttons - Explore hero: full-viewport width matching HeroBanner component - Explore rows: add icon placeholders, carousel-like margins, genre chip overflow - Settings: icon+label section headings, 3 integration cards instead of 2 - Dashboard: add icon placeholders to section headings, fix mt-2 → mt-1 - Extract shared SectionHeading helper for icon+text skeleton pattern Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
function SectionSkeleton({
|
|
headingWidth,
|
|
children,
|
|
}: {
|
|
headingWidth: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div>
|
|
<div className="mb-3 flex items-center gap-2">
|
|
<Skeleton className="size-4 rounded" />
|
|
<Skeleton className={`h-3.5 ${headingWidth}`} />
|
|
</div>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function SettingsLoading() {
|
|
return (
|
|
<div className="mx-auto max-w-2xl space-y-8">
|
|
{/* Header */}
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<Skeleton className="size-5 rounded" />
|
|
<Skeleton className="h-9 w-40" />
|
|
</div>
|
|
<Skeleton className="mt-1 h-4 w-64" />
|
|
</div>
|
|
|
|
{/* Account card */}
|
|
<SectionSkeleton headingWidth="w-16">
|
|
<Skeleton className="h-[76px] w-full rounded-xl" />
|
|
</SectionSkeleton>
|
|
|
|
{/* Integrations cards */}
|
|
<SectionSkeleton headingWidth="w-24">
|
|
<div className="space-y-3">
|
|
<Skeleton className="h-16 w-full rounded-xl" />
|
|
<Skeleton className="h-16 w-full rounded-xl" />
|
|
<Skeleton className="h-16 w-full rounded-xl" />
|
|
</div>
|
|
</SectionSkeleton>
|
|
</div>
|
|
);
|
|
}
|