File Field

import { FileField } from "@kobalte/core/file-field";

export function BasicExample() {
  return (
    <FileField
      class={style.FileField}
      multiple
      maxFiles={5}
      onFileAccept={(data) => console.log("data", data)}
      onFileReject={(data) => console.log("data", data)}
      onFileChange={(data) => console.log("data", data)}
    >
      <FileField.Label class={style.FileField__label}>
        File Upload
      </FileField.Label>
      <FileField.Dropzone class={style.FileField__dropzone}>
        Drop your files here...
        <FileField.Trigger class={style.FileField__trigger}>
          Choose files!
        </FileField.Trigger>
      </FileField.Dropzone>
      <FileField.HiddenInput />
      <FileField.ItemList class={style.FileField__itemGroup}>
        {(file) => (
          <FileField.Item class={style.FileField__item}>
            <FileField.ItemPreviewImage
              class={style.FileField__itemPreviewImage}
            />
            <FileField.ItemName class={style.FileField__itemName} />
            <FileField.ItemSize class={style.FileField__itemSize} />
            <FileField.ItemDeleteTrigger
              class={style.FileField__itemDeleteTrigger}
            >
              Delete
            </FileField.ItemDeleteTrigger>
          </FileField.Item>
        )}
      </FileField.ItemList>
    </FileField>
  );
}

.FileField {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 300px;
  row-gap: 5px;
}

.FileField__label {
  font-size: 14px;
  font-weight: 500;
  user-select: none;
}

.FileField__dropzone {
  padding: 20px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgb(42, 42, 40);
  width: 100%;
  min-height: 200px;
  color: #ccc;
  border-radius: 6px;
}

.FileField__trigger {
  background-color: hsl(201 96% 32%);
  padding: 5px 10px;
  border-radius: 4px;
}

.FileField__itemGroup {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.FileField__item {
  width: 100%;
  display: grid;
  padding: 16px;
  column-gap: 10px;
  border-radius: 6px;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "preview name delete"
    "preview size delete";
  border: 1px solid rgb(42, 42, 40);
}

.FileField__itemPreview {
  grid-area: preview;
}

.FileField__itemPreviewImage {
  width: 50px;
  object-fit: scale-down;
  height: auto;
  aspect-ratio: 1;
}

.FileField__itemName {
  grid-area: name;
  font-size: 14px;
  color: #fff;
}

.FileField__itemSize {
  grid-area: size;
  font-size: 14px;
  color: rgb(181, 179, 173);
}

.FileField__itemDeleteTrigger {
  grid-area: delete;
  cursor: pointer;
  background-color: #a23434;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  height: max-content;
  align-self: center;
}

.formContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 5px;
}

.formContainer > .FileField__dropzone {
  min-height: 200px;
}

.submit-btn {
  background-color: hsl(201 96% 32%);
  padding: 5px 10px;
  border-radius: 4px;
  align-self: flex-end;
}