patterns.tsx

import React from 'react'

import {
  Heading,
  VStack,
  TableContainer,
  Table,
  Thead,
  Tr,
  Th,
  Tbody,
  Td,
  Text,
  TableCaption,
  Tooltip,
  HStack,
  Icon,
  IconButton,
} from '@chakra-ui/react'
import { FaEdit, FaEye, FaPlus, FaTrash } from 'react-icons/fa'
import { Link, routes } from '@redwoodjs/router'
import { patterns } from '.'
import { Pattern } from 'src/models'

const tableHeaders = ['Titulo', 'Descripcion', '#Implementaciones', '']

export const Patterns = () => {
  return (
    <VStack alignItems="flex-start" spacing="0">
      <Heading as="h2" px="6">
        Patrones
      </Heading>
      <TableContainer>
        <Table variant="simple" size="lg">
          <TableCaption>Patrones disponibles</TableCaption>
          <Thead>
            <Tr>
              {tableHeaders.map((header, index) => (
                <Th key={`th-${index}`}>{header}</Th>
              ))}
            </Tr>
          </Thead>
          <Tbody>
            {patterns.map((pattern, index) => (
              <Tr key={`pattern-${pattern.title}-${index}`}>
                <Td>
                  <Link to={routes.pattern({ id: pattern.id })}>
                    {pattern.title}
                  </Link>
                </Td>
                <Td>
                  <Tooltip label={pattern.description} hasArrow>
                    <Text isTruncated maxW="sm">
                      {pattern.description}
                    </Text>
                  </Tooltip>
                </Td>
                <Td>
                  <Text textAlign="center">
                    {pattern.numberOfImplementations}
                  </Text>
                </Td>
                <Td>
                  <ActionsRow pattern={pattern} />
                </Td>
              </Tr>
            ))}
          </Tbody>
        </Table>
      </TableContainer>
    </VStack>
  )
}

type ActionsRowProps = {
  pattern: Pattern
}
const ActionsRow: React.FC<ActionsRowProps> = ({ pattern }) => {
  return (
    <HStack>
      {/* Linter yells but is fine https://github.com/redwoodjs/redwood/issues/1742 */}
      <Link to={routes.pattern({ id: pattern.id })}>
        <IconButton
          aria-label="view pattern"
          variant="unstyled"
          icon={<Icon as={FaEye} />}
        />
      </Link>
      <IconButton
        aria-label="add pattern"
        variant="unstyled"
        icon={<Icon as={FaPlus} />}
      />
      <IconButton
        aria-label="edit pattern"
        variant="unstyled"
        icon={<Icon as={FaEdit} />}
      />
      <IconButton
        aria-label="delete pattern"
        variant="unstyled"
        icon={<Icon as={FaTrash} />}
      />
    </HStack>
  )
}