import { useContext } from 'react' import { Text, Box } from 'theme-ui' import AspectRatio from 'react-aspect-ratio' import { Code, LivePreview, Tab, Tabs, TabList, TabPanel } from '@/components' import { AppContext } from '@/context' import { clipboard, notification, shareCode } from '@/lib' const toClipboard = async (text, name) => { await clipboard.write(text) notification(`Copied ${name} to clipboard`) } export default function OverlayPreview () { const { query, screenshotUrl, theme } = useContext(AppContext) const { borderColor, color, contrast } = theme return ( <> <Box as='header'> <AspectRatio ratio='16/9'> <LivePreview shadow css={` zoom: 0.6; cursor: pointer; `} onClick={() => toClipboard(screenshotUrl, 'URL')} /> </AspectRatio> </Box> <Text sx={{ color, mt: 4, mb: 3, fontSize: 2, fontWeight: 'normal' }}> Add it to your website by copying the code below </Text> <Box as='section' sx={{ overflow: 'scroll' }}> <Tabs theme={theme}> <TabList> <Tab>SEO tags</Tab> <Tab>HTML</Tab> <Tab>Markdown</Tab> <Tab>Javascript</Tab> <Tab>Direct URL</Tab> </TabList> <TabPanel> <Code sx={{ borderColor, color: contrast }} onClick={e => toClipboard(e.target.textContent, 'SEO Tags')} > {shareCode.seo(screenshotUrl)} </Code> </TabPanel> <TabPanel> <Code sx={{ borderColor, color: contrast }} onClick={e => toClipboard(e.target.textContent, 'HTML')} > {shareCode.html(screenshotUrl)} </Code> </TabPanel> <TabPanel> <Code sx={{ borderColor, color: contrast }} onClick={e => toClipboard(e.target.textContent, 'Markdown')} > {shareCode.markdown(screenshotUrl)} </Code> </TabPanel> <TabPanel> <Code sx={{ borderColor, color: contrast }} onClick={e => toClipboard(e.target.textContent, 'Javascript')} > {shareCode.javascript(query)} </Code> </TabPanel> <TabPanel> <Code sx={{ borderColor, color: contrast }} onClick={e => toClipboard(e.target.textContent, 'URL')} > {screenshotUrl} </Code> </TabPanel> </Tabs> </Box> </> ) }