Developers Digest
68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
"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,
|
|
};
|