Definindo tela de listagem de componentes #33

src/entrypoints/web/wise-builder/pages/cadastrar-componente.tsx

@@ -18,6 +18,7 @@ import {
   Stack,
   useColorModeValue,
 } from '@chakra-ui/react';
+import { useRouter } from "next/router";
 
 function CadastroComp() {
   const [tipo, setTipo] = useState<string>("");
@@ -51,6 +52,11 @@ function CadastroComp() {
   const [generation, setGeneration] = useState<string>("");
   const [frequency, setFrequency] = useState<number>(0);
 
+  const router = useRouter();
+    function handleClick() {
+        router.push("/listar-componente");
+    }
+
  /*  const send = () => {
     const data: Ram = {
       fabricante:fabricante,
@@ -453,6 +459,7 @@ function CadastroComp() {
     )}
       <Stack justify={'right'}  spacing={6} direction={['column', 'row']}>
         <Button
+          onClick={handleClick}
           bg={'red.400'}
           color={'white'}
           w="20%"

src/entrypoints/web/wise-builder/pages/listar-componente.tsx

@@ -0,0 +1,82 @@
+import { useState, useEffect } from 'react';
+import { 
+    List,
+    ListItem,
+    ListIcon,
+    Flex,
+    Stack,
+    Heading,
+    useColorModeValue,
+    Divider,
+} from "@chakra-ui/react";
+import { AddIcon, CheckCircleIcon } from "@chakra-ui/icons";
+import Tabela from '../src/components/Tabela/tabela-listagem';
+
+/* async function getItems() {
+    const response = await fetch('https://sua-api.com/items');
+    const data = await response.json();
+    return data;
+  }
+
+function ItemList() {
+  const [items, setItems] = useState([]);
+
+   useEffect(() => {
+    async function fetchData() {
+      const data = await getItems();
+      setItems(data);
+    }
+    fetchData();
+  }, []); */
+
+const mockItems = [
+  {
+    id: 1,
+    name: 'Item 1'
+  },
+  {
+    id: 2,
+    name: 'Item 2'
+  },
+  {
+    id: 3,
+    name: 'Item 3'
+  }
+];
+
+function ItemList() {
+  const [items, setItems] = useState(mockItems);
+
+  return (
+    <Flex
+    minH={'100vh'}
+    align={'center'}
+    justify={'center'}
+    bg={useColorModeValue('gray.50', 'gray.800')}>
+    <Stack
+      spacing={4}
+      w={'full'}
+      maxW={'80%'}
+      bg={useColorModeValue('white', 'gray.700')}
+      rounded={'xl'}
+      boxShadow={'lg'}
+      p={6}
+      my={12}>
+      <Heading lineHeight={1.1} fontSize={{ base: '2xl', sm: '3xl' }}>
+        Listar Componentes
+      </Heading>
+      <Divider orientation='horizontal' />
+      <Tabela titulo="Componentes" link="/cadastrar-componente"/>
+        <List spacing={3}>
+            {items.map((item) => (
+                <ListItem key={item.id}>
+                    <ListIcon as={CheckCircleIcon} color="green.500" />
+                    {item.name}
+                </ListItem>
+                ))}
+            </List>
+            </Stack>
+  </Flex>
+)};
+
+export default ItemList;

src/entrypoints/web/wise-builder/src/components/Botão/acoes.tsx

@@ -0,0 +1,29 @@
+import {
+    IconButton,
+    Button,
+    Stack,
+  } from '@chakra-ui/react';
+
+  import { DeleteIcon, EditIcon } from '@chakra-ui/icons';
+
+  export default function ServerSecondaryOptions() {
+    return (
+        <Stack direction='row' spacing={4}>
+            <IconButton
+                bg='gray.200' 
+                color ='gray.900'
+                aria-label="Editar"
+                icon={<EditIcon />}
+                size="xs"
+                variant="solid"
+            />
+            <IconButton
+                bg='red' 
+                color ='white'
+                aria-label="Deletar"
+                icon={<DeleteIcon />}
+                size="xs"
+                variant="solid"
+            />
+        </Stack>
+  )}

src/entrypoints/web/wise-builder/src/components/MenuNav/menuNav.tsx

@@ -14,6 +14,7 @@ import {
     useColorModeValue,
     useBreakpointValue,
     useDisclosure,
+    Avatar,
   } from '@chakra-ui/react';
   import {
     HamburgerIcon,
@@ -51,13 +52,9 @@ import {
             />
           </Flex>
           <Flex flex={{ base: 1 }} justify={{ base: 'center', md: 'start' }}>
-            <Text
-              textAlign={useBreakpointValue({ base: 'center', md: 'left' })}
-              fontFamily={'heading'}
-              color={useColorModeValue('gray.800', 'white')}>
-              Logo
-            </Text>
-
+            <Avatar
+              size={'sm'}
+              src= {'https://cdn-icons-png.flaticon.com/512/1400/1400409.png'} />
             <Flex display={{ base: 'none', md: 'flex' }} ml={10}>
               <DesktopNav />
             </Flex>
@@ -261,7 +258,7 @@ import {
           {
             label: 'Listar Componentes',
             subLabel: 'Veja a lista de todos componentes cadastrados no Wise Builder.',
-            href: '/cadastrar-componente',
+            href: '/listar-componente',
           },
           {
             label: 'Cadastrar Componentes',

src/entrypoints/web/wise-builder/src/components/Tabela/tabela-listagem.tsx

@@ -0,0 +1,62 @@
+import {
+    Table,
+    Thead,
+    Tbody,
+    Tfoot,
+    Tr,
+    Th,
+    Td,
+    TableContainer,
+    Button,
+    Stack,
+  } from '@chakra-ui/react';
+import { Card, Heading, CardBody } from '@chakra-ui/react';
+import { AddIcon } from "@chakra-ui/icons";
+import Acoes from '../Botão/acoes'
+import { TabelaProps } from '../../types/propsTable';
+import { useRouter } from "next/router";
+
+export default function tabela (props: TabelaProps) {
+    const router = useRouter();
+    function handleClick() {
+        router.push("/cadastrar-componente");
+    }
+    return(
+        <TableContainer>
+            <Card  size='sm'>
+                <CardBody>
+                    <Stack direction="row" align="center" justify="space-between">
+                        <Heading size={'md'}>{props.titulo}</Heading>
+                        <Button onClick={handleClick} size={'sm'} colorScheme='blue' aria-label='Adicionar Componente' leftIcon={<AddIcon />}>Adicionar</Button>
+                    </Stack>  
+                </CardBody>
+            </Card>
+            <Table variant='striped' size='md'>
+            <Thead>
+                <Tr>
+                <Th isNumeric> ID </Th>
+                <Th>Tipo do Componente</Th>
+                <Th>Fabricante</Th>
+                <Th>Modelo</Th>
+                <Th>Ações</Th>
+                </Tr>
+            </Thead>
+            <Tbody>
+                <Tr>
+                <Td isNumeric>1</Td>
+                <Td>Placa de Vídeo</Td>
+                <Td>Zotac</Td>
+                <Td>RTX 3070</Td>
+                <Td><Acoes /></Td>
+                </Tr>
+                <Tr>
+                <Td isNumeric>2</Td>
+                <Td>Placa de Vídeo</Td>
+                <Td>Asus</Td>
+                <Td>GTX 1060</Td>
+                <Td><Acoes /></Td>
+                </Tr>
+            </Tbody>
+            </Table>
+        </TableContainer>);
+};

src/entrypoints/web/wise-builder/src/types/propsTable.tsx

@@ -0,0 +1,4 @@
+export interface TabelaProps {
+    titulo: string,
+    link: string,
+};