59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
import type { ReactNode } from "react";
|
|
// Import Mantine components directly
|
|
import { Group, Text, ThemeIcon, Badge } from "@mantine/core";
|
|
// Import custom Card and its sub-components
|
|
import { Card } from "./ui/card";
|
|
|
|
interface DashboardCardProps {
|
|
title: string;
|
|
value: string | number;
|
|
subtitle?: string;
|
|
change?: string;
|
|
icon: ReactNode;
|
|
badge?: string;
|
|
}
|
|
|
|
export function DashboardCard({
|
|
title,
|
|
value,
|
|
subtitle,
|
|
change,
|
|
icon,
|
|
badge,
|
|
}: DashboardCardProps) {
|
|
return (
|
|
<Card className="p-6 bg-gray-50 border-none relative">
|
|
<Group justify="space-between" align="flex-start" w="100%">
|
|
<div style={{ flex: 1 }}>
|
|
<Text size="sm" c="dimmed" mb="xs">
|
|
{title}
|
|
</Text>
|
|
<Group align="baseline" gap="xs">
|
|
<Text size="xl" fw={700}>
|
|
{value}
|
|
</Text>
|
|
{badge && (
|
|
<Badge variant="light" radius="xl" size="lg" color="gray">
|
|
{badge}
|
|
</Badge>
|
|
)}
|
|
</Group>
|
|
{subtitle && (
|
|
<Text size="sm" c="dimmed" mt="xs">
|
|
{subtitle}
|
|
</Text>
|
|
)}
|
|
{change && (
|
|
<Text size="sm" c="red" mt="xs">
|
|
↗ {change}
|
|
</Text>
|
|
)}
|
|
</div>
|
|
<ThemeIcon variant="filled" size="xl" radius="xl" color="dark">
|
|
{icon}
|
|
</ThemeIcon>
|
|
</Group>
|
|
</Card>
|
|
);
|
|
}
|