"use client"; import * as React from "react"; import * as DialogPrimitive from "@radix-ui/react-dialog"; import { cva, type VariantProps } from "class-variance-authority"; import { X } from "lucide-react"; import { cn } from "@/lib/utils"; const ResponsiveModal = DialogPrimitive.Root; const ResponsiveModalTrigger = DialogPrimitive.Trigger; const ResponsiveModalClose = DialogPrimitive.Close; const ResponsiveModalPortal = DialogPrimitive.Portal; const ResponsiveModalOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); ResponsiveModalOverlay.displayName = DialogPrimitive.Overlay.displayName; const ResponsiveModalVariants = cva( cn( "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-y-auto", "lg:left-[50%] lg:top-[50%] lg:grid lg:w-full lg:max-w-lg lg:translate-x-[-50%] lg:translate-y-[-50%] lg:border lg:duration-200 lg:data-[state=open]:animate-in lg:data-[state=closed]:animate-out lg:data-[state=closed]:fade-out-0 lg:data-[state=open]:fade-in-0 lg:data-[state=closed]:zoom-out-95 lg:data-[state=open]:zoom-in-95 lg:data-[state=closed]:slide-out-to-left-1/2 lg:data-[state=closed]:slide-out-to-top-[48%] lg:data-[state=open]:slide-in-from-left-1/2 lg:data-[state=open]:slide-in-from-top-[48%] lg:rounded-xl", ), { variants: { side: { top: "inset-x-0 top-0 border-b rounded-b-xl max-h-[90%] lg:h-fit data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", bottom: "inset-x-0 bottom-0 border-t lg:h-fit max-h-[90%] rounded-t-xl data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", 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", right: "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", }, }, defaultVariants: { side: "bottom", }, }, ); interface ResponsiveModalContentProps extends React.ComponentPropsWithoutRef, VariantProps {} const ResponsiveModalContent = React.forwardRef< React.ElementRef, ResponsiveModalContentProps >(({ side = "bottom", className, children, ...props }, ref) => ( {children} Close )); ResponsiveModalContent.displayName = DialogPrimitive.Content.displayName; const ResponsiveModalHeader = ({ className, ...props }: React.HTMLAttributes) => (

); ResponsiveModalHeader.displayName = "ResponsiveModalHeader"; const ResponsiveModalFooter = ({ className, ...props }: React.HTMLAttributes) => (

); ResponsiveModalFooter.displayName = "ResponsiveModalFooter"; const ResponsiveModalTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); ResponsiveModalTitle.displayName = DialogPrimitive.Title.displayName; const ResponsiveModalDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); ResponsiveModalDescription.displayName = DialogPrimitive.Description.displayName; export { ResponsiveModal, ResponsiveModalPortal, ResponsiveModalOverlay, ResponsiveModalTrigger, ResponsiveModalClose, ResponsiveModalContent, ResponsiveModalHeader, ResponsiveModalFooter, ResponsiveModalTitle, ResponsiveModalDescription, };

Responsive Modal

Usage

Side