Build a _Today I Learned_ collector

Here’s a simple “Today I Learned” (TIL) collector app built in React. It allows users to input a short learning from their day, saves it locally, and displays a list of entries.

javascript
CopyEdit
// TILCollector.jsx
import React, { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

const TILCollector = () => {
  const [entry, setEntry] = useState("");
  const [tilList, setTilList] = useState([]);

  // Load from localStorage on mount
  useEffect(() => {
    const stored = JSON.parse(localStorage.getItem("tilList")) || [];
    setTilList(stored);
  }, []);

  // Save to localStorage on change
  useEffect(() => {
    localStorage.setItem("tilList", JSON.stringify(tilList));
  }, [tilList]);

  const handleAdd = () => {
    if (!entry.trim()) return;
    const newEntry = {
      id: Date.now(),
      text: entry,
      date: new Date().toLocaleDateString()
    };
    setTilList([newEntry, ...tilList]);
    setEntry("");
  };

  const handleDelete = (id) => {
    const updated = tilList.filter(item => item.id !== id);
    setTilList(updated);
  };

  return (
    <div className="max-w-2xl mx-auto p-4 space-y-6">
      <h1 className="text-3xl font-bold text-center">Today I Learned</h1>
      <div className="space-y-2">
        <Textarea
          placeholder="What did you learn today?"
          value={entry}
          onChange={(e) => setEntry(e.target.value)}
          className="min-h-[100px]"
        />
        <Button onClick={handleAdd} className="w-full">Add Entry</Button>
      </div>
      <div className="space-y-4">
        {tilList.length === 0 ? (
          <p className="text-center text-gray-500">No entries yet.</p>
        ) : (
          tilList.map((item) => (
            <Card key={item.id} className="relative">
              <CardContent className="p-4 space-y-2">
                <p className="text-sm text-gray-500">{item.date}</p>
                <p>{item.text}</p>
                <Button
                  variant="outline"
                  size="sm"
                  className="absolute top-2 right-2"
                  onClick={() => handleDelete(item.id)}
                >
                  Delete
                </Button>
              </CardContent>
            </Card>
          ))
        )}
      </div>
    </div>
  );
};

export default TILCollector;

Key Features:

• Users write what they learned.

• Saves entries in localStorage for persistence.

• Allows deletion of entries.

• Minimal UI using shadcn/ui components.

Let me know if you’d like this extended with features like tagging, search, Markdown support, or export options.