continue re-design

components/shared/ui/app-dialog.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import CurvyRect from "@/components/shared/layout/curvy-rect";
+import { cn } from "@/utils/cn";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogContent as ShadDialogContent,
+} from "@/components/ui/shadcn/dialog";
+
+type AppDialogContentProps = React.ComponentPropsWithoutRef<
+  typeof ShadDialogContent
+> & {
+  withCurvyRect?: boolean;
+  bodyClassName?: string;
+};
+
+export function AppDialogContent({
+  className,
+  children,
+  withCurvyRect = true,
+  bodyClassName,
+  ...props
+}: AppDialogContentProps) {
+  return (
+    <ShadDialogContent
+      className={cn(
+        "sm:rounded-16 p-0 border border-border-faint bg-white relative overflow-hidden",
+        className,
+      )}
+      {...props}
+    >
+      {withCurvyRect && (
+        <CurvyRect className="absolute inset-0 pointer-events-none" allSides />
+      )}
+      <motion.div
+        initial={{ opacity: 0, scale: 0.985, y: 24 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        transition={{ type: "spring", stiffness: 300, damping: 24, mass: 0.9 }}
+        className={cn("relative p-16 pb-12", bodyClassName)}
+      >
+        {children}
+      </motion.div>
+    </ShadDialogContent>
+  );
+}
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};