"use client";

import { ImageUploadBase } from "@countryclub/ui-react";
import { useState } from "react";

export default function ImageUploadStates() {
  const [preview, setPreview] = useState<string | null>(
    "https://picsum.photos/seed/countryclub/480/320",
  );

  return (
    <div className="grid w-full max-w-2xl gap-6 sm:grid-cols-3">
      <div className="flex flex-col gap-2">
        <span className="font-medium text-muted-foreground text-xs">Idle</span>
        <ImageUploadBase
          alt="Idle upload"
          imageUrl={null}
          loading={false}
          onDrop={() => {}}
          progress={0}
        />
      </div>

      <div className="flex flex-col gap-2">
        <span className="font-medium text-muted-foreground text-xs">
          Uploading
        </span>
        <ImageUploadBase
          alt="Uploading"
          imageUrl={null}
          loading
          onDrop={() => {}}
          progress={0.6}
        />
      </div>

      <div className="flex flex-col gap-2">
        <span className="font-medium text-muted-foreground text-xs">
          With preview
        </span>
        <ImageUploadBase
          alt="Event cover"
          imageUrl={preview}
          loading={false}
          onDelete={() => setPreview(null)}
          onDrop={(file) => setPreview(URL.createObjectURL(file))}
          progress={0}
        />
      </div>
    </div>
  );
}
Upload

Import

Avatar Upload

Image Upload

Image Upload States
