Matchu
ddfdd5fc11
This is an important workflow for people doing art stuff, I'm told! They used to use the Classic DTI broken image UI for this, but now that that's uhh Fully Gone, let's add this more explicitly!
92 lines
1.9 KiB
JavaScript
92 lines
1.9 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;
|