"use client"; import { Calendar, Loader2, Plus, X } from "lucide-react"; import { useState } from "react"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Field, FieldContent, FieldLabel } from "@/registry/new-york/ui/field"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/registry/new-york/ui/input-group"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/registry/new-york/ui/select"; import { Separator } from "@/registry/new-york/ui/separator"; import { Textarea } from "@/registry/new-york/ui/textarea"; import type { TaskPriority, TaskStatus } from "./task-list"; export interface TaskCreateProps { onSubmit?: (data: { title: string; description?: string; status: TaskStatus; priority: TaskPriority; dueDate?: Date; assigneeIds?: string[]; tags?: string[]; projectId?: string; }) => Promise; onCancel?: () => void; className?: string; defaultStatus?: TaskStatus; defaultProjectId?: string; availableAssignees?: Array<{ id: string; name: string; avatar?: string }>; availableProjects?: Array<{ id: string; name: string }>; isLoading?: boolean; } export default function TaskCreate({ onSubmit, onCancel, className, defaultStatus = "todo", defaultProjectId, availableAssignees = [], availableProjects = [], isLoading = false, }: TaskCreateProps) { const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [status, setStatus] = useState(defaultStatus); const [priority, setPriority] = useState("medium"); const [dueDate, setDueDate] = useState(""); const [selectedAssignees, setSelectedAssignees] = useState([]); const [tags, setTags] = useState([]); const [tagInput, setTagInput] = useState(""); const [projectId, setProjectId] = useState(defaultProjectId || ""); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (!title.trim()) return; await onSubmit?.({ title: title.trim(), description: description.trim() || undefined, status, priority, dueDate: dueDate ? new Date(dueDate) : undefined, assigneeIds: selectedAssignees.length > 0 ? selectedAssignees : undefined, tags: tags.length > 0 ? tags : undefined, projectId: projectId || undefined, }); // Reset form setTitle(""); setDescription(""); setStatus(defaultStatus); setPriority("medium"); setDueDate(""); setSelectedAssignees([]); setTags([]); setTagInput(""); setProjectId(defaultProjectId || ""); }; const handleAddTag = () => { if (tagInput.trim() && !tags.includes(tagInput.trim())) { setTags([...tags, tagInput.trim()]); setTagInput(""); } }; const handleRemoveTag = (tagToRemove: string) => { setTags(tags.filter((tag) => tag !== tagToRemove)); }; const handleToggleAssignee = (assigneeId: string) => { setSelectedAssignees((prev) => prev.includes(assigneeId) ? prev.filter((id) => id !== assigneeId) : [...prev, assigneeId] ); }; return (

Create Task Add a new task to your project

Title * setTitle(e.target.value)} placeholder="Task title…" required value={title} /> Description

setDescription(e.target.value)}
                placeholder="Task description…"
                rows={4}
                value={description}
              />
            </FieldContent>
          </Field>

<div className="grid gap-4 sm:grid-cols-2">
            <Field>
              <FieldLabel htmlFor="status">Status</FieldLabel>
              <FieldContent>
                <Select
                  onValueChange={(value) => setStatus(value as TaskStatus)}
                  value={status}
                >
                  <SelectTrigger id="status">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="todo">To Do</SelectItem>
                    <SelectItem value="in_progress">In Progress</SelectItem>
                    <SelectItem value="done">Done</SelectItem>
                    <SelectItem value="cancelled">Cancelled</SelectItem>
                  </SelectContent>
                </Select>
              </FieldContent>
            </Field>

<Field>
              <FieldLabel htmlFor="priority">Priority</FieldLabel>
              <FieldContent>
                <Select
                  onValueChange={(value) => setPriority(value as TaskPriority)}
                  value={priority}
                >
                  <SelectTrigger id="priority">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="low">Low</SelectItem>
                    <SelectItem value="medium">Medium</SelectItem>
                    <SelectItem value="high">High</SelectItem>
                    <SelectItem value="urgent">Urgent</SelectItem>
                  </SelectContent>
                </Select>
              </FieldContent>
            </Field>
          </div>

<Field>
            <FieldLabel htmlFor="dueDate">Due Date</FieldLabel>
            <FieldContent>
              <InputGroup>
                <InputGroupAddon>
                  <Calendar className="size-4" />
                </InputGroupAddon>
                <InputGroupInput
                  id="dueDate"
                  onChange={(e) => setDueDate(e.target.value)}
                  type="date"
                  value={dueDate}
                />
              </InputGroup>
            </FieldContent>
          </Field>

{availableProjects.length > 0 && (
            <Field>
              <FieldLabel htmlFor="project">Project</FieldLabel>
              <FieldContent>
                <Select
                  onValueChange={setProjectId}
                  value={projectId || undefined}
                >
                  <SelectTrigger id="project">
                    <SelectValue placeholder="Select project" />
                  </SelectTrigger>
                  <SelectContent>
                    {availableProjects.map((project) => (
                      <SelectItem key={project.id} value={project.id}>
                        {project.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </FieldContent>
            </Field>
          )}

{availableAssignees.length > 0 && (
            <Field>
              <FieldLabel>Assignees</FieldLabel>
              <FieldContent>
                <div className="flex flex-wrap gap-2">
                  {availableAssignees.map((assignee) => {
                    const isSelected = selectedAssignees.includes(assignee.id);
                    return (
                      <Button
                        key={assignee.id}
                        onClick={() => handleToggleAssignee(assignee.id)}
                        size="sm"
                        type="button"
                        variant={isSelected ? "default" : "outline"}
                      >
                        {assignee.name}
                      </Button>
                    );
                  })}
                </div>
              </FieldContent>
            </Field>
          )}

<Field>
            <FieldLabel htmlFor="tags">Tags</FieldLabel>
            <FieldContent>
              <div className="flex flex-col gap-2">
                <div className="flex gap-2">
                  <InputGroup>
                    <InputGroupInput
                      id="tags"
                      onChange={(e) => setTagInput(e.target.value)}
                      onKeyDown={(e) => {
                        if (e.key === "Enter") {
                          e.preventDefault();
                          handleAddTag();
                        }
                      }}
                      placeholder="Add tag…"
                      value={tagInput}
                    />
                  </InputGroup>
                  <Button
                    onClick={handleAddTag}
                    size="icon"
                    type="button"
                    variant="outline"
                  >
                    <Plus className="size-4" />
                  </Button>
                </div>
                {tags.length > 0 && (
                  <div className="flex flex-wrap gap-2">
                    {tags.map((tag) => (
                      <div
                        className="flex items-center gap-1 rounded-full border bg-secondary px-2 py-1 text-sm"
                        key={tag}
                      >
                        <span>{tag}</span>
                        <button
                          aria-label={`Remove ${tag}`}
                          onClick={() => handleRemoveTag(tag)}
                          type="button"
                        >
                          <X className="size-3" />
                        </button>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </FieldContent>
          </Field>

<div className="flex justify-end gap-2">
            {onCancel && (
              <Button
                disabled={isLoading}
                onClick={onCancel}
                type="button"
                variant="outline"
              >
                Cancel
              </Button>
            )}
            <Button disabled={isLoading || !title.trim()} type="submit">
              {isLoading ? (
                <>
                  <Loader2 className="size-4 animate-spin" />
                  Creating…
                </>
              ) : (
                <>
                  <Plus className="size-4" />
                  Create Task
                </>
              )}
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  );
}
</article></body></html>

Example Usage