mirror of
https://github.com/pelican-dev/panel.git
synced 2025-05-20 16:54:45 +02:00
c28cba92e2
This allows entire components to be unmounted when the modal is hidden without affecting the fade in/out of the modal itself. This also makes it easier to programatically dismiss a modal without having to copy the visibility all over the place, and makes working with props much simpler in those modal components
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import React, { useContext } from 'react';
|
|
import tw from 'twin.macro';
|
|
import Button from '@/components/elements/Button';
|
|
import asModal from '@/hoc/asModal';
|
|
import ModalContext from '@/context/ModalContext';
|
|
|
|
interface Props {
|
|
apiKey: string;
|
|
}
|
|
|
|
const ApiKeyModal = ({ apiKey }: Props) => {
|
|
const { dismiss } = useContext(ModalContext);
|
|
|
|
return (
|
|
<>
|
|
<h3 css={tw`mb-6`}>Your API Key</h3>
|
|
<p css={tw`text-sm mb-6`}>
|
|
The API key you have requested is shown below. Please store this in a safe location, it will not be
|
|
shown again.
|
|
</p>
|
|
<pre css={tw`text-sm bg-neutral-900 rounded py-2 px-4 font-mono`}>
|
|
<code css={tw`font-mono`}>{apiKey}</code>
|
|
</pre>
|
|
<div css={tw`flex justify-end mt-6`}>
|
|
<Button type={'button'} onClick={() => dismiss()}>
|
|
Close
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
ApiKeyModal.displayName = 'ApiKeyModal';
|
|
|
|
export default asModal({
|
|
closeOnEscape: false,
|
|
closeOnBackground: false,
|
|
})(ApiKeyModal);
|