beth-stack-example/src/components/todos.tsx

59 lines
1.4 KiB
TypeScript

import type { Todo } from "../db/todo";
import Html from "@kitajs/html";
export function TodoItem({ content, completed, id }: Todo) {
return (
<div class="flex flex-row space-x-3">
<p>{content}</p>
<input
type="checkbox"
checked={completed}
hx-post={`/todos/toggle/${id}`}
hx-swap="outerHTML"
hx-target="closest div"
/>
<button
class="text-red-500"
hx-delete={`/todos/${id}`}
hx-swap="outerHTML"
hx-target="closest div"
>
X
</button>
</div>
);
}
export function TodoList({ todos }: { todos: Todo[] }) {
return (
<div>
{todos.map((todo) => (
<TodoItem {...todo} />
))}
<TodoForm />
</div>
);
}
export function TodoForm() {
return (
<form
class="flex flex-row space-x-3"
hx-post="/todos"
hx-swap="beforebegin"
_="on submit target.reset()"
>
<select name="content" class="border border-black">
<option value="" disabled="true" selected="true">
Select a Todo
</option>
<option value="beth">Learn the BETH stack</option>
<option value="vim">Learn vim</option>
<option value="like">Like the video</option>
<option value="sub">Subscribe to Ethan</option>
</select>
<button type="submit">Add</button>
</form>
);
}