Technigo · MalLunBar · May 21, 2025 · May 21, 2025 · May 21, 2025 · May 21, 2025
diff --git a/index.html b/index.html
@@ -1,16 +1,40 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Todo</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script
-      type="module"
-      src="./src/main.jsx">
-    </script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link
+    rel="icon"
+    type="image/svg+xml"
+    href="./vite.svg"
+  />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  />
+  <link
+    rel="preconnect"
+    href="https://fonts.googleapis.com"
+  >
+  <link
+    rel="preconnect"
+    href="https://fonts.gstatic.com"
+    crossorigin
+  >
+  <link
+    href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+    rel="stylesheet"
+  >
+  <title>Todo</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script
+    type="module"
+    src="./src/main.jsx"
+  >
+  </script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -10,8 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.7",
+    "date-fns": "^4.1.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.7",
+    "zustand": "^5.0.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

diff --git a/public/assets/check-mark.png b/public/assets/check-mark.png
diff --git a/public/assets/close.png b/public/assets/close.png
diff --git a/public/assets/filter.png b/public/assets/filter.png
diff --git a/public/assets/logo1.png b/public/assets/logo1.png
diff --git a/public/assets/note-background-smaller.webp b/public/assets/note-background-smaller.webp
diff --git a/public/assets/note-background.webp b/public/assets/note-background.webp
diff --git a/public/assets/set.png b/public/assets/set.png
diff --git a/public/assets/signature.png b/public/assets/signature.png
diff --git a/public/assets/user.png b/public/assets/user.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,9 @@
+import { AppLayout } from "./components/AppLayout"
+
 export const App = () => {
   return (
-    <h1>React Boilerplate</h1>
+    <>
+      <AppLayout />
+    </>
   )
 }
diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
@@ -0,0 +1,12 @@
+import { HeroMessage } from "./HeroMessage"
+import { TaskArea } from "./TaskArea"
+
+export const AppLayout = () => {
+  return (
+
+    <div className="flex flex-col lg:flex-row max-w-screen h-full bg-white m-[5px] p-[5px] rounded-[20px]">
+      <HeroMessage />
+      <TaskArea />
+    </div>
+  )
+}
diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
@@ -0,0 +1,8 @@
+export const EmptyState = () => {
+  return (
+    <div className="bg-white opacity-80 p-12 text-center rounded-2xl mt-8 text-black mx-auto">
+        <p className="text-xl">No tasks yet</p>
+        <p className="text-md">Click “New Task +” to get started</p>
+      </div>
+  )
+}
diff --git a/src/components/HeroMessage.tsx b/src/components/HeroMessage.tsx
@@ -0,0 +1,21 @@
+
+
+export const HeroMessage = () => {
+  return (
+    <div>
+      <header className="flex justify-between items-center px-4 pt-2">
+        <img
+          src="../assets/logo1.png" alt="Logo"
+          className="w-full max-w-[100px] h-auto" />
+        <img
+          src="../assets/user.png" alt="User"
+          className="w-6 h-auto" />
+      </header>
+      <div className="flex flex-col-reverse py-10 px-12 sm:py-24 sm:px-20 max-w-[400px] sm:max-w-[500px] md:max-w-[600px] m-auto mx-auto lg:min-w-[500px] lg:px-12 lg:py-40">
+        <h1 className="font-medium text-3xl sm:text-5xl md:text-6xl">From Clutter to <span className="text-[#FFC116] bg-black px-2 rounded-full">Done</span> with Done-ly</h1>
+        <p className="font-light text-base sm:text-xl">Make it simple</p>
+
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/TaskArea.tsx b/src/components/TaskArea.tsx
@@ -0,0 +1,67 @@
+import { TaskButtons } from "./TaskButtons"
+import { useState } from "react"
+import { TaskForm } from "./TaskForm"
+import { TaskList } from "./TaskList"
+import { EmptyState } from "./EmptyState"
+import { useTaskStore } from "../stores/useTaskStore"
+import { TaskCount } from "./TaskCount"
+
+
+export const TaskArea = () => {
+  const [showForm, setShowForm] = useState(false)
+
+  const [filter, setFilter] = useState<"all" | "completed" | "uncompleted">("all")
+  const tasks = useTaskStore((state) => state.tasks)
+
+  const filteredTasks = tasks.filter((task) => {
+    if (filter === "completed") return task.completed
+    if (filter === "uncompleted") return !task.completed
+    return true // For "all" filter
+  })
+
+  return (
+    <div className="flex flex-col gap-10 bg-[url(/assets/note-background-smaller.webp)] bg-cover bg-no-repeat bg-center h-screen w-full rounded-[20px] px-3 py-4 sm:bg-[url(/assets/note-background.webp)]">
+
+      <div className="flex justify-between items-start">
+        <TaskButtons
+          text="New Task +"
+          onClick={() => setShowForm(true)}
+        />
+
+        {tasks.length > 0 && (
+          <div className="flex flex-col gap-1 ">
+            {["all", "completed", "uncompleted"].map((type) => (
+              <button
+                key={type}
+                onClick={() => setFilter(type as "all" | "completed" | "uncompleted")}
+                className={`px-2 py-1 rounded-2xl ${filter === type ? "bg-violet-400 text-white" : "bg-white text-black"}`}
+              >
+                {type}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+
+      {showForm && (
+        <div className="flex justify-center">
+          <TaskForm onClose={() => setShowForm(false)} />
+        </div>
+      )}
+
+      {tasks.length === 0 && !showForm && <EmptyState />}
+
+      {
+        filteredTasks.length > 0 && (
+          <div className="flex flex-col items-center">
+            <div className="scrollbar-always-show max-h-[60vh] w-full px-1">
+              <TaskList tasks={filteredTasks} />
+            </div>
+            <TaskCount />
+          </div>
+        )
+      }
+    </div >
+  )
+}
diff --git a/src/components/TaskButtons.tsx b/src/components/TaskButtons.tsx
@@ -0,0 +1,20 @@
+type TaskButtonsProps = {
+  text: string
+  onClick: () => void
+}
+
+
+export const TaskButtons = ({ text, onClick }: TaskButtonsProps) => {
+  console.log("TaskButtons rendered")
+
+  return (
+    <>
+      <button
+        type="button"
+        className="bg-white px-3 py-1 rounded-[20px] font-medium max-w-40 hover:bg-[#FFDEA6] sm:text-lg"
+        onClick={onClick}>
+        {text}
+      </button>
+    </>
+  )
+} 
diff --git a/src/components/TaskCount.tsx b/src/components/TaskCount.tsx
@@ -0,0 +1,17 @@
+import { useTaskStore } from "../stores/useTaskStore"
+
+export const TaskCount = () => {
+  const totalTasks = useTaskStore((state) => state.tasks.length)
+  const completedTasks = useTaskStore((state) =>
+    state.tasks.filter((task) => task.completed).length
+  )
+  const uncompletedTasks = useTaskStore((state) =>
+    state.tasks.filter((task) => !task.completed).length
+  )
+
+  return (
+    <div className="bg-white px-3 py-1 rounded-lg mt-8 text-black mx-auto text-center font-semibold">
+      <p>Completed: {completedTasks}/{totalTasks}</p>
+    </div>
+  )
+}
diff --git a/src/components/TaskForm.tsx b/src/components/TaskForm.tsx
@@ -0,0 +1,84 @@
+import { useEffect, useState, useRef } from "react"
+import { useTaskStore } from "../stores/useTaskStore"
+
+type TaskFormProps = {
+  onClose: () => void
+}
+
+
+export const TaskForm = ({ onClose }: TaskFormProps) => {
+  const [text, setText] = useState("")
+  const [checked, setChecked] = useState(false)
+  const [error, setError] = useState("")
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const addTask = useTaskStore((state) => state.addTask)
+
+  useEffect(() => {
+    textareaRef.current?.focus()
+  }, [])
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (text.trim() === "") {
+      setError("Please enter a task")
+      textareaRef.current?.focus()
+      return
+    }
+    addTask(text)
+    setText("")
+    setChecked(false)
+    onClose()
+  }
+
+  return (
+
+    <form
+      onSubmit={handleSubmit}
+      className="flex flex-col gap-2">
+
+      <div className="mt-2 flex justify-between bg-white rounded-[15px] mx-auto sm:w-[450px]">
+        <label htmlFor="task-input" className="sr-only">Task text</label>
+        <textarea
+          id="task-input"
+          aria-describedby={error ? "task-error" : undefined}
+          ref={textareaRef}
+          rows={1}
+          value={text}
+          onChange={(e) => {
+            setText(e.target.value)
+            if (error) setError("")
+          }}
+          className="focus:outline-none p-2 resize-none mx-auto sm:w-[450px]"
+          placeholder="Write a task..."
+          onInput={(e) => {
+            e.currentTarget.style.height = "auto"
+            e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`
+          }}
+        />
+
+        <div className="flex flex-col justify-between gap-4 items-end p-2">
+
+          <button
+            type="button"
+            className="rounded p-2"
+            onClick={onClose}>
+            <img
+              src="/assets/close.png"
+              alt="Close"
+              className="w-4 h-4 object-contain" />
+          </button>
+
+          <button
+            type="submit"
+            className="font-medium rounded-2xl py-1 px-2 bg-[#FFDEA6] sm:py-2 sm:px-4 hover:bg-[#FFC116] sm:text-lg">
+            Done
+          </button>
+        </div>
+      </div>
+      {error && <p
+        id="task-error"
+        className="text-red-500 bg-white px-3 font-bold text-sm mt-1 mx-2 rounded-lg sm:text-base">{error}</p>}
+    </form>
+
+  )
+}
diff --git a/src/components/TaskList.tsx b/src/components/TaskList.tsx
@@ -0,0 +1,45 @@
+import { useTaskStore } from "../stores/useTaskStore"
+import { format } from "date-fns"
+import { Task } from "../stores/useTaskStore"
+
+interface TaskListProps {
+  tasks: Task[]
+}
+
+export const TaskList: React.FC<TaskListProps> = ({ tasks }) => {
+  const removeTask = useTaskStore((state) => state.removeTask)
+  const toggleTask = useTaskStore((state) => state.toggleTask)
+
+  return (
+
+    <ul className="flex flex-col gap-3 px-2 max-w-[600px] ">
+      {tasks.map((task) => (
+        <li key={task.id} className="flex items-center gap-3">
+          <input
+            type="checkbox"
+            checked={task.completed}
+            onChange={() => toggleTask(task.id)}
+            className="w-5 h-5 accent-black"
+          />
+          <div className="bg-white text-lg rounded-xl p-2 flex items-start justify-between w-full min-w-[200px] max-w-full">
+            <div className="flex flex-col gap-1 min-w-0 w-full">
+              <p className="text-sm text-gray-500">
+                {format(new Date(task.createdAt), "yyyy-MM-dd")}
+              </p>
+              <p className={`flex-1 break-words whitespace-pre-wrap ${task.completed ? "line-through text-gray-400" : ""}`} style={{ wordBreak: "break-word" }}>
+                {task.text}
+              </p>
+            </div>
+            <button
+              onClick={() => removeTask(task.id)} className="ml-2 flex-shrink-0">
+              <img
+                src="/assets/set.png"
+                alt="Delete task"
+                className="w-5 h-5 sm:w-6 sm:h-6 object-contain" />
+            </button>
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,19 @@
+@import "tailwindcss";
+
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Montserrat", sans-serif;
+  background-color: #EDEBEB;
+
 }
+
+/* Force scrollbars to always show */
+.scrollbar-always-show {
+  overflow-y: scroll;
+  scrollbar-width: auto; /* Firefox */
+  scrollbar-color: #888 #EDEBEB; /* Firefox */
+}
+
+.scrollbar-always-show::-webkit-scrollbar {
+  display: block; /* Chrome/Safari */
+
+}