FileDrop

import * as UI from "@iyk/ui"

export default () => (
  <form method="POST" className="w-full max-w-[330px] grid gap-8">
    <UI.Field name="single-photo">
      <UI.Label>Single Photo</UI.Label>

      <UI.File
        defaultValue={JSON.stringify({
          href: "https://placehold.co/64x64?text=01",
          name: "01_album_cover.jpg",
        })}
        handleFile={async (handler) => {
          handler.progress = 5

          await new Promise((resolve) => setTimeout(resolve, 700))

          handler.progress = 50

          await new Promise((resolve) => setTimeout(resolve, 600))

          handler.progress = 98

          await new Promise((resolve) => setTimeout(resolve, 400))

          handler.progress = 100
        }}
      />
    </UI.Field>

    <UI.Field name="photos">
      <UI.Label>Multiple Photos</UI.Label>

      <UI.File
        multiple
        sortable
        defaultValue={[
          JSON.stringify({
            href: "https://placehold.co/64x64?text=01",
            name: "01_album_cover.jpg",
          }),
          JSON.stringify({
            href: "https://placehold.co/64x64?text=02",
            name: "02_single_cover.jpg",
          }),
          JSON.stringify({
            href: "https://placehold.co/64x64?text=03",
            name: "03_album_cover.jpg",
          }),
          JSON.stringify({
            href: "https://placehold.co/64x64?text=04",
            name: "04_next_cover.jpg",
          }),
        ]}
        types={[
          {
            description: "Images",
            accept: {
              "image/avif": [".avif", ".avifs"],
              "image/jpeg": [".jpeg", ".jpg"],
              "image/png": [".png"],
              "image/gif": [".gif"],
              "image/webp": [".webp"],
            },
          },
        ]}
        handleFile={async (handler) => {
          handler.progress = 5

          await new Promise((resolve) => setTimeout(resolve, 700))

          handler.progress = 50

          await new Promise((resolve) => setTimeout(resolve, 600))

          handler.progress = 98

          await new Promise((resolve) => setTimeout(resolve, 400))

          handler.progress = 100
        }}
      />
    </UI.Field>

    <UI.Button type="submit" kind="outline" size="md">
      Update
    </UI.Button>
  </form>
)