ProgressBar

import { ProgressBar } from "@nili/ui"

export function Example() {
  return (
    <>
      <ProgressBar value={35} aria-label={t('upload')} />
      <ProgressBar value={70} label={t('storage')} showValue />
      <ProgressBar value={7} max={10} label="Files" valueLabel="7 of 10 files" />
    </>
  )
}

import { ProgressBar } from "@nili/ui"

export function Example() {
  return (
    <>
      <ProgressBar value={40} color="primary" label="Primary" />
      <ProgressBar value={100} color="success" label="Success" />
      <ProgressBar value={85} color="warning" label="Warning" />
      <ProgressBar value={95} color="error" label="Error" />
    </>
  )
}

import { ProgressBar, LinkButton } from "@nili/ui"

export function Example() {
  return (
    <>
      <ProgressBar value={60} label="Storage" labelPosition="top" showValue />
      <ProgressBar value={60} label="Storage" labelPosition="end" showValue />

      <ProgressBar
        value={92}
        color="warning"
        label="Storage"
        showValue
        linkButton={<LinkButton href="#" size="sm">Upgrade plan</LinkButton>}
      />
    </>
  )
}

import { ProgressBar, ProgressCircle } from "@nili/ui"

export function Example() {
  return (
    <>
      <ProgressBar indeterminate label={t('indet.syncing')} />
      <ProgressCircle indeterminate aria-label={t('indet.loading')} />
    </>
  )
}

import { ProgressCircle } from "@nili/ui"

export function Example() {
  return (
    <>
      <ProgressCircle value={65} showValue aria-label="Complete" />
      <ProgressCircle value={65} size={80} showValue aria-label="Complete" />
      <ProgressCircle value={65} thickness={2} showValue aria-label="Complete" />

      {/* anything in the middle */}
      <ProgressCircle value={65} aria-label="Complete">
        <span className="text-[12px]">65/100</span>
      </ProgressCircle>
    </>
  )
}