UploadThing Image Grid

"use client";

import { UploadThingImageGrid } from "@/components/ui/uploadthing-image-grid";
import type { ImageItem } from "@/components/ui/uploadthing-image-grid";
import { useState } from "react";

export default function Default() {
  const [images, setImages] = useState<ImageItem[]>([
    {
      id: "1",
      url: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?w=400&q=80",
      name: "Portrait",
    },
    {
      id: "2",
      url: "https://images.unsplash.com/photo-1526779259212-939e64788e3c?w=400&q=80",
      name: "Desk",
    },
  ]);

  const handleUpload = async (files: File[]): Promise<ImageItem[]> => {
    // Simulate an upload — in production wire this to UploadThing.
    await new Promise((resolve) => setTimeout(resolve, 800));
    return files.map((file, index) => ({
      id: `${Date.now()}-${index}`,
      url: URL.createObjectURL(file),
      name: file.name,
    }));
  };

  return (
    <div className="w-full max-w-md mx-auto p-6">
      <UploadThingImageGrid
        value={images}
        onChange={setImages}
        onUpload={handleUpload}
        columns={3}
        maxImages={9}
      />
    </div>
  );
}