Each page.tsx was >500 LOC (610/602/596). Extracted React components to _components/ and custom hook to _hooks/ per-route, reducing all three page.tsx orchestrators to 107/229/120 LOC respectively. Zero behavior changes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
31 lines
829 B
TypeScript
31 lines
829 B
TypeScript
import Link from 'next/link'
|
|
|
|
export function StatCard({
|
|
title,
|
|
value,
|
|
description,
|
|
href,
|
|
color,
|
|
}: {
|
|
title: string
|
|
value: number
|
|
description: string
|
|
href: string
|
|
color: 'blue' | 'purple' | 'green' | 'red'
|
|
}) {
|
|
const colors = {
|
|
blue: 'bg-blue-50 dark:bg-blue-900/20',
|
|
purple: 'bg-purple-50 dark:bg-purple-900/20',
|
|
green: 'bg-green-50 dark:bg-green-900/20',
|
|
red: 'bg-red-50 dark:bg-red-900/20',
|
|
}
|
|
|
|
return (
|
|
<Link href={href} className={`${colors[color]} rounded-lg p-6 hover:opacity-80 transition-opacity`}>
|
|
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">{title}</p>
|
|
<p className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">{value}</p>
|
|
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{description}</p>
|
|
</Link>
|
|
)
|
|
}
|