Yaman demo3

task-list/src/App.tsx

@@ -1,28 +1,51 @@
+import { useState } from "react"
 import "./App.scss"
 import { ReactComponent as Add } from "./assets/icons/add.svg"
 import AddEditTaskForm from "./components/AddEditTaskForm"
 import Button from "./components/Button"
 import DeleteModal from "./components/DeleteModal"
 import TaskCard from "./components/TaskCard"
-import { taskList } from "./siteData/taskList"
+import { taskList as initialTaskList } from "./siteData/taskList"
+
+type Task = {
+  id: string
+  title: string
+  priority: "high" | "medium" | "low"
+  status: string
+  progress: number
+}
 
 const App = () => {
-  const showAddEditModal = false
+  const [tasks, setTasks] = useState<Task[]>(initialTaskList as Task[])
+  const [showAddEditModal, setShowAddEditModal] = useState(false)
   const showDeleteModal = false
+
+  const handleAddTask = (title: string, priority: "high" | "medium" | "low") => {
+    const newTask: Task = {
+      id: Date.now().toString(),
+      title,
+      priority,
+      status: "To Do",
+      progress: 0,
+    }
+    setTasks([newTask, ...tasks]) // Add new task at the beginning
+    setShowAddEditModal(false)
+  }
+
   return (
     <div className="container">
       <div className="page-wrapper">
         <div className="top-title">
           <h2>Task List</h2>
-          <Button title="Add Task" icon={<Add />} onClick={() => {}} />
+          <Button title="Add Task" icon={<Add />} onClick={() => setShowAddEditModal(true)} />
         </div>
         <div className="task-container">
-          {taskList.map((task) => (
-            <TaskCard task={task} />
+          {tasks.map((task) => (
+            <TaskCard key={task.id} task={task} />
           ))}
         </div>
       </div>
-      {showAddEditModal && <AddEditTaskForm />}
+      {showAddEditModal && <AddEditTaskForm onClose={() => setShowAddEditModal(false)} onSave={handleAddTask} />}
       {showDeleteModal && <DeleteModal />}
     </div>
   )

task-list/src/components/AddEditTaskForm/index.tsx

@@ -1,32 +1,63 @@
 import classNames from "classnames"
+import { useState } from "react"
 import { ReactComponent as Close } from "../../assets/icons/close.svg"
 import Button from "../Button"
 import Input from "../Input"
 import Modal from "../Modal"
 import "./style.scss"
 
-const AddEditTaskForm = () => {
+type AddEditTaskFormProps = {
+  onClose: () => void
+  onSave: (title: string, priority: "high" | "medium" | "low") => void
+}
+
+const AddEditTaskForm = ({ onClose, onSave }: AddEditTaskFormProps) => {
+  const [title, setTitle] = useState("")
+  const [priority, setPriority] = useState<"high" | "medium" | "low">("medium")
+
+  // Check if title is valid (not empty and not just whitespace)
+  const isValidTitle = title.trim().length > 0
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (isValidTitle) {
+      onSave(title.trim(), priority)
+    }
+  }
+
   return (
     <Modal>
-      <form>
+      <form onSubmit={handleSubmit}>
         <div className="add-edit-modal">
           <div className="flx-between">
             <span className="modal-title">Add Task </span>
-            <Close className="cp" />
+            <Close className="cp" onClick={onClose} />
           </div>
-          <Input label="Task" placeholder="Type your task here..." onChange={() => {}} name="title" value="" />
+          <Input
+            label="Task"
+            placeholder="Type your task here..."
+            onChange={(e) => setTitle(e.target.value)}
+            name="title"
+            value={title}
+          />
           <div className="modal-priority">
             <span>Priority</span>
             <ul className="priority-buttons">
-              {["high", "medium", "low"].map((priority) => (
-                <li key={priority} className={classNames(`${priority}-selected`, priority)}>
-                  {priority}
+              {(["high", "medium", "low"] as const).map((priorityOption) => (
+                <li
+                  key={priorityOption}
+                  className={classNames(priorityOption, {
+                    [`${priorityOption}-selected`]: priority === priorityOption,
+                  })}
+                  onClick={() => setPriority(priorityOption)}
+                >
+                  {priorityOption}
                 </li>
               ))}
             </ul>
           </div>
           <div className="flx-right mt-50">
-            <Button title="Add" onClick={() => {}} />
+            <Button title="Add" onClick={handleSubmit} disabled={!isValidTitle} />
           </div>
         </div>
       </form>

task-list/src/components/LinearProgressBar/index.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react"
+import "./style.scss"
+
+interface Props {
+  percentage: number
+}
+
+const LinearProgressBar: FC<Props> = ({ percentage }) => {
+  return (
+    <div className="linear-progress-container">
+      <div className="linear-progress-bar">
+        <div className="linear-progress-fill" style={{ width: `${percentage}%` }} />
+      </div>
+      <span className="linear-progress-text">{percentage}%</span>
+    </div>
+  )
+}
+
+export default LinearProgressBar

task-list/src/components/LinearProgressBar/style.scss

@@ -0,0 +1,33 @@
+@use "../../styles/index.scss" as *;
+
+.linear-progress-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 120px;
+}
+
+.linear-progress-bar {
+  flex: 1;
+  height: 8px;
+  background-color: #e5e6e9;
+  border-radius: 10px;
+  overflow: hidden;
+  position: relative;
+}
+
+.linear-progress-fill {
+  height: 100%;
+  background-color: #713fff;
+  border-radius: 10px;
+  transition: width 0.3s ease;
+}
+
+.linear-progress-text {
+  font-size: 12px;
+  font-weight: 600;
+  color: $primary-color;
+  min-width: 35px;
+  text-align: right;
+}
+

task-list/src/components/TaskCard/index.tsx

@@ -1,11 +1,11 @@
 import classNames from "classnames"
 import { ReactComponent as DeleteIcon } from "../../assets/icons/delete.svg"
 import { ReactComponent as EditIcon } from "../../assets/icons/edit.svg"
-import CircularProgressBar from "../CircularProgressBar"
+import LinearProgressBar from "../LinearProgressBar"
 import "./style.scss"
 
 const TaskCard = ({ task }: any) => {
-  const { id, title, priority, status, progress } = task
+  const { title, priority, status, progress } = task
 
   return (
     <div className="task-card">
@@ -21,7 +21,7 @@ const TaskCard = ({ task }: any) => {
         <button className="status">{status}</button>
       </div>
       <div className="progress">
-        <CircularProgressBar strokeWidth={2} sqSize={24} percentage={progress} />
+        <LinearProgressBar percentage={progress} />
       </div>
       <div className="actions">
         <EditIcon className="mr-20 cp" />

task-list/src/components/TaskCard/style.scss

@@ -78,8 +78,10 @@
 }
 
 .progress {
+  min-width: 150px;
   @include breakpoints.devices(sm) {
     margin-top: 15px;
+    width: 100%;
   }
 }