mirror of
https://github.com/TurTaskProject/TurTaskWeb.git
synced 2025-12-19 22:14:07 +01:00
Use react-icons instead of svg icon
This commit is contained in:
sosokker
parent
5a789d733f
commit
02c51a7def
@ -1,17 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
function PlusIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlusIcon;
|
||||
@ -1,21 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
function TrashIcon() {
|
||||
return React.createElement(
|
||||
"svg",
|
||||
{
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
fill: "none",
|
||||
viewBox: "0 0 24 24",
|
||||
strokeWidth: 1.5,
|
||||
className: "w-6 h-6",
|
||||
},
|
||||
React.createElement("path", {
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round",
|
||||
d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0",
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
export default TrashIcon;
|
||||
@ -1,8 +1,8 @@
|
||||
import { SortableContext, useSortable } from "@dnd-kit/sortable";
|
||||
import TrashIcon from "../icons/trashIcon";
|
||||
import { BsFillTrashFill } from "react-icons/bs"
|
||||
import { AiOutlinePlusCircle } from "react-icons/ai"
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { useMemo, useState } from "react";
|
||||
import PlusIcon from "../icons/plusIcon";
|
||||
import TaskCard from "./taskCard";
|
||||
|
||||
function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
|
||||
@ -124,7 +124,7 @@ function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks
|
||||
px-1
|
||||
py-2
|
||||
">
|
||||
<TrashIcon />
|
||||
<BsFillTrashFill />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -142,7 +142,7 @@ function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks
|
||||
onClick={() => {
|
||||
createTask(column.id);
|
||||
}}>
|
||||
<PlusIcon />
|
||||
<AiOutlinePlusCircle />
|
||||
Add task
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import PlusIcon from "../icons/plusIcon";
|
||||
import { useMemo, useState } from "react";
|
||||
import ColumnContainer from "./columnContainer";
|
||||
import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
|
||||
import { SortableContext, arrayMove } from "@dnd-kit/sortable";
|
||||
import { createPortal } from "react-dom";
|
||||
import TaskCard from "./taskCard";
|
||||
import { AiOutlinePlusCircle } from "react-icons/ai"
|
||||
|
||||
|
||||
const defaultCols = [
|
||||
{
|
||||
@ -155,7 +156,7 @@ function KanbanBoard() {
|
||||
flex
|
||||
gap-2
|
||||
">
|
||||
<PlusIcon />
|
||||
<AiOutlinePlusCircle />
|
||||
Add Column
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import TrashIcon from "../icons/trashIcon";
|
||||
import { BsFillTrashFill } from "react-icons/bs"
|
||||
import { useSortable } from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
|
||||
@ -33,7 +33,7 @@ function TaskCard({ task, deleteTask, updateTask }) {
|
||||
style={style}
|
||||
className="
|
||||
opacity-30
|
||||
bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl border-2 border-rose-500 cursor-grab relative
|
||||
bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl border-2 border-gray-400 cursor-grab relative
|
||||
"
|
||||
/>
|
||||
);
|
||||
@ -46,11 +46,11 @@ function TaskCard({ task, deleteTask, updateTask }) {
|
||||
style={style}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className="bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-rose-500 cursor-grab relative">
|
||||
className="bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset bg-zinc-400 ring-zinc-950 cursor-grab relative">
|
||||
<textarea
|
||||
className="
|
||||
h-[90%]
|
||||
w-full resize-none border-none rounded bg-transparent text-white focus:outline-none
|
||||
w-full resize-none border-none rounded bg-transparent focus:outline-none
|
||||
"
|
||||
value={task.content}
|
||||
autoFocus
|
||||
@ -74,22 +74,22 @@ function TaskCard({ task, deleteTask, updateTask }) {
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
onClick={toggleEditMode}
|
||||
className="bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-rose-500 cursor-grab relative task"
|
||||
className="p-1 justify-center h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-gray-950 hover:bg-zinc-400 cursor-grab relative task"
|
||||
onMouseEnter={() => {
|
||||
setMouseIsOver(true);
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setMouseIsOver(false);
|
||||
}}>
|
||||
<p className="my-auto h-[90%] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap">{task.content}</p>
|
||||
<p className="p-2.5 my-auto h-[100px] min-h-[100px] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-xl ring-2 ring-gray-950 bg-zinc-100">{task.content}</p>
|
||||
|
||||
{mouseIsOver && (
|
||||
<button
|
||||
onClick={() => {
|
||||
deleteTask(task.id);
|
||||
}}
|
||||
className="stroke-white absolute right-4 top-1/2 -translate-y-1/2 bg-columnBackgroundColor p-2 rounded opacity-60 hover:opacity-100">
|
||||
<TrashIcon />
|
||||
className="stroke-white absolute right-4 top-1/2 -translate-y-1/2 bg-columnBackgroundColor p-2 rounded opacity-60 hover:opacity-100 ">
|
||||
<BsFillTrashFill />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
AiOutlineHome,
|
||||
AiOutlineSchedule,
|
||||
AiOutlineUnorderedList,
|
||||
AiOutlinePieChart,
|
||||
AiOutlinePlus,
|
||||
} from "react-icons/ai";
|
||||
import { AiOutlineHome, AiOutlineSchedule, AiOutlineUnorderedList, AiOutlinePieChart } from "react-icons/ai";
|
||||
import { PiStepsDuotone } from "react-icons/pi";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
|
||||
@ -14,7 +9,7 @@ const menuItems = [
|
||||
{ id: 1, path: "/tasks", icon: <AiOutlineUnorderedList /> },
|
||||
{ id: 2, path: "/calendar", icon: <AiOutlineSchedule /> },
|
||||
{ id: 3, path: "/analytic", icon: <AiOutlinePieChart /> },
|
||||
{ id: 4, path: "/priority", icon: <AiOutlinePlus /> },
|
||||
{ id: 4, path: "/priority", icon: <PiStepsDuotone /> },
|
||||
];
|
||||
|
||||
const IconSideNav = () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user