37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import { FC } from "react";
|
|
import { Copy } from "lucide-react";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "./dialog";
|
|
|
|
export const PreviewImagePopup: FC<any> = ({ url, className, children }) => {
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger asChild>{children}</DialogTrigger>
|
|
<DialogContent className="max-w-5xl h-4/5 flex flex-col ">
|
|
<DialogHeader>
|
|
<DialogTitle>Preview</DialogTitle>
|
|
<DialogDescription className="hidden">
|
|
Anyone who has this link will be able to view this.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex items-center flex-row space-x-2 bg-black flex-grow">
|
|
<div
|
|
className={cx(
|
|
"flex h-full flex-grow flex-row bg-no-repeat bg-center bg-contain",
|
|
css`
|
|
background-image: url("${url}");
|
|
`
|
|
)}
|
|
></div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|