feat: mock up dashboard page

packages/reservation-platform/src/components/DashboardCard.tsx

@@ -0,0 +1,28 @@
+import { icons } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface DashboardCardProps {
+  title: string;
+  icon: keyof typeof icons;
+  data: string;
+  trend: string;
+}
+
+export default function DashboardCard(props: DashboardCardProps) {
+  const { title, icon, data, trend } = props;
+
+  const LucideIcon = icons[icon];
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="flex flex-row items-center justify-between gap-8 space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">{title}</CardTitle>
+        <LucideIcon className="h-4 w-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{data}</div>
+        <p className="text-xs text-muted-foreground">{trend}</p>
+      </CardContent>
+    </Card>
+  );
+}