MyFavStuff/myfavstuff/app/add-item/page.js

// app/add-item/page.js
'use client';

import { useState, useTransition } from 'react';
import { createItem } from './actions'; // Server Action
import { useRouter } from 'next/navigation';

export default function AddItemPage() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState(null);
  const [successMessage, setSuccessMessage] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault();
    setError(null);
    setSuccessMessage('');
    const formData = new FormData(event.currentTarget);

    startTransition(async () => {
      const result = await createItem(formData);
      if (result.error) {
        setError(result.error);
      } else if (result.success) {
        setSuccessMessage(result.message);
        // Optionally clear the form or redirect
        event.target.reset(); // Clear form fields
        // router.push('/'); // Or redirect to homepage after a delay
        setTimeout(() => router.push('/'), 1500); // Redirect after 1.5s
      }
    });
  };

  return (
    <div className="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8 text-neutral-100">
      <header className="mb-8">
        <h1 className="text-3xl font-bold text-sky-400">Add New Favorite Item</h1>
        <p className="text-neutral-400 mt-1">
          Fill in the details below to add a new item to your collection.
        </p>
      </header>

      {error && (
        <div className="mb-4 p-3 bg-red-900 border border-red-700 text-red-100 rounded">
          <p className="font-semibold">Error:</p>
          <p>{error}</p>
        </div>
      )}
      {successMessage && (
        <div className="mb-4 p-3 bg-green-900 border border-green-700 text-green-100 rounded">
          <p className="font-semibold">Success:</p>
          <p>{successMessage}</p>
        </div>
      )}

      <form onSubmit={handleSubmit} className="space-y-6 bg-neutral-800 p-6 rounded-lg shadow-xl">
        <div>
          <label htmlFor="title" className="block text-sm font-medium text-neutral-300 mb-1">Title <span className="text-red-500">*</span></label>
          <input
            type="text"
            name="title"
            id="title"
            required
            className="block w-full bg-neutral-700 border-neutral-600 rounded-md shadow-sm py-2 px-3 text-neutral-100 focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
            placeholder="e.g., The Hitchhiker's Guide to the Galaxy"
          />
        </div>

        <div>
          <label htmlFor="type" className="block text-sm font-medium text-neutral-300 mb-1">Type <span className="text-red-500">*</span></label>
          <select
            name="type"
            id="type"
            required
            className="block w-full bg-neutral-700 border-neutral-600 rounded-md shadow-sm py-2 px-3 text-neutral-100 focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
          >
            <option value="">Select a type</option>
            <option value="book">Book</option>
            <option value="movie">Movie</option>
            <option value="series">TV Series</option>
            <option value="game">Game</option>
            <option value="music">Music Album</option>
            <option value="other">Other</option>
          </select>
        </div>

        <div>
          <label htmlFor="rating" className="block text-sm font-medium text-neutral-300 mb-1">Rating (1-5)</label>
          <input
            type="number"
            name="rating"
            id="rating"
            min="1"
            max="5"
            className="block w-full bg-neutral-700 border-neutral-600 rounded-md shadow-sm py-2 px-3 text-neutral-100 focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
            placeholder="e.g., 5"
          />
        </div>

        <div>
          <label htmlFor="picture_url" className="block text-sm font-medium text-neutral-300 mb-1">Picture URL</label>
          <input
            type="url"
            name="picture_url"
            id="picture_url"
            className="block w-full bg-neutral-700 border-neutral-600 rounded-md shadow-sm py-2 px-3 text-neutral-100 focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
            placeholder="https://example.com/image.jpg"
          />
        </div>

        <div>
          <label htmlFor="notes" className="block text-sm font-medium text-neutral-300 mb-1">Notes</label>
          <textarea
            name="notes"
            id="notes"
            rows="4"
            className="block w-full bg-neutral-700 border-neutral-600 rounded-md shadow-sm py-2 px-3 text-neutral-100 focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
            placeholder="Why is this item your favorite? Any interesting thoughts?"
          ></textarea>
        </div>

        <div className="flex justify-end">
          <button
            type="submit"
            disabled={isPending}
            className="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-sky-600 hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-800 focus:ring-sky-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            {isPending ? 'Adding Item...' : 'Add Item'}
          </button>
        </div>
      </form>
    </div>
  );
}