shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: public card modal

Browse Source
This commit is contained in:
Henry
2025-01-17 15:35:50 +00:00
parent 67339af6ca
commit 3d34b6bfcf
3 changed files with 162 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web/src/components/modal.tsx
View File

@@ -6,9 +6,14 @@ import { useModal } from "~/providers/modal";
interface Props {
children: React.ReactNode;
modalSize?: "sm" | "md" | "lg";
positionFromTop?: string;
}
const Modal: React.FC<Props> = ({ children, modalSize = "sm" }) => {
const Modal: React.FC<Props> = ({
children,
modalSize = "sm",
positionFromTop = "25vh",
}) => {
const { isOpen, closeModal } = useModal();
const modalSizeMap = {
@@ -44,7 +49,7 @@ const Modal: React.FC<Props> = ({ children, modalSize = "sm" }) => {
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel
className={`bg-white/1 relative mt-[25vh] w-full transform rounded-lg border border-light-600 text-left shadow-3xl-light backdrop-blur-[10px] transition-all dark:border-dark-600 dark:bg-dark-100/20 dark:shadow-3xl-dark ${modalSizeMap[modalSize]}`}
className={`relative mt-[${positionFromTop}] w-full transform rounded-lg border border-light-600 bg-white/90 text-left shadow-3xl-light backdrop-blur-[6px] transition-all dark:border-dark-600 dark:bg-dark-100/90 dark:shadow-3xl-dark ${modalSizeMap[modalSize]}`}
>
{children}
</Dialog.Panel>