Install clsx and heroicons

package-lock.json

@@ -8,6 +8,7 @@
       "name": "todo-list",
       "version": "0.0.0",
       "dependencies": {
+        "@heroicons/react": "^2.0.18",
         "@reduxjs/toolkit": "^1.9.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -462,6 +463,14 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",

package.json

@@ -5,11 +5,13 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev-host": "vite --host",
     "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.18",
     "@reduxjs/toolkit": "^1.9.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/Footer.tsx

@@ -2,7 +2,7 @@ export default function Footer() {
   return (
       <footer className={"Footer footer w-screen absolute bottom-0 p-4"}>
         <p className={"inline-block w-full text-center"}>
-          MIT Licence © 2023 • <a className={"link no-underline hover:underline"} href={"https://github.com/LucasVbr/todo-list"} target={"_blank"}>See code on GitHub</a>
+          MIT Licence © 2023 • <a className={"link link-hover"} href={"https://github.com/LucasVbr/todo-list"} target={"_blank"}>See code on GitHub</a>
         </p>
       </footer>
   )

src/components/Navbar.tsx

@@ -1,7 +1,13 @@
+import clsx from 'clsx';
+
 export default function Navbar() {
   return (
-      <div className={"Navbar navbar absolute top-0"}>
+      <div className={clsx('Navbar',
-        <button className={"btn btn-ghost normal-case text-xl"}>Todo List App</button>
+          'navbar absolute top-0',
+          'flex justify-between')}>
+        <button className={'btn btn-ghost normal-case text-xl'}>
+          Todo List App
+        </button>
       </div>
-  )
+  );
 }

src/components/todo/TodoAddItemForm.tsx

@@ -1,6 +1,7 @@
 import {FormEvent, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import {addTodo} from '../../features/todo/todoSlice.ts';
+import {PlusIcon} from '@heroicons/react/24/outline';
 
 export default function TodoAddItemForm() {
   const [name, setName] = useState('');
@@ -17,20 +18,12 @@ export default function TodoAddItemForm() {
       <form onSubmit={handleSubmit} className={'TodoAddItemForm'}>
         <div className={'form-control'}>
           <div className={'input-group'}>
-            <input type={'text'} value={name} placeholder={'Type here your task...'}
+            <input type={'text'} value={name}
+                   placeholder={'Type here your task...'}
                    className={'input border-primary w-full'}
-                   onChange={evt => setName(evt.target.value)}
+                   onChange={evt => setName(evt.target.value)}/>
-            />
             <button type={'submit'} className={'btn btn-square btn-primary'}>
-
+              <PlusIcon className={"h-6 w-6"}/>
-              {/*Plus icon*/}
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6"
-                   fill="none"
-                   viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
-                <path strokeLinecap="round" strokeLinejoin="round"
-                      d="M12 4v16m8-8H4"/>
-              </svg>
-
             </button>
           </div>
         </div>

src/components/todo/TodoCardFooter.tsx

@@ -6,7 +6,11 @@ import TodoState from '../../models/TodoState.ts';
 export default function TodoCardFooter() {
 
   const dispatch = useDispatch();
-  const selectedTodosCount: number = useSelector((state: RootState) => state.todo.filter((todo: TodoState) => !todo.checked).length);
+  const selectedTodosCount: number = useSelector(
+      (state: RootState) => state.todo.filter(
+          (todo: TodoState) => !todo.checked
+      ).length
+  );
 
   const handleDelete = () => dispatch(deleteSelectedTodos());
 

src/components/todo/TodoItem.tsx

@@ -14,7 +14,8 @@ export default function TodoItem({todo}: Props) {
 
   return (
       <label className={clsx('TodoItem',
-          'border-[1px] border-base-300 shadow rounded-lg p-4 w-full cursor-pointer',
+          'w-full p-4 rounded-lg cursor-pointer',
+          'border-[1px] border-base-300 shadow',
           'flex items-center justify-between gap-5')}>
         <span className={"break-all"}>{todo.name}</span>
         <input type={'checkbox'} onChange={handleCheck} checked={todo.checked}

src/components/todo/TodoItemList.tsx

@@ -1,5 +1,6 @@
 import TodoItem from './TodoItem.tsx';
 import type TodoState from '../../models/TodoState.ts';
+import clsx from 'clsx';
 
 type Props = {
   todos: TodoState[]
@@ -7,7 +8,7 @@ type Props = {
 
 export default function TodoItemList({todos}: Props) {
   return (
-      <div className={'TodoItemList w-full flex flex-col gap-2'}>
+      <div className={clsx('TodoItemList', 'w-full flex flex-col gap-2')}>
         {todos.map((todo: TodoState, index) => <TodoItem todo={todo} key={index}/>)}
       </div>
   );