Dropzone

---
import { Dropzone, DropzoneFilesList, DropzoneLoadingIndicator, DropzoneUploadIndicator } from "@/components/starwind/dropzone";
---

<div class="w-full max-w-[400px]">
  <Dropzone />
</div>

import { Dropzone, DropzoneFilesList, DropzoneLoadingIndicator, DropzoneUploadIndicator } from "@/components/starwind/dropzone";

export function Example() {
  return (
    <div className="w-full max-w-[400px]">
      <Dropzone />
    </div>
  );
}

---
import { Dropzone, DropzoneFilesList, DropzoneLoadingIndicator, DropzoneUploadIndicator } from "@/components/starwind/dropzone";
---

<Dropzone />

import { Dropzone, DropzoneFilesList, DropzoneLoadingIndicator, DropzoneUploadIndicator } from "@/components/starwind/dropzone";

export function Example() {
  return (
    <>
      <Dropzone />
    </>
  );
}

---
import { Dropzone, DropzoneFilesList, DropzoneLoadingIndicator, DropzoneUploadIndicator } from "@/components/starwind/dropzone";
---

<Dropzone>
  <DropzoneUploadIndicator>
    <span class="my-6 text-lg">Your specific message</span>
  </DropzoneUploadIndicator>
  <DropzoneLoadingIndicator />
  <DropzoneFilesList />
</Dropzone>

import { Dropzone, DropzoneFilesList, DropzoneLoadingIndicator, DropzoneUploadIndicator } from "@/components/starwind/dropzone";

export function Example() {
  return (
    <>
      <Dropzone>
        <DropzoneUploadIndicator>
          <span className="my-6 text-lg">Your specific message</span>
        </DropzoneUploadIndicator>
        <DropzoneLoadingIndicator />
        <DropzoneFilesList />
      </Dropzone>
    </>
  );
}

---
import { Dropzone, DropzoneFilesList, DropzoneLoadingIndicator, DropzoneUploadIndicator } from "@/components/starwind/dropzone";
---

<Dropzone isUploading={true} />

import { Dropzone, DropzoneFilesList, DropzoneLoadingIndicator, DropzoneUploadIndicator } from "@/components/starwind/dropzone";

export function Example() {
  return (
    <>
      <Dropzone isUploading={true} />
    </>
  );
}

---
import { Button } from "@/components/starwind/button";
import {
  Dropzone,
  DropzoneFilesList,
  DropzoneLoadingIndicator,
  DropzoneUploadIndicator,
} from "@/components/starwind/dropzone";
---

<div class="flex w-full max-w-[400px] flex-col gap-4">
  <form id="dropzone-form-demo" class="space-y-4">
    <Dropzone id="my-dropzone" name="dropzone-file" />
    <Button type="submit" class="w-full">Submit</Button>
  </form>
</div>

<script>
  function handleFormSubmit() {
    const form = document.querySelector("#dropzone-form-demo") as HTMLFormElement;
    const dropzone = document.querySelector("#my-dropzone") as HTMLElement;
    if (form) {
      form.addEventListener("submit", (e) => {
        e.preventDefault();

        dropzone.setAttribute("data-is-uploading", "true");

        const formData = new FormData(form);
        const formValues = Object.fromEntries(formData.entries());

        // demo form data logging
        console.log("Form submission values:", formValues);

        // You can add additional logic here like:
        // - Form validation
        // - API submission
        // - Success/error handling

        // Simulate API submission
        setTimeout(() => {
          dropzone.setAttribute("data-is-uploading", "false");
        }, 2000);
      });
    }
  }

  handleFormSubmit();

  document.addEventListener("astro:after-swap", handleFormSubmit);
</script>

import type { FormEvent } from "react";
import { useState } from "react";
import { Button } from "@/components/starwind/button";
import { Dropzone } from "@/components/starwind/dropzone";

export function Example() {
  const [isUploading, setIsUploading] = useState(false);

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setIsUploading(true);
    console.log(
      "Form submission values:",
      Object.fromEntries(new FormData(event.currentTarget).entries()),
    );
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setIsUploading(false);
  }

  return (
    <div className="flex w-full max-w-[400px] flex-col gap-4">
      <form className="space-y-4" onSubmit={handleSubmit}>
        <Dropzone name="dropzone-file" isUploading={isUploading} />
        <Button type="submit" className="w-full">Submit</Button>
      </form>
    </div>
  );
}

---
import { Dropzone, DropzoneFilesList, DropzoneLoadingIndicator, DropzoneUploadIndicator } from "@/components/starwind/dropzone";
---

<Dropzone accept="image/*" />

import { Dropzone, DropzoneFilesList, DropzoneLoadingIndicator, DropzoneUploadIndicator } from "@/components/starwind/dropzone";

export function Example() {
  return (
    <>
      <Dropzone accept="image/*" />
    </>
  );
}

---
import { Dropzone, DropzoneFilesList, DropzoneLoadingIndicator, DropzoneUploadIndicator } from "@/components/starwind/dropzone";
---

<Dropzone multiple />

import { Dropzone, DropzoneFilesList, DropzoneLoadingIndicator, DropzoneUploadIndicator } from "@/components/starwind/dropzone";

export function Example() {
  return (
    <>
      <Dropzone multiple />
    </>
  );
}