import { Menu, MenuItem } from '@szhsin/react-menu'; import { useState } from 'preact/hooks'; import Icon from './icon'; import TranslationBlock from './translation-block'; export default function MediaAltModal({ alt, onClose }) { const [forceTranslate, setForceTranslate] = useState(false); return ( <div class="sheet"> {!!onClose && ( <button type="button" class="sheet-close outer" onClick={onClose}> <Icon icon="x" /> </button> )} <header class="header-grid"> <h2>Media description</h2> <div class="header-side"> <Menu align="end" menuButton={ <button type="button" class="plain4"> <Icon icon="more" alt="More" size="xl" /> </button> } > <MenuItem disabled={forceTranslate} onClick={() => { setForceTranslate(true); }} > <Icon icon="translate" /> <span>Translate</span> </MenuItem> </Menu> </div> </header> <main> <p style={{ whiteSpace: 'pre-wrap', }} > {alt} </p> {forceTranslate && ( <TranslationBlock forceTranslate={forceTranslate} text={alt} /> )} </main> </div> ); }