mirror of
https://github.com/swissmakers/swiss-datashare.git
synced 2026-04-19 05:23:14 +02:00
66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
|
import {
|
||
|
|
ActionIcon,
|
||
|
|
Button,
|
||
|
|
Group,
|
||
|
|
Text,
|
||
|
|
TextInput,
|
||
|
|
Title,
|
||
|
|
} from "@mantine/core";
|
||
|
|
import { useClipboard } from "@mantine/hooks";
|
||
|
|
import { useModals } from "@mantine/modals";
|
||
|
|
import { ModalsContextProps } from "@mantine/modals/lib/context";
|
||
|
|
import { useRouter } from "next/router";
|
||
|
|
import { Copy } from "tabler-icons-react";
|
||
|
|
|
||
|
|
const showCompletedUploadModal = (
|
||
|
|
modals: ModalsContextProps,
|
||
|
|
link: string,
|
||
|
|
expiresAt: string
|
||
|
|
) => {
|
||
|
|
return modals.openModal({
|
||
|
|
closeOnClickOutside: false,
|
||
|
|
withCloseButton: false,
|
||
|
|
closeOnEscape: false,
|
||
|
|
title: <Title order={4}>Share ready</Title>,
|
||
|
|
children: <Body link={link} expiresAt={expiresAt} />,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const Body = ({ link, expiresAt }: { link: string; expiresAt: string }) => {
|
||
|
|
const clipboard = useClipboard({ timeout: 500 });
|
||
|
|
const modals = useModals();
|
||
|
|
const router = useRouter();
|
||
|
|
return (
|
||
|
|
<Group grow direction="column">
|
||
|
|
<TextInput
|
||
|
|
variant="filled"
|
||
|
|
value={link}
|
||
|
|
rightSection={
|
||
|
|
<ActionIcon onClick={() => clipboard.copy(link)}>
|
||
|
|
<Copy />
|
||
|
|
</ActionIcon>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
<Text
|
||
|
|
size="xs"
|
||
|
|
sx={(theme) => ({
|
||
|
|
color: theme.colors.gray[6],
|
||
|
|
})}
|
||
|
|
>
|
||
|
|
Your share expires at {expiresAt}{" "}
|
||
|
|
</Text>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
onClick={() => {
|
||
|
|
modals.closeAll();
|
||
|
|
router.push("/upload");
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Done
|
||
|
|
</Button>
|
||
|
|
</Group>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default showCompletedUploadModal;
|