Feature/dashboard sidebar

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

package.json

@@ -6,10 +6,14 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-feather": "^2.0.10",
+    "react-icons": "^4.8.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "^5.0.1",
+    "react-trello": "^2.2.11",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -1,42 +1,3 @@
 body {
   background: #E5E5E5;
-}
-
-
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-
+}

src/App.jsx

@@ -4,6 +4,8 @@ import Signup from './Pages/Templates/Signup';
 import Signin from './Pages/Templates/Signin';
 import CreateFirstTeam from './Pages/Templates/CreateFirstTeam';
 import Landing from './Pages/Landing/Homepage';
+import Dashboard from './Pages/Dashboard/Dashboard';
+import BoardPage from './Pages/BoardPage/BoardPage';
 
 export default function App() {
   return (
@@ -13,6 +15,9 @@ export default function App() {
           <Route path="/" element={<Landing />} />
           <Route path="signup" element={<Signup />} />
           <Route path="create-first-team" element={<CreateFirstTeam />} />
+          <Route path="dashboard" element={<Dashboard />}>
+            <Route path="board" element={<BoardPage />} />
+          </Route>
           <Route path="login" element={<Signin />} />
         </Routes>
       </div>

src/Components/Board/Board.css

@@ -0,0 +1,72 @@
+.board {
+    min-width: 290px;
+    max-height: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    background-color: #ccc;
+    border-radius: 5px;
+}
+
+.board-top-more {
+    position: relative;
+    cursor: pointer;
+    color: #fff;
+}
+
+.board p {
+    font-size: 16px;
+    line-height: 28px;
+}
+
+.board-top {
+    display: flex;
+}
+
+.board-dropdown {
+    background-color: #fff;
+    width: 115px;
+    padding: 10px;
+    border-radius: 3px;
+    box-shadow: 1px 0 20px rgba(0, 0, 0, 0.15);
+}
+
+.board-dropdown p {
+    cursor: pointer;
+}
+
+.board-top-title {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    gap: 5px;
+}
+
+.board-top-title span {
+    color: gray;
+}
+
+.board-cards {
+    height: 100%;
+    flex: 1;
+    /* background-color: rgba(255, 255, 255, 0.597); */
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 10px;
+    border-bottom: 10px;
+    overflow-y: auto;
+}
+
+.board-cards-add {
+    width: 100%;
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.15);
+}
+
+.board-cards-add:hover {
+    box-shadow: 1px 2px 1px green;
+}

src/Components/Board/Board.js

@@ -0,0 +1,59 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/prop-types */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useState } from 'react';
+import { MoreHorizontal } from 'react-feather';
+import './Board.css';
+import Editable from '../Editable/Editable';
+import Dropdown from '../Dropdown/Dropdown';
+import Card from '../Card/Card';
+
+function Board(props) {
+  const [showDropdown, setShowDropdown] = useState(false);
+  return (
+    <div className="board">
+      <div className="board-top">
+        <p className="board-top-title">
+          {props.board?.title} <span>{` ${props.board?.cards.length}`}</span>
+        </p>
+        <div
+          className="board-top-more"
+          onClick={() => setShowDropdown(!showDropdown)}
+        >
+          <MoreHorizontal />
+          {showDropdown && (
+            <Dropdown onClose={() => setShowDropdown(false)}>
+              <div className="board-dropdown">
+                <p onClick={() => props.removeBoard(props.board?.id)}>
+                  Delete column
+                </p>
+              </div>
+            </Dropdown>
+          )}
+        </div>
+      </div>
+      <div className="board-cards">
+        {props.board?.cards?.map((item) => (
+          <Card
+            key={item.id}
+            card={item}
+            removeCard={props.removeCard}
+            boardId={props.board?.id}
+            handleDrageEnd={props.handleDrageEnd}
+            handleDrageEnter={props.handleDrageEnter}
+          />
+        ))}
+        <Editable
+          displayClass="board-cards-add"
+          text="Add Card"
+          placeholder="Enter Card Title"
+          onSubmit={(value) => props.addCard(value, props.board?.id)}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default Board;

src/Components/Card/Card.css

@@ -0,0 +1,65 @@
+.card {
+    padding: 10px;
+    border-radius: 5px;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.card-top {
+    display: flex;
+    gap: 5px;
+}
+
+.card-top-avatar {
+    flex: 1;
+    display: flex;
+    gap: 10px;
+    width: 30px;
+    height: 30px;
+}
+
+.card-top svg {
+    opacity: 0;
+    transition: 200ms;
+}
+
+.card:hover .card-top svg {
+    opacity: 1;
+}
+
+.card-title {
+    font-weight: bold;
+}
+
+.card-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.card-footer svg {
+    height: 14px;
+    width: 14px;
+}
+
+.card-footer p {
+    align-items: center;
+    display: flex;
+    gap: 5px;
+}
+
+.card-top-more {
+    position: relative;
+    cursor: pointer;
+}
+
+.card-dropdown {
+    color: #fff;
+    background-color: #ea6f6f;
+    width: 115px;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 1px 0 20px rgba(0, 0, 0, 0.15);
+}

src/Components/Card/Card.jsx

@@ -0,0 +1,70 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable react/prop-types */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useState } from 'react';
+import './Card.css';
+import { CheckSquare, Clock, MoreHorizontal } from 'react-feather';
+import Dropdown from '../Dropdown/Dropdown';
+import Cardinfo from './Cardinfo/Cardinfo';
+import geek from './geekman.png.png';
+
+function Card(props) {
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  return (
+    <>
+      {showModal && (
+        <Cardinfo card={props.card} onClose={() => setShowModal(false)} />
+      )}
+      <div
+        className="card"
+        draggable
+        onDragEnd={() => props.handleDragEnd(props.card?.id, props.boardId)}
+        onDragEnter={() => props.handleDragEnter(props.card?.id, props.boardId)}
+        onClick={() => setShowModal(true)}
+      >
+        <div className="card-top">
+          <div className="card-top-avatar">
+            <img alt="avatar" src={geek} />
+          </div>
+          <div
+            className="card-top-more"
+            onClick={() => setShowDropdown(!showDropdown)}
+          >
+            <MoreHorizontal />
+            {showDropdown && (
+              <Dropdown onClose={() => setShowDropdown(false)}>
+                <div className="card-dropdown">
+                  <p
+                    onClick={() =>
+                      props.removeCard(props.card?.id, props.boardId)
+                    }
+                  >
+                    Delete task
+                  </p>
+                </div>
+              </Dropdown>
+            )}
+          </div>
+        </div>
+        <div className="card-title">{props.card?.title}</div>
+        <div className="card-footer">
+          {props.card?.date && (
+            <p>
+              <Clock />
+              {props.card?.date}
+            </p>
+          )}
+          <p>
+            <CheckSquare />
+            1/4
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Card;