FileUpload

import { FileUploadArea } from "@nili/ui"

export function Example() {
  return (
    <FileUploadArea
      multiple
      accept="image/*,application/pdf"
      label="Upload files"
      title="Choose a file or drag it here"
      description="PNG, JPG or PDF, up to 10 MB."
      onFiles={(files) => upload(files)}
    />
  )
}

import { FileUploadArea } from "@nili/ui"

export function Example() {
  return (
    <>
      <FileUploadArea label="Upload" onFiles={onFiles} />
      <FileUploadArea label="Upload" invalid onFiles={onFiles} />
      <FileUploadArea label="Upload" disabled onFiles={onFiles} />
    </>
  )
}

import { FileUploadCard } from "@nili/ui"

export function Example() {
  return (
    <>
      <FileUploadCard
        fileName="annual-report.pdf"
        fileSize="2.4 MB"
        status="progress"
        progress={62}
        onRemove={cancel}
        removeLabel="Cancel upload"
      />

      <FileUploadCard
        fileName="photo.png"
        fileSize="840 KB"
        status="success"
        onRemove={remove}
        removeLabel="Remove file"
      />

      <FileUploadCard
        fileName="archive.zip"
        fileSize="18 MB"
        status="error"
        errorMessage="File is larger than 10 MB."
        onRetry={retry}
        retryLabel="Try again"
        onRemove={remove}
        removeLabel="Remove file"
      />
    </>
  )
}

import { FileFormatIcon } from "@nili/ui"

export function Example() {
  return (
    <>
      <FileFormatIcon fileName="report.pdf" />
      <FileFormatIcon fileName="sheet.xlsx" />
      <FileFormatIcon fileName="photo.png" size="xs" />
      <FileFormatIcon fileName="anything.bin" color="purple" />
    </>
  )
}

import { ImageUpload, Button } from "@nili/ui"

export function Example() {
  return (
    <>
      <ImageUpload
        shape="avatar"
        label="Profile photo"
        hint="JPG or PNG, at least 256×256."
        onFiles={(files) => upload(files[0])}
        actions={<Button size="xs" appearance="stroke">Choose file</Button>}
      />

      <ImageUpload shape="16:9" alignment="horizontal" label="Cover" onFiles={onFiles} />
    </>
  )
}