yoginth.com / hey
Hey is a decentralized and permissionless social media app built with Lens Protocol 🌿
fork atom

feat(web): add modal variants (#5887)

authored by yoginth.com and committed by

GitHub 6091b20e 78f9a8b7

+18 -12
+18 -12
apps/web/src/components/Shared/UI/Modal.tsx
··· 6 6 TransitionChild 7 7 } from "@headlessui/react"; 8 8 import { XMarkIcon } from "@heroicons/react/24/outline"; 9 + import { cva, type VariantProps } from "class-variance-authority"; 9 10 import type { ReactNode, SyntheticEvent } from "react"; 10 11 import { Fragment, memo } from "react"; 11 - import cn from "@/helpers/cn"; 12 12 13 - interface ModalProps { 13 + const modalVariants = cva( 14 + "inline-block w-full scale-100 rounded-xl bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:align-middle dark:bg-gray-800", 15 + { 16 + defaultVariants: { size: "sm" }, 17 + variants: { 18 + size: { 19 + lg: "sm:max-w-5xl", 20 + md: "sm:max-w-3xl", 21 + sm: "sm:max-w-lg", 22 + xs: "sm:max-w-sm" 23 + } 24 + } 25 + } 26 + ); 27 + 28 + interface ModalProps extends VariantProps<typeof modalVariants> { 14 29 children: ReactNode | ReactNode[]; 15 30 onClose?: () => void; 16 31 show: boolean; 17 - size?: "lg" | "md" | "sm" | "xs"; 18 32 title?: ReactNode; 19 33 } 20 34 ··· 46 60 leaveFrom="opacity-100 translate-y-0 sm:scale-100" 47 61 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 48 62 > 49 - <DialogPanel 50 - className={cn( 51 - { "sm:max-w-5xl": size === "lg" }, 52 - { "sm:max-w-3xl": size === "md" }, 53 - { "sm:max-w-lg": size === "sm" }, 54 - { "sm:max-w-sm": size === "xs" }, 55 - "inline-block w-full scale-100 rounded-xl bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:align-middle dark:bg-gray-800" 56 - )} 57 - > 63 + <DialogPanel className={modalVariants({ size })}> 58 64 {title ? ( 59 65 <DialogTitle className="divider flex items-center justify-between px-5 py-3.5"> 60 66 <b>{title}</b>