feat: standardize cms data views

components/ui/dialog.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+type DialogProps = {
+  open: boolean;
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  onClose: () => void;
+  className?: string;
+};
+
+export function Dialog({
+  open,
+  title,
+  description,
+  children,
+  footer,
+  onClose,
+  className,
+}: DialogProps): React.ReactElement | null {
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/32 p-3 backdrop-blur-sm sm:items-center">
+      <section
+        aria-modal="true"
+        className={cn(
+          "flex max-h-[92svh] w-full max-w-3xl flex-col overflow-hidden rounded-lg border bg-card shadow-xl",
+          className,
+        )}
+        role="dialog"
+      >
+        <header className="flex shrink-0 items-start justify-between gap-4 border-b p-5">
+          <div className="min-w-0">
+            <h2 className="text-lg font-semibold">{title}</h2>
+            {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
+          </div>
+          <button
+            aria-label="关闭弹窗"
+            className="inline-flex size-10 shrink-0 items-center justify-center rounded-md border bg-background text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={onClose}
+            type="button"
+          >
+            <X className="size-4" aria-hidden="true" />
+          </button>
+        </header>
+        <div className="min-h-0 flex-1 overflow-y-auto p-5">{children}</div>
+        {footer ? <footer className="shrink-0 border-t bg-secondary/35 p-4">{footer}</footer> : null}
+      </section>
+    </div>
+  );
+}