mockups first iteration

web/src/pages/Patterns/details/pattern-details.tsx

+import { Heading, Text, VStack } from '@chakra-ui/react'
+import { useParams } from '@redwoodjs/router'
+import React from 'react'
+import { patterns } from '../data'
+import { Implementations } from 'src/pages/implementations'
+import { Animations } from 'src/pages/animations'
+
+export const PatternDetails: React.FC = () => {
+  const { id } = useParams()
+  const pattern = patterns.find((p) => p.id === id)
+
+  if (!pattern) {
+    return null
+  }
+  return (
+    <VStack w="full" px="4" aria-label="hey" alignItems="flex-start">
+      <Heading as="h2">{pattern.title}</Heading>
+      <Text>{pattern.description}</Text>
+      <VStack w="full" justifyContent="center" spacing="2">
+        <VStack alignItems="flex-start">
+          <Text pl="8" mb="-4" fontWeight="bold">
+            Implementaciones
+          </Text>
+          <Implementations patternId={pattern.id} />
+        </VStack>
+        <VStack alignItems="flex-start">
+          <Text pl="8" mb="-4" fontWeight="bold">
+            Animaciones
+          </Text>
+          <Animations patternId={pattern.id} />
+        </VStack>
+      </VStack>
+    </VStack>
+  )
+}

web/src/pages/Patterns/index.ts

 export * from './patterns'
+export * from './data'

web/src/pages/Patterns/patterns.tsx

 import React from 'react'
 
-import { Text, Heading, Box } from '@chakra-ui/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 (
-    <Box>
-      <Heading as="h1" size="xl" mb="6">
+    <VStack alignItems="flex-start" spacing="0">
+      <Heading as="h2" px="6">
         Patrones
       </Heading>
-      <Text fontSize="lg" mb="4">
-        Contenido de patrones
-      </Text>
-    </Box>
+      <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}`}>
+                <Link to={routes.pattern({ id: pattern.id })}>
+                  <Td>{pattern.title}</Td>
+                </Link>
+                <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>
   )
 }

web/src/pages/animations/animations.tsx

+import React from 'react'
+import { Animation, Pattern } from 'src/models'
+import { animations, patterns } from '../patterns'
+import {
+  Table,
+  TableCaption,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Text,
+  Thead,
+  Tooltip,
+  Tr,
+  HStack,
+  IconButton,
+  Icon,
+} from '@chakra-ui/react'
+import { FaPlay, FaTrash } from 'react-icons/fa'
+
+const tableHeaders = ['Titulo', 'Descripcion', 'Fecha de creacion', '']
+
+export type AnimationsProps = {
+  patternId: Pattern['id']
+}
+export const Animations: React.FC<AnimationsProps> = ({ patternId }) => {
+  const pattern = patterns.find((p) => p.id === patternId)
+  const patternAnimations = animations.filter(
+    (animation) => animation.patternId === patternId
+  )
+
+  if (!pattern || !patternAnimations) {
+    return null
+  }
+
+  return (
+    <TableContainer>
+      <Table variant="simple" size="lg">
+        <TableCaption>Animaciones disponibles de {pattern.title}</TableCaption>
+        <Thead>
+          <Tr>
+            {tableHeaders.map((header, index) => (
+              <Th key={`th-${index}`}>{header}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {patternAnimations.map((animation, index) => (
+            <Tr key={`animation-${animation.title}-${index}`}>
+              <Td>{animation.title}</Td>
+              <Td>
+                <Tooltip label={animation.description} hasArrow>
+                  <Text isTruncated maxW="sm">
+                    {animation.description}
+                  </Text>
+                </Tooltip>
+              </Td>
+              <Td>{new Date(animation.creationDate).toUTCString()}</Td>
+              <Td>
+                <ActionsRow _animation={animation} />
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  )
+}
+
+type ActionsRowProps = {
+  _animation: Animation
+}
+const ActionsRow: React.FC<ActionsRowProps> = ({ _animation }) => {
+  return (
+    <HStack>
+      <IconButton
+        aria-label="view animation"
+        variant="unstyled"
+        icon={<Icon as={FaPlay} />}
+      />
+      <IconButton
+        aria-label="delete animation"
+        variant="unstyled"
+        icon={<Icon as={FaTrash} />}
+      />
+    </HStack>
+  )
+}

web/src/pages/animations/index.ts

+export * from './animations'

web/src/pages/home/home.tsx

@@ -6,10 +6,11 @@ export const Home = () => {
   return (
     <Box>
       <Heading as="h1" size="xl" mb="6">
-        Welcome to My App
+        Testing de Microservicios
       </Heading>
       <Text fontSize="lg" mb="4">
-        This is a simple example of how to add content to your app.
+        En este lugar se describe lo que hace la aplicacion, el objetivo del
+        proyect, etc...
       </Text>
     </Box>
   )

web/src/pages/implementations/implementations.tsx

 import React from 'react'
 
-import { Text, Heading, Box } from '@chakra-ui/react'
+import {
+  Text,
+  TableContainer,
+  Table,
+  TableCaption,
+  Thead,
+  Tr,
+  Th,
+  Tbody,
+  Td,
+  Tooltip,
+  HStack,
+  IconButton,
+  Icon,
+} from '@chakra-ui/react'
+import { implementations, patterns } from '../patterns'
+import { FaEye, FaPlay, FaTrash } from 'react-icons/fa'
+import { Implementation, Pattern } from 'src/models'
 
-export const Implementations = () => {
+const tableHeaders = ['Titulo', 'Descripcion', 'Fecha de creacion', '']
+
+export type ImplementationsProps = {
+  patternId: Pattern['id']
+}
+export const Implementations: React.FC<ImplementationsProps> = ({
+  patternId,
+}) => {
+  const pattern = patterns.find((p) => p.id === patternId)
+  const patternImplementations = implementations.filter(
+    (implementation) => implementation.patternId === patternId
+  )
+
+  if (!pattern || !patternImplementations) {
+    // TODO: empty state
+    return null
+  }
+
+  return (
+    <TableContainer>
+      <Table variant="simple" size="lg">
+        <TableCaption>
+          Implementaciones disponibles de {pattern.title}
+        </TableCaption>
+        <Thead>
+          <Tr>
+            {tableHeaders.map((header, index) => (
+              <Th key={`th-${index}`}>{header}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {patternImplementations.map((implementation, index) => (
+            <Tr key={`implementation-${implementation.title}-${index}`}>
+              <Td>{implementation.title}</Td>
+              <Td>
+                <Tooltip label={implementation.description} hasArrow>
+                  <Text isTruncated maxW="sm">
+                    {implementation.description}
+                  </Text>
+                </Tooltip>
+              </Td>
+              <Td>{new Date(implementation.creationDate).toUTCString()}</Td>
+              <Td>
+                <ActionsRow _implementation={implementation} />
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  )
+}
+type ActionsRowProps = {
+  _implementation: Implementation
+}
+const ActionsRow: React.FC<ActionsRowProps> = ({ _implementation }) => {
   return (
-    <Box>
-      <Heading as="h1" size="xl" mb="6">
-        Implementaciones
-      </Heading>
-      <Text fontSize="lg" mb="4">
-        Contenido de implementaciones
-      </Text>
-    </Box>
+    <HStack>
+      <IconButton
+        aria-label="view implementation"
+        variant="unstyled"
+        icon={<Icon as={FaEye} />}
+      />
+      <IconButton
+        aria-label="test implementation"
+        variant="unstyled"
+        icon={<Icon as={FaPlay} />}
+      />
+      <IconButton
+        aria-label="delete implementation"
+        variant="unstyled"
+        icon={<Icon as={FaTrash} />}
+      />
+    </HStack>
   )
 }

yarn.lock

@@ -20980,6 +20980,15 @@ __metadata:
   languageName: node
   linkType: hard
+"react-icons@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "react-icons@npm:5.0.1"
+  peerDependencies:
+    react: "*"
+  checksum: 717022d93a3b2b30082f86fbb3c725a94a603b3fa1c611533439cc886f691a13b1833c30446d257a177667779239eac57411fa7516d8a4787bd735e965c9f63d
+  languageName: node
+  linkType: hard
+
 "react-is@npm:18.1.0":
   version: 18.1.0
   resolution: "react-is@npm:18.1.0"
@@ -21735,6 +21744,7 @@ __metadata:
   dependencies:
     "@redwoodjs/cli-storybook": 6.5.1
     "@redwoodjs/core": 6.5.1
+    react-icons: ^5.0.1
   languageName: unknown
   linkType: soft