misc_pterodactyl-panel/resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx

34 lines
1.3 KiB
TypeScript

import React, { useState } from 'react';
import { ClipboardListIcon } from '@heroicons/react/outline';
import { Dialog } from '@/components/elements/dialog';
import { Button } from '@/components/elements/button/index';
export default ({ meta }: { meta: Record<string, unknown> }) => {
const [open, setOpen] = useState(false);
return (
<div className={'self-center md:px-4'}>
<Dialog open={open} onClose={() => setOpen(false)} hideCloseIcon title={'Metadata'}>
<pre
className={
'bg-gray-900 rounded p-2 font-mono text-sm leading-relaxed overflow-x-scroll whitespace-pre-wrap'
}
>
{JSON.stringify(meta, null, 2)}
</pre>
<Dialog.Footer>
<Button.Text onClick={() => setOpen(false)}>Close</Button.Text>
</Dialog.Footer>
</Dialog>
<button
aria-describedby={'View additional event metadata'}
className={
'p-2 transition-colors duration-100 text-gray-400 group-hover:text-gray-300 group-hover:hover:text-gray-50'
}
onClick={() => setOpen(true)}
>
<ClipboardListIcon className={'w-5 h-5'} />
</button>
</div>
);
};