feat: add colored top border to stats cards
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user