Add StatCard component

src/components/stat-card/StatCard.tsx

@@ -0,0 +1,53 @@
+import { splitProps, type JSX } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import Card from "../card/Card";
+import StatCardSection from "./StatCardSection";
+import Flex from "../flex/Flex";
+
+export type StatCardProps = JSX.HTMLAttributes<HTMLDivElement> & {
+  dataTheme?: string;
+};
+
+const StatCard = (props: StatCardProps) => {
+  const [local, rest] = splitProps(props, [
+    "class",
+    "children",
+    "dataTheme",
+    "style",
+  ]);
+
+  const normalizedStyle =
+    typeof local.style === "object" || typeof local.style === "undefined"
+      ? local.style
+      : undefined;
+
+  return (
+    <Card
+      {...rest}
+      style={normalizedStyle}
+      class={twMerge(
+        "border border-base-300 bg-base-100 rounded-lg p-6",
+        local.class
+      )}
+      data-theme={local.dataTheme}
+    >
+      <Flex align="center" gap="md">
+        {local.children}
+      </Flex>
+    </Card>
+  );
+};
+
+const StatCardFigure = StatCardSection("figure");
+const StatCardTitle = StatCardSection("title");
+const StatCardValue = StatCardSection("value");
+const StatCardDesc = StatCardSection("desc");
+const StatCardActions = StatCardSection("actions");
+
+export default Object.assign(StatCard, {
+  Figure: StatCardFigure,
+  Title: StatCardTitle,
+  Value: StatCardValue,
+  Desc: StatCardDesc,
+  Actions: StatCardActions,
+});

src/components/stat-card/StatCardSection.tsx

@@ -0,0 +1,48 @@
+import { splitProps, type JSX } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import CopyButton from "../copy-button/CopyButton";
+
+export const StatCardSection = (section: string) => {
+  return (
+    props: JSX.HTMLAttributes<HTMLDivElement> & { copyable?: boolean }
+  ) => {
+    const [local, rest] = splitProps(props, ["class", "children", "copyable"]);
+
+    let content = local.children;
+
+    if (section === "figure") {
+      content = (
+        <div class="p-3 bg-primary/10 rounded-lg">
+          <div class="flex items-center justify-center w-6 h-6 text-primary">
+            {local.children}
+          </div>
+        </div>
+      );
+    }
+
+    if (section === "value" && local.copyable) {
+      content = (
+        <CopyButton text={String(local.children)}>{local.children}</CopyButton>
+      );
+    }
+
+    const classes =
+      section === "title"
+        ? "text-sm text-base-content/60"
+        : section === "value"
+        ? "text-2xl font-bold text-base-content"
+        : section === "desc"
+        ? "text-sm text-base-content/50"
+        : section === "actions"
+        ? "flex items-center gap-2"
+        : "";
+
+    return (
+      <div {...rest} class={twMerge(classes, local.class)}>
+        {content}
+      </div>
+    );
+  };
+};
+
+export default StatCardSection;

src/components/stat-card/index.ts

@@ -0,0 +1 @@
+export { default } from "./StatCard";

src/index.ts

@@ -92,6 +92,7 @@ export {
 } from "./components/sidenav";
 export { default as Skeleton } from "./components/skeleton";
 export { default as Stack } from "./components/stack";
+export { default as StatCard } from "./components/stat-card";
 export { default as Stats } from "./components/stats";
 export { Status } from "./components/status";
 export type { StatusProps } from "./components/status";