Heatmap

1import Heatmap, {
2  type HeatmapData
3} from "@/registry/8starlabs-ui/blocks/heatmap";
4 
5const data: HeatmapData = [
6  { date: "2025-12-01", value: 2 },
7  { date: "2025-12-02", value: 0 },
8  { date: "2025-12-03", value: 5 },
9  { date: "2025-12-04", value: 1 },
10  { date: "2025-12-05", value: 3 },
11  { date: "2025-12-06", value: 4 },
12  { date: "2025-12-07", value: 2 },
13  { date: "2025-12-08", value: 0 },
14  { date: "2025-12-09", value: 3 },
15  { date: "2025-12-10", value: 6 },
16  { date: "2025-12-11", value: 2 },
17  { date: "2025-12-12", value: 1 },
18  { date: "2025-12-13", value: 4 },
19  { date: "2025-12-14", value: 0 },
20  { date: "2025-12-15", value: 2 },
21  { date: "2025-12-16", value: 5 },
22  { date: "2025-12-17", value: 3 },
23  { date: "2025-12-18", value: 4 },
24  { date: "2025-12-19", value: 0 },
25  { date: "2025-12-20", value: 1 },
26  { date: "2025-12-21", value: 2 },
27  { date: "2025-12-22", value: 3 },
28  { date: "2025-12-23", value: 0 },
29  { date: "2025-12-24", value: 2 },
30  { date: "2025-12-25", value: 5 },
31  { date: "2025-12-26", value: 1 },
32  { date: "2025-12-27", value: 0 },
33  { date: "2025-12-28", value: 3 },
34  { date: "2025-12-29", value: 4 },
35  { date: "2025-12-30", value: 2 },
36  { date: "2025-12-31", value: 1 }
37];
38 
39export default function HeatmapSizeDemo() {
40  return (
41    <div className="space-y-8">
42      <div className="flex flex-col items-center">
43        <p className="font-semibold text-sm text-muted-foreground mb-2">
44          Small (cellSize: 12, gap: 2)
45        </p>
46        <Heatmap
47          data={data}
48          startDate={new Date("2025-12-01")}
49          endDate={new Date("2025-12-31")}
50          colorMode="discrete"
51          cellSize={12}
52          gap={2}
53        />
54      </div>
55 
56      <div className="flex flex-col items-center">
57        <p className="font-semibold text-sm text-muted-foreground mb-2">
58          Medium (cellSize: 20, gap: 4) - Default
59        </p>
60        <Heatmap
61          data={data}
62          startDate={new Date("2025-12-01")}
63          endDate={new Date("2025-12-31")}
64          colorMode="discrete"
65          cellSize={20}
66          gap={4}
67        />
68      </div>
69 
70      <div className="flex flex-col items-center">
71        <p className="font-semibold text-sm text-muted-foreground mb-2">
72          Large (cellSize: 28, gap: 6)
73        </p>
74        <Heatmap
75          data={data}
76          startDate={new Date("2025-12-01")}
77          endDate={new Date("2025-12-31")}
78          colorMode="discrete"
79          cellSize={28}
80// … truncated