New components

frontend/src/components/Column.js

@@ -0,0 +1,63 @@
+import { shuffle } from "lodash";
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import boardsSlice from "../redux/boardsSlice";
+import Task from "./Task";
+
+function Column({ colIndex }) {
+  const colors = [
+    "bg-red-500",
+    "bg-orange-500",
+    "bg-blue-500",
+    "bg-purple-500",
+    "bg-green-500",
+    "bg-indigo-500",
+    "bg-yellow-500",
+    "bg-pink-500",
+    "bg-sky-500",
+  ];
+
+  const dispatch = useDispatch();
+  const [color, setColor] = useState(null);
+  const boards = useSelector((state) => state.boards);
+  const board = boards.find((board) => board.isActive === true);
+  const col = board.columns.find((col, i) => i === colIndex);
+  useEffect(() => {
+    setColor(shuffle(colors).pop());
+  }, [dispatch]);
+
+  const handleOnDrop = (e) => {
+    const { prevColIndex, taskIndex } = JSON.parse(
+      e.dataTransfer.getData("text")
+    );
+
+    if (colIndex !== prevColIndex) {
+      dispatch(
+        boardsSlice.actions.dragTask({ colIndex, prevColIndex, taskIndex })
+      );
+    }
+  };
+
+  const handleOnDragOver = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+    <div
+      onDrop={handleOnDrop}
+      onDragOver={handleOnDragOver}
+      className="scrollbar-hide   mx-5 pt-[90px] min-w-[280px] "
+    >
+      <p className=" font-semibold flex  items-center  gap-2 tracking-widest md:tracking-[.2em] text-[#828fa3]">
+        <div className={`rounded-full w-4 h-4 ${color} `} />
+        {col.name} ({col.tasks.length})
+      </p>
+
+      {col.tasks.map((task, index) => (
+        <Task key={index} taskIndex={index} colIndex={colIndex} />
+      ))}
+    </div>
+  );
+}
+
+export default Column;

frontend/src/components/ElipsisMenu.js

@@ -0,0 +1,35 @@
+import React from "react";
+
+function ElipsisMenu({ type, setOpenEditModal, setOpenDeleteModal }) {
+  return (
+    <div
+      className={
+        type === "Boards"
+          ? " absolute  top-16  right-5"
+          : " absolute  top-6  right-4"
+      }
+    >
+      <div className=" flex justify-end items-center">
+        <div className=" w-40 text-sm z-50 font-medium shadow-md shadow-[#364e7e1a] bg-white dark:bg-[#20212c] space-y-4 py-5 px-4 rounded-lg  h-auto pr-12">
+          <p
+            onClick={() => {
+              setOpenEditModal();
+            }}
+            className=" cursor-pointer dark:text-gray-400 text-gray-700"
+          >
+            Edit {type === "Boards" ? type : "Updates"}
+          </p>
+
+          <p
+            onClick={() => setOpenDeleteModal()}
+            className=" cursor-pointer text-red-500"
+          >
+            Delete {type === "Boards" ? type : "Updates"}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ElipsisMenu;

frontend/src/components/EmptyBoard.js

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import AddEditBoardModal from "../modals/AddEditBoardModal";
+
+function EmptyBoard({ type }) {
+  const [isBoardModalOpen, setIsBoardModalOpen] = useState(false);
+  return (
+    <div className=" bg-white dark:bg-[#2b2c37] h-screen w-screen flex flex-col  items-center justify-center">
+      <h3 className=" text-gray-500 font-bold">
+        {type === "edit"
+          ? "This board is empty. Create a new column to get started."
+          : "There are no boards available. Create a new board to get started"}
+      </h3>
+      <button
+        onClick={() => {
+          setIsBoardModalOpen(true);
+        }}
+        className="w-full items-center max-w-xs font-bold hover:opacity-70 dark:text-white dark:bg-[#635fc7] mt-8 relative  text-white bg-[#635fc7] py-2 rounded-full"
+      >
+        {type === "edit" ? "+ Add New Column" : "+ Add New Board"}
+      </button>
+      {isBoardModalOpen && (
+        <AddEditBoardModal
+          type={type}
+          setIsBoardModalOpen={setIsBoardModalOpen}
+        />
+      )}
+    </div>
+  );
+}
+
+export default EmptyBoard;