feat: add colored top border to stats cards

This commit is contained in:
2026-05-07 12:21:08 +08:00
parent 032386a549
commit f926ab2701

View File

@@ -14,18 +14,21 @@ interface StatsCardProps {
} }
export function StatsCard({ title, value, description, icon: Icon, color, trend }: StatsCardProps) { export function StatsCard({ title, value, description, icon: Icon, color, trend }: StatsCardProps) {
const accentColor = `var(--mantine-color-${color ?? 'brand-blue'}-5)`
return ( return (
<Card <Card
withBorder withBorder
padding="lg" padding="lg"
radius="xl" radius="xl"
className="premium-card" className="premium-card"
styles={(theme) => ({ styles={{
root: { root: {
backgroundColor: 'var(--mantine-color-body)', backgroundColor: 'var(--mantine-color-body)',
borderColor: 'rgba(128,128,128,0.1)', borderColor: 'rgba(128,128,128,0.1)',
borderTop: `3px solid ${accentColor}`,
}, },
})} }}
> >
<Group justify="space-between" mb="xs"> <Group justify="space-between" mb="xs">
<ThemeIcon <ThemeIcon