Extract types, constants, helpers, and UI pieces (LoadingSkeleton, EmptyState, StatCard, ComplianceRing, Modal, TenantCard, CreateTenantModal, EditTenantModal, TenantDetailModal) into _components/ and _types.ts to bring page.tsx from 1663 LOC to 432 LOC (under the 500 hard cap). Behavior preserved. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
export function LoadingSkeleton() {
|
|
return (
|
|
<div className="space-y-8 animate-pulse">
|
|
{/* Header Skeleton */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="h-8 w-80 bg-slate-200 rounded mb-2" />
|
|
<div className="h-4 w-56 bg-slate-200 rounded" />
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<div className="h-10 w-10 bg-slate-200 rounded-lg" />
|
|
<div className="h-10 w-52 bg-slate-200 rounded-lg" />
|
|
</div>
|
|
</div>
|
|
{/* Stats Skeleton */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<div key={i} className="bg-white rounded-xl border border-slate-200 p-5">
|
|
<div className="h-4 w-28 bg-slate-200 rounded mb-3" />
|
|
<div className="h-8 w-16 bg-slate-200 rounded" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* Cards Skeleton */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<div key={i} className="bg-white rounded-xl border border-slate-200 p-5">
|
|
<div className="h-5 w-40 bg-slate-200 rounded mb-3" />
|
|
<div className="h-4 w-28 bg-slate-200 rounded mb-4" />
|
|
<div className="h-16 w-16 bg-slate-200 rounded-full mx-auto mb-4" />
|
|
<div className="space-y-2">
|
|
<div className="h-3 w-full bg-slate-200 rounded" />
|
|
<div className="h-3 w-3/4 bg-slate-200 rounded" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|