OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Basic lookup/petpage design for /outfit-urls

Browse source 
Not converting yet, and only mobile design, but hitting save on it anyway!
This commit is contained in:
Emi Matchu 2021-05-25 04:04:35 -07:00
parent 01711fe0c2
commit 8b3cfe7118
1 changed files with 53 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/app/OutfitUrlsPage.js
View file

@ -5,6 +5,7 @@ import {
Box, Box,
Button, Button,
Center, Center,
Flex,
FormControl, FormControl,
FormErrorMessage, FormErrorMessage,
FormLabel, FormLabel,
@ -17,6 +18,7 @@ import {
TabPanel, TabPanel,
TabPanels, TabPanels,
Tabs, Tabs,
Textarea,
useBreakpointValue, useBreakpointValue,
useClipboard, useClipboard,
useColorModeValue, useColorModeValue,
@ -249,7 +251,57 @@ function SingleImageConverter() {
} }
function BulkImageConverter() { function BulkImageConverter() {
return <Box>TODO: Bulk image converter</Box>; const [inputHtml, setInputHtml] = React.useState("");
const outputHtml = inputHtml
? "<!-- TODO: Not implemented yet! -->\n" + inputHtml
: "";
const { onCopy, hasCopied } = useClipboard(outputHtml);
return (
<Grid
templateAreas={`
"input"
"output"
`}
rowGap="4"
>
<FormControl gridArea="input">
<FormLabel fontWeight="bold">Enter your lookup/petpage HTML</FormLabel>
<Textarea
fontFamily="monospace"
fontSize="xs"
value={inputHtml}
onChange={(e) => setInputHtml(e.target.value)}
/>
</FormControl>
<FormControl gridArea="output">
<Flex alignItems="center">
<FormLabel fontSize="sm">
Then, use this new HTML for your page instead:
</FormLabel>
<Box flex="1 0 0" />
<Button size="xs" onClick={onCopy} marginLeft="4">
<Grid templateAreas="the-area">
<Box gridArea="the-area">{hasCopied ? "Copied!" : "Copy"}</Box>
{/* This invisible "Copied!" enforces a min size for the button
* content, so that the button never changes size. */}
<Box gridArea="the-area" aria-hidden visibility="hidden">
Copied!
</Box>
</Grid>
</Button>
</Flex>
<Textarea
isReadOnly
fontFamily="monospace"
fontSize="xs"
value={outputHtml}
/>
</FormControl>
</Grid>
);
} }
const S3_OUTFIT_URL_PATTERN = /^https?:\/\/openneo-uploads\.s3\.amazonaws\.com\/outfits\/([0-9]{3})\/([0-9]{3})\/([0-9]{3})\/(preview|medium_preview|small_preview)\.png$/; const S3_OUTFIT_URL_PATTERN = /^https?:\/\/openneo-uploads\.s3\.amazonaws\.com\/outfits\/([0-9]{3})\/([0-9]{3})\/([0-9]{3})\/(preview|medium_preview|small_preview)\.png$/;