impress/app/javascript/wardrobe-2020/WardrobePage/LayersInfoModal.js
Emi Matchu 0e314482f7 Set Prettier default to tabs instead of spaces, run on all JS
I haven't been running Prettier consistently on things in this project.
Now, it's quick-runnable, and I've got it on everything!

Also, I just think tabs are the right default for this kind of thing,
and I'm glad to get to switch over to it! (In `package.json`.)
2024-09-09 16:11:48 -07:00

92 lines
1.6 KiB
JavaScript

import React from "react";
import {
Box,
Button,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalHeader,
ModalOverlay,
Table,
Tbody,
Td,
Th,
Thead,
Tr,
} from "@chakra-ui/react";
function LayersInfoModal({ isOpen, onClose, visibleLayers }) {
return (
<Modal isOpen={isOpen} onClose={onClose} size="xl">
<ModalOverlay>
<ModalContent maxWidth="800px">
<ModalHeader>Outfit layers</ModalHeader>
<ModalCloseButton />
<ModalBody>
<LayerTable layers={visibleLayers} />
</ModalBody>
</ModalContent>
</ModalOverlay>
</Modal>
);
}
function LayerTable({ layers }) {
return (
<Table>
<Thead>
<Tr>
<Th>Preview</Th>
<Th>DTI ID</Th>
<Th>Zone</Th>
<Th>Links</Th>
</Tr>
</Thead>
<Tbody>
{layers.map((layer) => (
<LayerTableRow key={layer.id} layer={layer} />
))}
</Tbody>
</Table>
);
}
function LayerTableRow({ layer, ...props }) {
return (
<Tr {...props}>
<Td>
<Box
as="img"
src={layer.imageUrl}
width="60px"
height="60px"
boxShadow="md"
/>
</Td>
<Td>{layer.id}</Td>
<Td>{layer.zone.label}</Td>
<Td>
<Box display="flex" gap=".5em">
{layer.imageUrl && (
<Button as="a" href={layer.imageUrl} target="_blank" size="sm">
PNG
</Button>
)}
{layer.swfUrl && (
<Button as="a" href={layer.swfUrl} size="sm" download>
SWF
</Button>
)}
{layer.svgUrl && (
<Button as="a" href={layer.svgUrl} target="_blank" size="sm">
SVG
</Button>
)}
</Box>
</Td>
</Tr>
);
}
export default LayersInfoModal;