Merge pull request #2 from bonz88/feat/add-task-page

feat/add-task-page

package.json

@@ -9,19 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.2.1",
+    "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.1.0"
+    "react-redux": "^9.1.0"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.0",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.0"
+    "typescript": "^5"
   }
 }

src/app/components/LevelSelector.tsx

@@ -0,0 +1,35 @@
+const levels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+type LevelSelectorProps = {
+  label: string;
+  onLevelChange: (level: number) => void;
+  priority?: number;
+  complexity?: number;
+};
+export default function LevelSelector({
+  label,
+  onLevelChange,
+  priority,
+  complexity,
+}: LevelSelectorProps) {
+  return (
+    <div className="flex flex-col gap-[6px] w-full">
+      <span className="text-sm sm:text-lg">{label}</span>
+      <span className="flex justify-between">
+        {levels.map((level) => (
+          <button
+            onClick={() => onLevelChange(level)}
+            className={`text-sm rounded-full size-6 sm:size-[30px] border-none focus:outline-none focus:ring-0 ${
+              priority === level || complexity === level
+                ? "bg-blue-500 text-white"
+                : "bg-blue-100"
+            }`}
+            key={level}
+          >
+            {level}
+          </button>
+        ))}
+      </span>
+    </div>
+  );
+}

src/app/components/TaskDueDateTime.tsx

@@ -0,0 +1,35 @@
+type TaskDueDateTimeProps = {
+  dueDate: string;
+  dueTime: string;
+  handleDueDate: (date: string) => void;
+  handleDueTime: (time: string) => void;
+};
+export default function TaskDueDateTime({
+  dueTime,
+  dueDate,
+  handleDueDate,
+  handleDueTime,
+}: TaskDueDateTimeProps) {
+  return (
+    <div className="flex gap-2">
+      <div className="w-1/2 flex flex-col gap-1">
+        <span className="text-sm sm:text-lg">Select Due Date</span>
+        <input
+          className="h-10 rounded-full border-0 outline-none p-4"
+          onChange={(e) => handleDueDate(e.target.value)}
+          value={dueDate}
+          type="date"
+        />
+      </div>
+      <div className="w-1/2 flex flex-col gap-1">
+        <span className="text-sm sm:text-lg">Select Due Time</span>
+        <input
+          className="h-10 rounded-full border-0 outline-none p-4"
+          onChange={(e) => handleDueTime(e.target.value)}
+          value={dueTime}
+          type="time"
+        />
+      </div>
+    </div>
+  );
+}