Dashboard widget

1import { Card } from "@/components/ui/card";
2import { cn } from "@/lib/utils";
3import type * as React from "react";
4 
5export type DashboardWidgetType = "gray-bg-large" | "white-bg-large";
6 
7function DashboardWidget({
8  type = "white-bg-large",
9  className,
10  children,
11}: {
12  type?: DashboardWidgetType;
13  className?: string;
14  children?: React.ReactNode;
15}) {
16  const isGrayBg = type === "gray-bg-large";
17 
18  return (
19    <Card
20      style={isGrayBg ? "filled" : "flat"}
21      padding="md"
22      data-slot="dashboard-widget"
23      className={cn(
24        "overflow-hidden w-full min-w-[420px]",
25        isGrayBg && "bg-neutral-50",
26        className,
27      )}
28    >
29      <div className="flex flex-col flex-1">{children}</div>
30    </Card>
31  );
32}
33 
34function DashboardWidgetHeader({
35  className,
36  ...props
37}: React.ComponentProps<"div">) {
38  return (
39    <div
40      data-slot="dashboard-widget-header"
41      className={cn(
42        "grid auto-rows-min items-center gap-x-4 has-data-[slot=dashboard-widget-action]:grid-cols-[1fr_auto] has-data-[slot=dashboard-widget-description]:items-start has-data-[slot=dashboard-widget-description]:gap-y-1.5",
43        className,
44      )}
45      {...props}
46    />
47  );
48}
49 
50function DashboardWidgetTitle({
51  className,
52  ...props
53}: React.ComponentProps<"div">) {
54  return (
55    <div
56      data-slot="dashboard-widget-title"
57      className={cn(
58        "flex items-center gap-2 font-semibold text-base leading-none min-w-0",
59        className,
60      )}
61      {...props}
62    />
63  );
64}
65 
66function DashboardWidgetDescription({
67  className,
68  ...props
69}: React.ComponentProps<"div">) {
70  return (
71    <div
72      data-slot="dashboard-widget-description"
73      className={cn("text-sm text-subtle-text col-start-1", className)}
74      {...props}
75    />
76  );
77}
78 
79function DashboardWidgetAction({
80  className,
81  ...props
82}: React.ComponentProps<"div">) {
83  return (
84    <div
85      data-slot="dashboard-widget-action"
86      className={cn("col-start-2 row-start-1", className)}
87      {...props}
88    />
89  );
90}
91 
92function DashboardWidgetToolbar({
93  className,
94  ...props
95}: React.ComponentProps<"div">) {
96  return (
97    <div
98      data-slot="dashboard-widget-toolbar"
99      className={cn("flex justify-end mt-4", className)}
100      {...props}
101    />
102  );
103}
104 
105function DashboardWidgetContent({
106  className,
107  ...props
108}: React.ComponentProps<"div">) {
109  return (
110    <div
111      data-slot="dashboard-widget-content"
112      className={cn(
113// … truncated