Task list route

src/components/accordion-item.tsx

@@ -0,0 +1,15 @@
+import { } from 'react'
+
+export function AccordionItem({ title, children, isOpen, onClick }: { title: string; children: JSX.Element; isOpen: boolean, onClick: () => void; }) {
+  return (
+    <>
+      <button type="button" className="accordion-title" onClick={onClick}>
+        <span>{title}</span>
+        <svg className={"w-3 h-3 shrink-0" + (isOpen ? "" : " rotate-180")} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5 5 1 1 5" />
+        </svg>
+      </button>
+      {isOpen && <div className="accordion-body">{children}</div>}
+    </>
+  );
+}

src/components/consts.ts

@@ -0,0 +1,11 @@
+export const taskTypes = {
+  task: 'Užduotis',
+  bug: "Bug'as",
+};
+
+export const taskStatuses = {
+  paused: 'Laukia',
+  'in progress': 'Daroma',
+  testing: 'Testuojama',
+  released: 'Padaryta',
+};

src/components/enum-select.tsx

@@ -0,0 +1,10 @@
+import { } from 'react'
+
+export function EnumSelect({ name, entries }: { name: string; entries: Record<string, string> }): JSX.Element {
+  return (
+    <select id={name} name={name}>
+      {Object.entries(entries).map(([value, name]) => <option key={value} value={value}>{name}</option>)}
+    </select>
+  );
+}
+

src/components/task-form.tsx

@@ -0,0 +1,63 @@
+import { } from 'react'
+import { taskTypes, taskStatuses } from './consts';
+import { EnumSelect } from './enum-select';
+
+export function TaskForm({ tasks, setTasks, setExpanded }: { tasks: TodoTasks, setTasks: (t: TodoTasks) => void, setExpanded: (p: number) => void }): JSX.Element {
+  return (
+    <form className="grid grid-cols-1 gap-y-8" onSubmit={event => {
+      event.preventDefault();
+
+      const data = Object.fromEntries(new FormData(event.currentTarget));
+      const newTask = {
+        id: tasks.reduce((max, row) => row.id > max ? row.id : max, 1) + 1,
+        type: data.type as TaskType,
+        title: data.title as string,
+        status: data.status as TaskStatus,
+      };
+
+
+      if (data.insert) {
+        setTasks([newTask, ...tasks]);
+      } else {
+        setTasks([...tasks, newTask]);
+      }
+
+      setExpanded(0);
+    }}>
+      <div>
+        <label htmlFor="type">Tipas</label>
+        <div className="mt-2">
+          <EnumSelect name="type" entries={taskTypes} />
+        </div>
+      </div>
+      <div>
+        <label htmlFor="title">Pavadinimas</label>
+        <div className="mt-2">
+          <input type="text" id="title" name="title" className="" />
+        </div>
+      </div>
+      <div>
+        <label htmlFor="type">Statusas</label>
+        <div className="mt-2">
+          <EnumSelect name="status" entries={taskStatuses} />
+        </div>
+      </div>
+      <div className="flex items-center mb-4">
+        <input id="insert" name="insert" type="checkbox" className="w-5 h-5 accent-indigo-500" />
+        <label htmlFor="insert" className="ms-2">Įterpti pradžioje</label>
+      </div>
+      <div className="mt-2 flex items-center justify-end gap-x-6">
+        <button type="button" className="font-semibold" onClick={() => setExpanded(0)}>
+          Cancel
+        </button>
+        <button
+          type="submit"
+          className="bg-indigo-500 rounded-lg px-3 py-2 font-semibold text-white hover:bg-indigo-600"
+        >
+          Save
+        </button>
+      </div>
+    </form>
+  );
+}
+

src/components/task-list.tsx

@@ -0,0 +1,24 @@
+import { } from 'react'
+import { taskTypes, taskStatuses } from './consts';
+
+export function TaskList({ tasks }: { tasks: TodoTasks }): JSX.Element {
+  return (
+    <table className="w-full">
+      <thead>
+        <tr>
+          <th>Tipas</th>
+          <th>Pavadinimas</th>
+          <th>Statusas</th>
+        </tr>
+      </thead>
+      <tbody>
+        {tasks.map(task => <tr key={task.id}>
+          <td>{taskTypes[task.type]}</td>
+          <td>{task.title}</td>
+          <td>{taskStatuses[task.status]}</td>
+        </tr>)}
+      </tbody>
+    </table>
+  );
+}
+