🎨 style: establish console design system

2026-09-13 10:49:21 +00:00 · 2026-08-13 02:19:26 +07:00
parent 5e88c660dc
commit 3a09f0b571
26 changed files with 840 additions and 269 deletions
@@ -0,0 +1,77 @@
+import type * as React from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/cn";
+
+type SectionCardProps = React.ComponentProps<typeof Card> & {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+  headerAction?: React.ReactNode;
+  contentClassName?: string;
+};
+
+export function SectionCard({
+  title,
+  description,
+  icon,
+  headerAction,
+  children,
+  className,
+  contentClassName,
+  ...props
+}: SectionCardProps) {
+  return (
+    <Card className={className} {...props}>
+      <CardHeader className="border-b">
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex items-center gap-2">
+            {icon}
+            <CardTitle>{title}</CardTitle>
+          </div>
+          {headerAction}
+        </div>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent className={contentClassName}>{children}</CardContent>
+    </Card>
+  );
+}
+
+type ResourceSectionProps = SectionCardProps & {
+  count: number;
+  emptyIcon: React.ReactNode;
+  emptyTitle: string;
+  emptyDescription: string;
+};
+
+export function ResourceSection({
+  count,
+  emptyIcon,
+  emptyTitle,
+  emptyDescription,
+  children,
+  ...props
+}: ResourceSectionProps) {
+  return (
+    <SectionCard
+      {...props}
+      headerAction={
+        <span className="font-mono text-xs font-bold">{String(count).padStart(2, "0")}</span>
+      }
+    >
+      {count === 0 ? (
+        <div className="flex h-36 flex-col items-center justify-center border border-dashed bg-muted/30 text-center">
+          <div className="mb-3 text-muted-foreground">{emptyIcon}</div>
+          <p className="font-bold uppercase">{emptyTitle}</p>
+          <p className="mt-1 text-xs text-muted-foreground">{emptyDescription}</p>
+        </div>
+      ) : (
+        children
+      )}
+    </SectionCard>
+  );
+}
+
+export function TableActions({ className, ...props }: React.ComponentProps<"div">) {
+  return <div className={cn("flex items-center justify-end gap-2", className)} {...props} />;
+}