import { useState } from 'react' import { FaChevronDown, FaRegClipboard, FaTimes } from 'react-icons/fa' import { copy } from 'utils/clipboard' import { Tooltip } from './Tooltip' export interface JsonPreviewProps { title?: string content: unknown initialState?: boolean onClose?: () => void isCopyable?: boolean isToggleable?: boolean /** @deprecated use {@link isCopyable} prop */ copyable?: boolean /** @deprecated use {@link initialState} prop */ isVisible?: boolean } export const JsonPreview = ({ copyable = false, isVisible = true, title = 'JSON Preview', content, initialState = isVisible, onClose, isCopyable = copyable, isToggleable = true, }: JsonPreviewProps) => { const [show, setShow] = useState(() => initialState) const toggle = () => { if (isToggleable) setShow((prev) => !prev) } return ( <div className="relative bg-stone-800/80 rounded border-2 border-white/20 divide-y-2 divide-white/20"> <div className="flex items-center py-1 px-2 space-x-2"> <span className="text-sm font-bold">{title}</span> <div className="flex-grow" /> {isToggleable && ( <Tooltip label={show ? 'Hide content' : 'Show content'}> <button onClick={toggle} type="button"> <FaChevronDown className={show ? 'rotate-180' : ''} size={16} /> </button> </Tooltip> )} {isCopyable && ( <Tooltip label="Copy to clipboard"> <button onClick={() => void copy(JSON.stringify(content))} type="button"> <FaRegClipboard size={16} /> </button> </Tooltip> )} {onClose && ( <Tooltip label="Close"> <button className="text-plumbus" onClick={onClose} type="button"> <FaTimes size={20} /> </button> </Tooltip> )} </div> {show && ( <div className="overflow-auto p-2 font-mono text-sm"> <pre>{JSON.stringify(content, null, 2).trim()}</pre> </div> )} </div> ) }