Skip to content

Commit

Permalink
imported icons from the library to remove the hardcoded svg for icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rinakat225
Rinakat225 committed Jun 4, 2024
1 parent 610b60f commit 99959a6
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 101 deletions.
9 changes: 9 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@heroicons/react": "^2.1.3",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
Expand Down
16 changes: 2 additions & 14 deletions src/TodoList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {useState} from 'react';
import NewTasks from './components/NewTasks';
import TaskList from './components/TaskList';
import Tabs from './components/Tabs';
import {LightBulbIcon} from '@heroicons/react/24/outline';

export default function TodoList() {
const [newTask, setNewTask] = useState('');
Expand Down Expand Up @@ -111,20 +112,7 @@ export default function TodoList() {
<span className="text-md w-20">{date}</span>
<h1 className="text-4xl font-bold">To do List</h1>
<button onClick={() => handleDarkModeButtonClick()}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="size-6 w-20"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"
/>
</svg>
<LightBulbIcon className="size-6 w-20" />
</button>
</div>

Expand Down
103 changes: 16 additions & 87 deletions src/components/TaskList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import {twMerge} from 'tailwind-merge';

import {ChevronUpIcon} from '@heroicons/react/24/outline';
import {ChevronDownIcon} from '@heroicons/react/24/outline';
import {XMarkIcon} from '@heroicons/react/20/solid';
import {TrashIcon} from '@heroicons/react/20/solid';
import {PencilSquareIcon} from '@heroicons/react/20/solid';
import {CheckIcon} from '@heroicons/react/20/solid';

export default function TaskList({
userInput,
id,
Expand Down Expand Up @@ -39,36 +46,10 @@ export default function TaskList({
>
<div className="flex flex-col">
<button onClick={() => onMoveTaskUpButtonClick(index)}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="size-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m4.5 15.75 7.5-7.5 7.5 7.5"
/>
</svg>
<ChevronUpIcon className="size-4" />
</button>
<button onClick={() => onMoveTaskDownButtonClick(index)}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="size-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
/>
</svg>
<ChevronDownIcon className="size-4" />
</button>
</div>
<ul>
Expand Down Expand Up @@ -101,14 +82,7 @@ export default function TaskList({
className={TASKLIST_BTN_CLASSNAMES}
onClick={() => onCancelEditingModeButtonClick()}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="#65717b"
className="size-4"
>
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<XMarkIcon fill="#65717b" className="size-4" />
</button>
</span>
) : (
Expand All @@ -117,18 +91,7 @@ export default function TaskList({
className={TASKLIST_BTN_CLASSNAMES}
onClick={() => onRemoveTaskButtonClick(id)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="#54edfe"
className="size-4"
>
<path
fillRule="evenodd"
d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
clipRule="evenodd"
/>
</svg>
<TrashIcon fill="#54edfe" className="size-4" />
</button>
</span>
)}
Expand All @@ -143,18 +106,7 @@ export default function TaskList({
className={TASKLIST_BTN_CLASSNAMES}
onClick={() => onSaveEditedTaskButtonClick(id)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="#65717b"
className="size-4"
>
<path
fillRule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clipRule="evenodd"
/>
</svg>
<CheckIcon fill="#65717b" className="size-4" />
</button>
</span>
) : (
Expand All @@ -163,15 +115,10 @@ export default function TaskList({
className={TASKLIST_BTN_CLASSNAMES}
onClick={() => onEditTaskButtonClick(id)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
<PencilSquareIcon
fill="#54edfe"
className="size-4"
>
<path d="M13.488 2.513a1.75 1.75 0 0 0-2.475 0L6.75 6.774a2.75 2.75 0 0 0-.596.892l-.848 2.047a.75.75 0 0 0 .98.98l2.047-.848a2.75 2.75 0 0 0 .892-.596l4.261-4.262a1.75 1.75 0 0 0 0-2.474Z" />
<path d="M4.75 3.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h6.5c.69 0 1.25-.56 1.25-1.25V9A.75.75 0 0 1 14 9v2.25A2.75 2.75 0 0 1 11.25 14h-6.5A2.75 2.75 0 0 1 2 11.25v-6.5A2.75 2.75 0 0 1 4.75 2H7a.75.75 0 0 1 0 1.5H4.75Z" />
</svg>
/>
</button>
</span>
)}
Expand All @@ -193,14 +140,7 @@ export default function TaskList({
onMarkTaskCompletedButtonClick(id)
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="#54edfe"
className="size-4"
>
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
<XMarkIcon fill="#54edfe" className="size-4" />
</button>
</span>
) : (
Expand All @@ -220,18 +160,7 @@ export default function TaskList({
onMarkTaskCompletedButtonClick(id)
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="#54edfe"
className="size-4"
>
<path
fillRule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clipRule="evenodd"
/>
</svg>
<CheckIcon fill="#54edfe" className="size-4" />
</button>
</span>
)}
Expand Down

0 comments on commit 99959a6

Please sign in to comment.