Responsive modal

1"use client";
2 
3import * as DialogPrimitive from "@radix-ui/react-dialog";
4import { cva, type VariantProps } from "class-variance-authority";
5import { X } from "lucide-react";
6import type { HTMLAttributes } from "react";
7import { cn } from "@/lib/utils";
8 
9const Modal = DialogPrimitive.Root;
10const ModalTrigger = DialogPrimitive.Trigger;
11const ModalClose = DialogPrimitive.Close;
12const ModalPortal = DialogPrimitive.Portal;
13 
14const ModalOverlay = (props: DialogPrimitive.DialogOverlayProps) => {
15	return (
16		<DialogPrimitive.Overlay
17			{...props}
18			className={cn(
19				"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm",
20				"data-[state=open]:animate-in data-[state=closed]:animate-out",
21				"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
22				props.className,
23			)}
24		/>
25	);
26};
27 
28const ModalVariants = cva(
29	cn(
30		"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out",
31		"data-[state=open]:animate-in data-[state=closed]:animate-out",
32		"data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-y-auto",
33		"lg:left-[50%] lg:top-[50%] lg:w-full lg:max-w-lg lg:translate-x-[-50%] lg:translate-y-[-50%]",
34		"lg:border lg:duration-200 lg:data-[state=open]:animate-in lg:data-[state=closed]:animate-out",
35		"lg:data-[state=closed]:fade-out-0 lg:data-[state=open]:fade-in-0",
36		"lg:data-[state=closed]:zoom-out-95 lg:data-[state=open]:zoom-in-95 lg:rounded-xl",
37	),
38	{
39		variants: {
40			side: {
41				top: "inset-x-0 top-0 border-b rounded-b-xl max-h-[80dvh] lg:h-fit data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
42				bottom:
43					"inset-x-0 bottom-0 border-t lg:h-fit max-h-[80dvh] rounded-t-xl data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
44				left: "inset-y-0 left-0 h-full lg:h-fit w-3/4 border-r rounded-r-xl data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
45				right:
46					"inset-y-0 right-0 h-full lg:h-fit w-3/4 border-l rounded-l-xl data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
47			},
48		},
49		defaultVariants: {
50			side: "bottom",
51		},
52	},
53);
54 
55type ModalContentProps = DialogPrimitive.DialogContentProps &
56	VariantProps<typeof ModalVariants>;
57 
58const ModalContent = ({
59	side = "bottom",
60	className,
61	children,
62	...props
63}: ModalContentProps) => {
64	return (
65		<ModalPortal>
66			<ModalOverlay />
67			<DialogPrimitive.Content
68				{...props}
69				aria-describedby="responsive-modal-description"
70// … truncated