Create a digital task inbox for rapid input

A digital task inbox is a lightweight interface designed for rapid task capture, helping users quickly input thoughts, to-dos, and action items before organizing them later. Here’s a simple and clean React component implementing a Digital Task Inbox using Tailwind CSS and ShadCN UI:

tsx
CopyEdit
// File: TaskInbox.tsx
import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Trash2, Inbox } from "lucide-react";
import { motion } from "framer-motion";

export default function TaskInbox() {
  const [task, setTask] = useState("");
  const [tasks, setTasks] = useState<string[]>([]);

  const handleAddTask = () => {
    if (task.trim() !== "") {
      setTasks([task, ...tasks]);
      setTask("");
    }
  };

  const handleDeleteTask = (index: number) => {
    const updatedTasks = tasks.filter((_, i) => i !== index);
    setTasks(updatedTasks);
  };

  return (
    <div className="max-w-xl mx-auto mt-10 p-4">
      <Card className="shadow-lg rounded-2xl">
        <CardContent className="p-6 space-y-4">
          <h2 className="text-2xl font-semibold flex items-center gap-2">
            <Inbox className="w-6 h-6 text-blue-500" /> Task Inbox
          </h2>
          <div className="flex gap-2">
            <Input
              placeholder="Quickly jot down a task..."
              value={task}
              onChange={(e) => setTask(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") handleAddTask();
              }}
            />
            <Button onClick={handleAddTask}>Add</Button>
          </div>
          <div className="space-y-2 max-h-64 overflow-y-auto">
            {tasks.length === 0 ? (
              <p className="text-muted-foreground text-sm">No tasks yet.</p>
            ) : (
              tasks.map((t, idx) => (
                <motion.div
                  key={idx}
                  className="flex justify-between items-center bg-muted p-3 rounded-xl shadow-sm"
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                >
                  <span>{t}</span>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => handleDeleteTask(idx)}
                  >
                    <Trash2 className="w-4 h-4 text-red-500" />
                  </Button>
                </motion.div>
              ))
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

Features:

• Rapid Input: Enter tasks and hit Enter or click Add.

• Inbox Style: Tasks are collected in an “unprocessed” list.

• Delete Functionality: Quickly remove unwanted entries.

• Minimal Design: Clean interface for distraction-free entry.

• Animations: Smooth Framer Motion transitions for task items.

Use Case:

Ideal for a GTD (Getting Things Done) workflow where users want to collect thoughts and process/organize later.

Let me know if you want to expand this with categories, drag-and-drop sorting, or backend integration.