FileDropzone

const fileDropzoneFixture = {
  id: "file-dropzone",
  hint: "PNG, PDF, CSV",
  accept: ".png,.pdf,.csv",
  multiple: true,
};
 
import { FileDropzone } from "@grassroot/ui-react/advanced";
 
export default function FileDropzoneDemo() {
  const { id: _id, ...props } = fileDropzoneFixture;
  return (
    <div>
      <FileDropzone {...props} />
    </div>
  );
}

<script setup lang="ts">
const fileDropzoneFixture = {
  id: "file-dropzone",
  hint: "PNG, PDF, CSV",
  accept: ".png,.pdf,.csv",
  multiple: true,
};
 
import { FileDropzone } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <FileDropzone
      :hint="fileDropzoneFixture.hint"
      :accept="fileDropzoneFixture.accept"
      :multiple="fileDropzoneFixture.multiple"
    />
  </div>
</template>

import { Component } from "@angular/core";
const fileDropzoneFixture = {
  id: "file-dropzone",
  hint: "PNG, PDF, CSV",
  accept: ".png,.pdf,.csv",
  multiple: true,
};
 
import { GrassrootFileDropzone } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-file-dropzone-demo",
  standalone: true,
  imports: [GrassrootFileDropzone],
  template: `
    <div>
      <grassroot-file-dropzone
        [hint]="fixture.hint"
        [accept]="fixture.accept"
        [multiple]="fixture.multiple"
      />
    </div>
  `,
})
export class FileDropzoneDemoComponent {
  protected readonly fixture = fileDropzoneFixture;
}
 
export default FileDropzoneDemoComponent;

<script lang="ts">
  const fileDropzoneFixture = {
    id: "file-dropzone",
    hint: "PNG, PDF, CSV",
    accept: ".png,.pdf,.csv",
    multiple: true,
  };
 
  import { FileDropzone } from "@grassroot/ui-svelte";
</script>
 
<div>
  <FileDropzone
    hint={fileDropzoneFixture.hint}
    accept={fileDropzoneFixture.accept}
    multiple={fileDropzoneFixture.multiple}
  />
</div>

/** @jsxImportSource solid-js */
const fileDropzoneFixture = {
  id: "file-dropzone",
  hint: "PNG, PDF, CSV",
  accept: ".png,.pdf,.csv",
  multiple: true,
};
 
import { FileDropzone } from "@grassroot/ui-solid";
 
export default function FileDropzoneDemo() {
  return (
    <div>
      <FileDropzone
        hint={fileDropzoneFixture.hint}
        accept={fileDropzoneFixture.accept}
        multiple={fileDropzoneFixture.multiple}
      />
    </div>
  );
}