Frankie
034f12d0aa
- Lazy-load Recharts via SparklineChart component with React.lazy + Suspense - Gate mock auth fallback behind VITE_MOCK_AUTH env var in Login and Register - Add ProtectedRoute component to guard authenticated routes - Fix touch target size on New Alert button (min-h-10 -> min-h-12) - Replace invalid safe-area-pb class with pb-[env(safe-area-inset-bottom)] - Fix theme toggle button touch targets (min-h-10 -> min-h-12) Co-Authored-By: Paperclip <noreply@paperclip.ing>
34 lines
881 B
TypeScript
34 lines
881 B
TypeScript
import { LineChart, Line, ResponsiveContainer } from 'recharts'
|
|
|
|
export function SparklineCard({
|
|
label,
|
|
data,
|
|
current,
|
|
}: {
|
|
label: string
|
|
data: { date: string; price: number }[]
|
|
current: string
|
|
}) {
|
|
return (
|
|
<div className="flex items-center gap-4 rounded-xl bg-white p-4 shadow-sm">
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-medium text-gray-900">{label}</p>
|
|
<p className="text-lg font-bold text-gray-900">{current}</p>
|
|
</div>
|
|
<div className="h-10 w-24">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={data}>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="price"
|
|
stroke="#1e40af"
|
|
strokeWidth={2}
|
|
dot={false}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|