feat: added card and modal component

2026-10-16 21:37:59 +00:00 · 2023-01-23 22:10:50 +05:30
parent 606a5e5317
commit 89ba80740b
7 changed files with 399 additions and 296 deletions
@@ -0,0 +1,55 @@
+import { forwardRef, ReactNode } from 'react';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { twMerge } from 'tailwind-merge';
+
+import { Card, CardBody, CardFooter, CardTitle } from '../Card';
+import { IconButton } from '../IconButton';
+
+export type ModalContentProps = Omit<DialogPrimitive.DialogContentProps, 'open'> & {
+  title?: ReactNode;
+  subTitle?: string;
+  footerContent?: ReactNode;
+};
+
+export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
+  ({ children, title, subTitle, className, footerContent, ...props }, forwardedRef) => (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay
+        className="fixed inset-0 w-full h-full animate-fadeIn"
+        style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+      />
+      <DialogPrimitive.Content {...props} ref={forwardedRef}>
+        <Card
+          isRounded
+          className={twMerge(
+            'fixed max-w-md animate-popIn top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4',
+            className
+          )}
+        >
+          {title && <CardTitle subTitle={subTitle}>{title}</CardTitle>}
+          <CardBody>{children}</CardBody>
+          {footerContent && <CardFooter>{footerContent}</CardFooter>}
+          <DialogPrimitive.Close aria-label="Close" asChild>
+            <IconButton
+              variant="plain"
+              ariaLabel="close"
+              className="absolute top-2.5 right-2.5 text-white hover:bg-gray-600 rounded"
+            >
+              <FontAwesomeIcon icon={faTimes} size="sm" className="cursor-pointer" />
+            </IconButton>
+          </DialogPrimitive.Close>
+        </Card>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  )
+);
+
+ModalContent.displayName = 'ModalContent';
+
+export const Modal = DialogPrimitive.Root;
+export type ModalProps = DialogPrimitive.DialogProps;
+
+export const ModalTrigger = DialogPrimitive.Trigger;
+export type ModalTriggerProps = DialogPrimitive.DialogTriggerProps;