impress/app/javascript/wardrobe-2020/WardrobePage/LayersInfoModal.js

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;