preview image upload.tsx

/**
 * v0 by Vercel.
 * @see https://v0.dev/t/uNOsfYuMiZR
 * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
 */
import { Button } from "@/components/ui/button"

export default function Component() {
  return (
    <div className="max-w-2xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
      <div className="space-y-6">
        <div>
          <h2 className="text-2xl font-bold">Upload Images</h2>
          <p className="mt-2 text-gray-500 dark:text-gray-400">
            Drag and drop your images or select them from your file system.
          </p>
        </div>
        <div className="border-2 border-gray-300 border-dashed rounded-lg p-6 space-y-4 dark:border-gray-600">
          <div className="flex justify-center">
            <div className="max-w-lg w-full">
              <div>
                <div className="flex flex-col items-center justify-center h-32 space-y-3">
                  <UploadIcon className="h-6 w-6 text-gray-400" />
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    Drag and drop your images here, or click to select files
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
            <img
              src="/placeholder.svg"
              alt="Image Preview"
              width={150}
              height={150}
              className="rounded-lg object-cover"
            />
            <img
              src="/placeholder.svg"
              alt="Image Preview"
              width={150}
              height={150}
              className="rounded-lg object-cover"
            />
            <img
              src="/placeholder.svg"
              alt="Image Preview"
              width={150}
              height={150}
              className="rounded-lg object-cover"
            />
            <img
              src="/placeholder.svg"
              alt="Image Preview"
              width={150}
              height={150}
              className="rounded-lg object-cover"
            />
          </div>
        </div>
        <Button type="submit" className="w-full">
          Upload Images
        </Button>
      </div>
    </div>
  )
}

function UploadIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
      <polyline points="17 8 12 3 7 8" />
      <line x1="12" x2="12" y1="3" y2="15" />
    </svg>
  )
}


function XIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M18 6 6 18" />
      <path d="m6 6 12 12" />
    </svg>
  )
}