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.Buttons> <Button.Text onClick={() => setOpen(false)}>Close</Button.Text> </Dialog.Buttons> </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> ); };