88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
import { useState } from "react";
|
|
import type { NoteTask } from "@/lib/types";
|
|
|
|
export function TaskReviewPanel({
|
|
tasks,
|
|
onCreate,
|
|
isCreating = false,
|
|
}: {
|
|
tasks: NoteTask[];
|
|
onCreate: (input: { title: string; description?: string }) => Promise<void>;
|
|
isCreating?: boolean;
|
|
}) {
|
|
const [title, setTitle] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
|
|
async function handleCreateTask() {
|
|
if (!title.trim()) {
|
|
return;
|
|
}
|
|
|
|
await onCreate({
|
|
title: title.trim(),
|
|
description: description.trim() || undefined,
|
|
});
|
|
|
|
setTitle("");
|
|
setDescription("");
|
|
}
|
|
|
|
return (
|
|
<section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
|
|
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", alignItems: "center" }}>
|
|
<div style={{ fontWeight: 700 }}>Task extraction review</div>
|
|
<span className="badge">backend-backed review</span>
|
|
</div>
|
|
<div className="surface-muted" style={{ padding: "var(--nl-space-3)", display: "grid", gap: "var(--nl-space-3)" }}>
|
|
<div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
|
|
<label htmlFor="task-title" style={{ color: "var(--nl-text-secondary)" }}>
|
|
Add task
|
|
</label>
|
|
<input
|
|
id="task-title"
|
|
className="input-shell"
|
|
value={title}
|
|
onChange={(event) => setTitle(event.target.value)}
|
|
placeholder="Task title"
|
|
/>
|
|
</div>
|
|
<textarea
|
|
className="input-shell"
|
|
value={description}
|
|
onChange={(event) => setDescription(event.target.value)}
|
|
placeholder="Description"
|
|
style={{ minHeight: 96, resize: "vertical" }}
|
|
/>
|
|
<div style={{ display: "flex", justifyContent: "flex-end" }}>
|
|
<button
|
|
type="button"
|
|
disabled={isCreating}
|
|
onClick={() => {
|
|
void handleCreateTask();
|
|
}}
|
|
style={{
|
|
border: "none",
|
|
borderRadius: "var(--nl-radius-md)",
|
|
padding: "8px 12px",
|
|
background: "var(--nl-accent-primary)",
|
|
color: "var(--nl-text-primary)",
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
{isCreating ? "Adding…" : "Add task"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{tasks.map((task) => (
|
|
<div key={task.id} className="surface-muted" style={{ padding: "var(--nl-space-3)", display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", alignItems: "center" }}>
|
|
<div style={{ display: "grid", gap: 4 }}>
|
|
<strong>{task.title}</strong>
|
|
<span style={{ color: "var(--nl-text-secondary)" }}>Source: {task.source}</span>
|
|
</div>
|
|
<span style={{ color: "var(--nl-text-secondary)" }}>{task.status}</span>
|
|
</div>
|
|
))}
|
|
</section>
|
|
);
|
|
}
|