70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
import clsx from "clsx";
|
|
import { ReactNode, useState } from "react";
|
|
import Modal from "../modals/Modal";
|
|
import ModalOrSlide from "../modals/ModalOrSlide";
|
|
import { Button, buttonVariants } from "../button";
|
|
|
|
interface Props {
|
|
title: ReactNode;
|
|
children?: ReactNode;
|
|
className?: string;
|
|
type?: "dialog" | "modal";
|
|
size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
|
|
buttons?: ReactNode;
|
|
dialogTitle?: string;
|
|
disabled?: boolean;
|
|
buttonProps?: {
|
|
variant?: "default" | "outline";
|
|
size?: "icon" | "xs" | "sm" | "default" | "lg";
|
|
};
|
|
}
|
|
export default function ShowModalButton({
|
|
title,
|
|
children,
|
|
className = "sm:max-w-md",
|
|
type = "modal",
|
|
size = "lg",
|
|
buttons,
|
|
dialogTitle,
|
|
disabled,
|
|
buttonProps,
|
|
}: Props) {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<>
|
|
<div className="flex space-x-2">
|
|
{buttonProps !== undefined ? (
|
|
<Button
|
|
{...buttonProps}
|
|
disabled={!children || disabled}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
|
|
setOpen(true);
|
|
}}
|
|
>
|
|
{title}
|
|
</Button>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
disabled={!children || disabled}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
|
|
setOpen(true);
|
|
}}
|
|
className={clsx(!!children)}
|
|
>
|
|
{title}
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<ModalOrSlide title={dialogTitle || title} type={type} size={size} open={open} setOpen={setOpen} buttons={buttons}>
|
|
{children}
|
|
</ModalOrSlide>
|
|
</>
|
|
);
|
|
}
|