File size: 1,603 Bytes
f909d7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import React from "react";
import { useRouter } from "next/router";
import {
TextInput,
Stack,
Modal,
Button,
CopyButton,
Tooltip,
ActionIcon,
Text,
ModalProps,
} from "@mantine/core";
import { FiExternalLink } from "react-icons/fi";
import { MdCheck, MdCopyAll } from "react-icons/md";
export const ShareModal: React.FC<ModalProps> = ({ opened, onClose }) => {
const { query } = useRouter();
const shareURL = `https://jsoncrack.com/editor?json=${query.json}`;
return (
<Modal title="Create a Share Link" opened={opened} onClose={onClose} centered>
<Stack py="sm">
<Text fz="sm" fw={700}>
Share Link
</Text>
<TextInput
value={shareURL}
type="url"
readOnly
rightSection={
<CopyButton value={shareURL} timeout={2000}>
{({ copied, copy }) => (
<Tooltip label={copied ? "Copied" : "Copy"} withArrow position="right">
<ActionIcon color={copied ? "teal" : "gray"} onClick={copy}>
{copied ? <MdCheck size="1rem" /> : <MdCopyAll size="1rem" />}
</ActionIcon>
</Tooltip>
)}
</CopyButton>
}
/>
<Text fz="sm" fw={700}>
Embed into your website
</Text>
<Button
component="a"
color="green"
target="_blank"
href="/docs"
leftSection={<FiExternalLink />}
fullWidth
>
Learn How to Embed
</Button>
</Stack>
</Modal>
);
};
|