38 lines
1.1 KiB
TypeScript
38 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<Props>({
|
|
closeOnEscape: false,
|
|
closeOnBackground: false,
|
|
})(ApiKeyModal);
|