diff --git a/src/components/enum-select.tsx b/src/components/enum-select.tsx index 0820ec8..26cba22 100644 --- a/src/components/enum-select.tsx +++ b/src/components/enum-select.tsx @@ -1,10 +1,9 @@ import { } from 'react' -export function EnumSelect({ name, entries }: { name: string; entries: Record }): JSX.Element { +export function EnumSelect({ name, entries, value }: { name: string; entries: Record, value?: string }): JSX.Element { return ( ); } - diff --git a/src/components/task-list.tsx b/src/components/task-list.tsx deleted file mode 100644 index 4300f8f..0000000 --- a/src/components/task-list.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { } from 'react' -import { taskTypes, taskStatuses } from './consts'; - -export function TaskList({ tasks }: { tasks: TodoTasks }): JSX.Element { - return ( - - - - - - - - - - {tasks.map(task => - - - - )} - -
TipasPavadinimasStatusas
{taskTypes[task.type]}{task.title}{taskStatuses[task.status]}
- ); -} - diff --git a/src/components/task-row.tsx b/src/components/task-row.tsx new file mode 100644 index 0000000..d220a91 --- /dev/null +++ b/src/components/task-row.tsx @@ -0,0 +1,44 @@ +import { useState } from 'react' +import { taskTypes, taskStatuses } from './consts'; +import { EnumSelect } from './enum-select'; + +export function TaskRow({ task, updateTask }: { task: TodoTask, updateTask: (task: TodoTask) => void }): JSX.Element { + const [edit, setEdit] = useState(false); + + return edit ? ( + + {} + + {} + + + + + + ) : ( + + {taskTypes[task.type]} + {task.title} + {taskStatuses[task.status]} + + + + + ) +} \ No newline at end of file diff --git a/src/components/task-table.tsx b/src/components/task-table.tsx new file mode 100644 index 0000000..7eb4625 --- /dev/null +++ b/src/components/task-table.tsx @@ -0,0 +1,21 @@ +import { } from 'react' +import { TaskRow } from './task-row'; + +export function TaskTable({ tasks }: { tasks: TodoTasks }): JSX.Element { + return ( + + + + + + + + + + + {tasks.map(task => { }} />)} + +
TipasPavadinimasStatusasVeiksmai
+ ); +} + diff --git a/src/index.css b/src/index.css index 0435fc5..c116d68 100644 --- a/src/index.css +++ b/src/index.css @@ -17,11 +17,11 @@ } td { - @apply border-b border-slate-100 dark:border-slate-700 p-4 pl-8 text-slate-500 dark:text-slate-400; + @apply border-b border-slate-100 dark:border-slate-700 p-4 pr-0 text-slate-500 dark:text-slate-400; } select, input { - @apply w-full rounded-lg border-0 px-3 py-2 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-500 focus:outline-none hover:ring-indigo-500 transition-shadow duration-700; + @apply h-14 w-full rounded-lg border-0 px-3 py-4 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-500 focus:outline-none hover:ring-indigo-500 transition-shadow duration-700; } .accordion-title { diff --git a/src/routes/list.tsx b/src/routes/list.tsx index e535b95..71c0e63 100644 --- a/src/routes/list.tsx +++ b/src/routes/list.tsx @@ -1,6 +1,6 @@ import { useState } from 'react' import { AccordionItem } from '../components/accordion-item'; -import { TaskList } from '../components/task-list'; +import { TaskTable } from '../components/task-table'; import { TaskForm } from '../components/task-form'; function App() { @@ -32,7 +32,7 @@ function App() { return ( <> handleAccordion(0)}> - + handleAccordion(1)}>