You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.6 KiB
60 lines
1.6 KiB
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>
|
|
);
|
|
};
|