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

30 lines
1.2 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 overflow-x-scroll font-mono text-sm leading-relaxed'}>
{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>
);
};