79 |
83 |
168 | );
169 | };
170 |
171 | export default AddModal;
172 |
--------------------------------------------------------------------------------
/src/components/Navbar/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ChevronDown,
3 | NotificationsOutline,
4 | PersonCircle,
5 | SearchOutline,
6 | SettingsOutline,
7 | ShareSocialOutline,
8 | } from "react-ionicons";
9 |
10 | const Navbar = () => {
11 | return (
12 |
84 |
92 |
100 |
111 |
119 | setTagTitle(e.target.value)}
123 | placeholder="Tag Title"
124 | className="w-full h-12 px-3 outline-none rounded-md bg-slate-100 border border-slate-300 text-sm"
125 | />
126 |
132 |
167 |
133 | {taskData.tags && Tags:}
134 | {taskData.tags.map((tag, index) => (
135 |
144 |
140 | {tag.title}
141 |
142 | ))}
143 |
145 |
153 |
159 |
160 |
166 |
13 |
48 | );
49 | };
50 |
51 | export default Navbar;
52 |
--------------------------------------------------------------------------------
/src/components/Sidebar/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | AppsOutline,
3 | GridOutline,
4 | HomeOutline,
5 | LogOutOutline,
6 | NewspaperOutline,
7 | NotificationsOutline,
8 | PeopleOutline,
9 | PieChartOutline,
10 | } from "react-ionicons";
11 |
12 | const Sidebar = () => {
13 | const navLinks = [
14 | {
15 | title: "Home",
16 | icon: (
17 |
14 |
28 |
29 |
36 |
37 |
47 |
38 |
40 |
41 |
43 |
44 |
46 |
94 |
118 | );
119 | };
120 |
121 | export default Sidebar;
122 |
--------------------------------------------------------------------------------
/src/components/Task/index.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 | import { TimeOutline } from "react-ionicons";
3 | import { TaskT } from "../../types";
4 |
5 | interface TaskProps {
6 | task: TaskT;
7 | provided: any;
8 | }
9 |
10 | const Task = ({ task, provided }: TaskProps) => {
11 | const { title, description, priority, deadline, image, alt, tags } = task;
12 |
13 | return (
14 |
95 | Logo.
96 | L.
97 |
98 |
99 | {navLinks.map((link) => {
100 | return (
101 |
117 |
107 | {link.icon}
108 | {link.title}
109 |
110 | );
111 | })}
112 |
113 |
116 |
20 | {image && alt && (
21 | 
26 | )}
27 |
63 | );
64 | };
65 |
66 | export default Task;
67 |
--------------------------------------------------------------------------------
/src/data/board.ts:
--------------------------------------------------------------------------------
1 | import { v4 as uuidv4 } from "uuid";
2 | import taskImage from "../assets/images/task.jpg";
3 | import taskImage2 from "../assets/images/task2.jpg";
4 | import taskImage3 from "../assets/images/task3.jpg";
5 | import { Columns } from "../types";
6 | import { getRandomColors } from "../helpers/getRandomColors";
7 |
8 | export const Board: Columns = {
9 | backlog: {
10 | name: "Backlog",
11 | items: [
12 | {
13 | id: uuidv4(),
14 | title: "Admin Panel Front-end",
15 | description: "Lorem ipsum dolor sit amet ..",
16 | priority: "medium",
17 | deadline: 50,
18 | image: taskImage2,
19 | alt: "task image",
20 | tags: [
21 | { title: "Test", ...getRandomColors() },
22 | { title: "Front", ...getRandomColors() },
23 | ],
24 | },
25 | {
26 | id: uuidv4(),
27 | title: "Admin Panel Back-end",
28 | description: "Lorem ipsum dolor sit amet ..",
29 | priority: "low",
30 | deadline: 50,
31 | tags: [
32 | { title: "Test", ...getRandomColors() },
33 | { title: "Front", ...getRandomColors() },
34 | ],
35 | },
36 | ],
37 | },
38 | pending: {
39 | name: "Pending",
40 | items: [
41 | {
42 | id: uuidv4(),
43 | title: "Admin Panel Back-end",
44 | description: "Lorem ipsum dolor sit amet ..",
45 | priority: "high",
46 | deadline: 50,
47 | tags: [
48 | { title: "Test", ...getRandomColors() },
49 | { title: "Front", ...getRandomColors() },
50 | ],
51 | },
52 | {
53 | id: uuidv4(),
54 | title: "Admin Panel Front-end",
55 | description: "Lorem ipsum dolor sit amet ..",
56 | priority: "low",
57 | deadline: 50,
58 | image: taskImage,
59 | alt: "task image",
60 | tags: [
61 | { title: "Test", ...getRandomColors() },
62 | { title: "Front", ...getRandomColors() },
63 | ],
64 | },
65 | ],
66 | },
67 | todo: {
68 | name: "To Do",
69 | items: [
70 | {
71 | id: uuidv4(),
72 | title: "Admin Panel Front-end",
73 | description: "Lorem ipsum dolor sit amet ..",
74 | priority: "medium",
75 | deadline: 50,
76 | image: taskImage3,
77 | alt: "task image",
78 | tags: [
79 | { title: "Test", ...getRandomColors() },
80 | { title: "Front", ...getRandomColors() },
81 | ],
82 | },
83 | ],
84 | },
85 | doing: {
86 | name: "Doing",
87 | items: [
88 | {
89 | id: uuidv4(),
90 | title: "Admin Panel Front-end",
91 | description: "Lorem ipsum dolor sit amet ..",
92 | priority: "low",
93 | deadline: 50,
94 | tags: [
95 | { title: "Test", ...getRandomColors() },
96 | { title: "Front", ...getRandomColors() },
97 | ],
98 | },
99 | {
100 | id: uuidv4(),
101 | title: "Admin Panel Back-end",
102 | description: "Lorem ipsum dolor sit amet ..",
103 | priority: "medium",
104 | deadline: 50,
105 | tags: [
106 | { title: "Test", ...getRandomColors() },
107 | { title: "Front", ...getRandomColors() },
108 | ],
109 | },
110 | ],
111 | },
112 | done: {
113 | name: "Done",
114 | items: [
115 | {
116 | id: uuidv4(),
117 | title: "Admin Panel Front-end",
118 | description: "Lorem ipsum dolor sit amet ..",
119 | priority: "high",
120 | deadline: 50,
121 | image: taskImage,
122 | alt: "task image",
123 | tags: [
124 | { title: "Test", ...getRandomColors() },
125 | { title: "Front", ...getRandomColors() },
126 | ],
127 | },
128 | ],
129 | },
130 | };
131 |
--------------------------------------------------------------------------------
/src/helpers/getRandomColors.ts:
--------------------------------------------------------------------------------
1 | interface Color {
2 | bg: string;
3 | text: string;
4 | }
5 |
6 | const colors: { [key: string]: Color } = {
7 | red: { bg: "#fee2e2", text: "#dc2626" },
8 | rose: { bg: "#ffe4e6", text: "#e11d48" },
9 | blue: { bg: "#dbeafe", text: "#2563eb" },
10 | green: { bg: "#d1fae5", text: "#059669" },
11 | indigo: { bg: "#e0e7ff", text: "#4f46e5" },
12 | cyan: { bg: "#cffafe", text: "#0891b2" },
13 | lime: { bg: "#ecfccb", text: "#65a30d" },
14 | amber: { bg: "#fef3c7", text: "#d97706" },
15 | };
16 |
17 | export const getRandomColors = (): Color => {
18 | const keys = Object.keys(colors);
19 | const randomKey = keys[Math.floor(Math.random() * keys.length)];
20 | return colors[randomKey];
21 | };
22 |
--------------------------------------------------------------------------------
/src/helpers/onDragEnd.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
2 | export const onDragEnd = (result: any, columns: any, setColumns: any) => {
3 | if (!result.destination) return;
4 |
5 | const { source, destination } = result;
6 |
7 | if (source.droppableId !== destination.droppableId) {
8 | const sourceColumn = columns[source.droppableId];
9 | const destColumn = columns[destination.droppableId];
10 | const sourceItems = [...sourceColumn.items];
11 | const destItems = [...destColumn.items];
12 | const [removed] = sourceItems.splice(source.index, 1);
13 | destItems.splice(destination.index, 0, removed);
14 | setColumns({
15 | ...columns,
16 | [source.droppableId]: {
17 | ...sourceColumn,
18 | items: sourceItems,
19 | },
20 | [destination.droppableId]: {
21 | ...destColumn,
22 | items: destItems,
23 | },
24 | });
25 | } else {
26 | const column = columns[source.droppableId];
27 | const copiedItems = [...column.items];
28 | const [removed] = copiedItems.splice(source.index, 1);
29 | copiedItems.splice(destination.index, 0, removed);
30 | setColumns({
31 | ...columns,
32 | [source.droppableId]: {
33 | ...column,
34 | items: copiedItems,
35 | },
36 | });
37 | }
38 | };
39 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
2 |
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;
6 |
7 | body {
8 | font-family: "Poppins", sans-serif;
9 | margin: 0;
10 | padding: 0;
11 | min-width: 100vw;
12 | min-height: 100vh;
13 | height: 100%;
14 | position: relative;
15 | overflow-y: hidden;
16 | }
17 |
18 | body::before {
19 | content: "";
20 | position: absolute;
21 | top: 0;
22 | left: 0;
23 | width: 100%;
24 | height: 100%;
25 | background-image: url("./assets/images/bg.jpg");
26 | background-repeat: no-repeat;
27 | background-position: center;
28 | background-size: cover;
29 | filter: brightness(0.7);
30 | z-index: -1;
31 | }
32 |
33 | ::-webkit-scrollbar {
34 | width: 8px;
35 | height: 6px;
36 | }
37 | ::-webkit-scrollbar * {
38 | background: transparent;
39 | }
40 | ::-webkit-scrollbar-thumb {
41 | background: #f59e0b !important;
42 | border-radius: 5px;
43 | }
44 |
--------------------------------------------------------------------------------
/src/layout/index.tsx:
--------------------------------------------------------------------------------
1 | import { Outlet } from "react-router";
2 | import Sidebar from "../components/Sidebar";
3 | import Navbar from "../components/Navbar";
4 |
5 | const Layout = () => {
6 | return (
7 |
28 | {tags.map((tag) => (
29 |
34 | {tag.title}
35 |
36 | ))}
37 |
38 |
39 | {title}
40 | {description}
41 |
42 |
43 |
44 |
62 |
45 |
52 |
61 |
8 |
14 | );
15 | };
16 |
17 | export default Layout;
18 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { Suspense } from "react";
2 | import ReactDOM from "react-dom/client";
3 | import App from "./App.tsx";
4 | import "./index.css";
5 | import { BrowserRouter } from "react-router-dom";
6 | import { StyleSheetManager } from "styled-components";
7 |
8 | ReactDOM.createRoot(document.getElementById("root")!).render(
9 |
11 |
13 |
34 | {Object.entries(columns).map(([columnId, column]: any) => (
35 |
82 |
39 |
43 | {(provided: any) => (
44 |
72 |
80 | ))}
81 |
49 |
58 | {(provided: any) => (
59 | <>
60 |
67 | ))}
68 | {provided.placeholder}
69 |
70 | )}
71 |
50 | {column.name}
51 |
52 | {column.items.map((task: any, index: any) => (
53 | openModal(columnId)}
74 | className="flex cursor-pointer items-center justify-center gap-1 py-[10px] md:w-[90%] w-full opacity-90 bg-white rounded-lg shadow-sm text-[#555] font-medium text-[15px]"
75 | >
76 |
79 |