Smart Dashboard Block

1import { ArrowUpRight, MoreHorizontal } from "lucide-react";
2 
3import { Badge } from "@/components/ui/atoms/badge";
4import { Button } from "@/components/ui/atoms/button";
5import {
6  Card,
7  CardContent,
8  CardDescription,
9  CardHeader,
10  CardTitle,
11} from "@/components/ui/atoms/card";
12import {
13  dashboardActivity,
14  dashboardChart,
15  dashboardStats,
16} from "@/components/ui/blocks/phase8/dashboard-data";
17 
18export interface SmartDashboardBlockProps {
19  stats?: typeof dashboardStats;
20  activity?: typeof dashboardActivity;
21  chart?: number[];
22}
23 
24function SmartDashboardBlock({
25  stats = dashboardStats,
26  activity = dashboardActivity,
27  chart = dashboardChart,
28}: SmartDashboardBlockProps) {
29  return (
30    <section data-slot="smart-dashboard-block" className="@container/dashboard min-w-0 space-y-4">
31      <header className="flex flex-col gap-3 @sm/dashboard:flex-row @sm/dashboard:items-end @sm/dashboard:justify-between">
32        <div>
33          <Badge variant="glass">Live workspace</Badge>
34          <h2 className="mt-2 text-xl font-semibold">Performance overview</h2>
35          <p className="text-sm text-muted-foreground">A compact view of product health.</p>
36        </div>
37        <Button variant="outline" size="sm">
38          View report <ArrowUpRight className="size-4" />
39        </Button>
40      </header>
41      <div className="grid grid-cols-1 gap-3 @sm/dashboard:grid-cols-2 @xl/dashboard:grid-cols-4">
42        {stats.map(({ label, value, change, icon: Icon }) => (
43          <Card key={label} variant="glass">
44            <CardHeader className="p-4">
45              <div>
46                <CardDescription>{label}</CardDescription>
47                <CardTitle className="mt-1 text-xl">{value}</CardTitle>
48              </div>
49              <span className="flex size-8 items-center justify-center rounded-md bg-primary-muted text-primary">
50                <Icon className="size-4" />
51              </span>
52            </CardHeader>
53            <CardContent className="px-4 pb-4">
54              <Badge variant="success" size="sm">
55                {change}
56              </Badge>
57            </CardContent>
58          </Card>
59        ))}
60      </div>
61      <div className="grid gap-4 @lg/dashboard:grid-cols-[minmax(0,1.6fr)_minmax(15rem,1fr)]">
62        <Card variant="default">
63          <CardHeader>
64            <div>
65              <CardTitle>Usage trend</CardTitle>
66              <CardDescription>Last 12 reporting periods</CardDescription>
67            </div>
68// … truncated