Emi Matchu
0e314482f7
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`.)
92 lines
1.6 KiB
JavaScript
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;
|