itis-task-tracker-2023/src/components/molecules/ProjectsList/ProjectsList.jsx at 1fdb39f4b8f980b80e703962df398d247122204f · fs/itis-task-tracker-2023 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import React from "react";
import { v4 } from "uuid";
import styled from "styled-components";

import Button from "../../atoms/Button";
import ModalWindow from "../../atoms/ModalWindow";

const mockProjects = [
  {
    name: "Project #1",
    description: "It's my first project",
    createdAt: "22 days ago",
  },
  {
    name: "Project #2",
    description: "It's my second project",
    createdAt: "20 days ago",
  },
  {
    name: "Stackers team",
    description: "",
    createdAt: "10 days ago",
  },
];

const Wrapper = styled.div`
  overflow: auto;
  margin-top: 48px;
  max-width: 1000px;
  padding: 16px;
  background: #fafafa;
`;

const Table = styled.table`
  width: 100%;
`;

const TableItem = styled.td`
  padding: 12px;
`;

const Head = styled.thead`
  border-bottom: 1px solid #bdbdbd;
`;

const ProjectsList = () => {
  return (
    <Wrapper>
      <ModalWindow> Hello </ModalWindow>
      <Table>
        <Head>
          <tr key={`table-header-${v4()}`}>
            <TableItem> Name </TableItem>
            <TableItem> Description </TableItem>
            <TableItem> Created At </TableItem>
          </tr>
        </Head>
        <tbody>
          {mockProjects.map(({ name, description, createdAt }) => (
            <tr key={`table-row-${v4()}`}>
              <TableItem> {name} </TableItem>
              <TableItem> {description} </TableItem>
              <TableItem> {createdAt} </TableItem>
              <TableItem>
                <Button label="Tasks" />
              </TableItem>
              <TableItem>
                <Button label="Edit" color="#7938db" />
              </TableItem>
              <TableItem>
                <Button label="Destroy" color="#eb5369" />
              </TableItem>
            </tr>
          ))}
        </tbody>
      </Table>
    </Wrapper>
  );
};

export default ProjectsList;