FileItem

import { FileItem } from "@nexera-ui/react";
import { LuImage } from "react-icons/lu";

export function States() {
  return (
    <ul className="m-0 flex list-none flex-col gap-3 p-0">
      <li>
        <FileItem
          name="cnic_front.jpg"
          meta="860 KB  ·  waiting"
          icon={<LuImage />}
          onRemove={() => undefined}
        />
      </li>
      <li>
        <FileItem
          name="cnic_front.jpg"
          icon={<LuImage />}
          onRemove={() => undefined}
          status="uploading"
          progress={45}
          meta="860 KB  ·  45%  ·  3 s left"
        />
      </li>
      <li>
        <FileItem
          name="cnic_front.jpg"
          icon={<LuImage />}
          onRemove={() => undefined}
          status="complete"
          meta="860 KB  ·  uploaded"
        />
      </li>
      <li>
        <FileItem
          name="cnic_front.jpg"
          icon={<LuImage />}
          onRemove={() => undefined}
          status="error"
          meta="File is larger than 10 MB"
          onRetry={() => undefined}
        />
      </li>
    </ul>
  );
}

import { useEffect, useState } from "react";
import { FileItem } from "@nexera-ui/react";
import { LuImage } from "react-icons/lu";

export function SimulatedUpload() {
  const [progress, setProgress] = useState(0);
  const status: FileItemStatus = progress >= 100 ? "complete" : "uploading";
  useEffect(() => {
    if (progress >= 100) return;
    const timer = setTimeout(() => {
      setProgress((value) => Math.min(100, value + 10));
    }, 400);
    return () => {
      clearTimeout(timer);
    };
  }, [progress]);
  return (
    <FileItem
      name="cnic_front.jpg"
      icon={<LuImage />}
      status={status}
      progress={progress}
      meta={status === "complete" ? "860 KB  ·  uploaded" : `860 KB  ·  ${String(progress)}%`}
      onRemove={() => {
        setProgress(0);
      }}
    />
  );
}

import { FileItem } from "@nexera-ui/react";
import { LuFileText, LuImage } from "react-icons/lu";

export function LongNameAndRightToLeft() {
  return (
    <div className="flex flex-col gap-3">
      <FileItem
        meta="860 KB  ·  waiting"
        onRemove={() => undefined}
        name="employment_contract_signed_final_version_2026_with_all_appendices_and_annexes.pdf"
        icon={<LuFileText />}
        meta="2.4 MB  ·  waiting"
      />
      <div dir="rtl" lang="ar">
        <FileItem
          name="بطاقة_الهوية.jpg"
          icon={<LuImage />}
          status="error"
          meta="الملف أكبر من 10 ميغابايت"
          retryLabel="إعادة المحاولة"
          onRetry={() => undefined}
          onRemove={() => undefined}
          removeLabel="إزالة بطاقة_الهوية.jpg"
        />
      </div>
    </div>
  );
}