import {
  CircleAlertIcon,
  CircleCheckIcon,
  FileTextIcon,
  LoaderIcon,
  Trash2Icon,
  XIcon,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemFooter,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";
import { Progress } from "@/components/ui/progress";

type FileUploadCardProps = {
  state?: "in-progress" | "completed" | "error";
  icon?: React.ReactElement;
  title: string;
  description?: string;
  showStatus?: boolean;
  showProgressBar?: boolean;
  progress?: number;

  onCancel?: React.MouseEventHandler<HTMLButtonElement>;
  onRemove?: React.MouseEventHandler<HTMLButtonElement>;
};

export function FileUploadCard({
  state = "in-progress",
  icon,
  title,
  description,
  showStatus = true,
  showProgressBar = true,
  progress = 0,

  onCancel,
  onRemove,
}: FileUploadCardProps) {
  return (
    <Item
      variant="outline"
      data-state={state}
      className="rounded-lg data-[state=error]:border-destructive"
    >
      <ItemMedia
        className="size-11 rounded-md [&_svg:not([class*='size-'])]:size-7"
        variant="icon"
      >
        {icon ?? <FileTextIcon strokeWidth={1.33} />}
      </ItemMedia>

      <ItemContent>
        <ItemTitle className="line-clamp-1 leading-5 break-all">{title}</ItemTitle>

        <div className="flex items-center gap-2">
          {description && (
            <p className="line-clamp-1 leading-5 text-muted-foreground tabular-nums">
              {description}
            </p>
          )}

          {showStatus && (
            <div className="flex items-center gap-1 leading-5 [&_svg:not([class*='size-'])]:size-4">
              {state === "in-progress" && (
                <>
                  <LoaderIcon className="animate-spin text-indigo-500" />
                  Uploading
                </>
              )}

              {state === "completed" && (
                <>
                  <CircleCheckIcon className="text-success" />
                  Completed
                </>
              )}

              {state === "error" && (
                <>
                  <CircleAlertIcon className="text-destructive" />
                  Failed
                </>
              )}
            </div>
          )}
        </div>
      </ItemContent>

      <ItemActions className="h-11 items-start">
        {state === "in-progress" && onCancel && (
          <Button
            className="size-4 rounded-none opacity-70"
            variant="link"
            size="icon"
            onClick={onCancel}
          >
            <XIcon />
          </Button>
        )}

        {state !== "in-progress" && onRemove && (
          <Button
            className="size-4 rounded-none group-data-[state=error]/item:text-destructive"
            variant="link"
            size="icon"
            onClick={onRemove}
          >
            <Trash2Icon />
          </Button>
        )}
      </ItemActions>

      {state === "in-progress" && showProgressBar && (
        <ItemFooter>
          <Progress className="bg-secondary" value={progress} />
        </ItemFooter>
      )}
    </Item>
  );
}

File Upload Card

File Upload Card 1

Get access to these components and the full library

Built for real interfaces

Frequently Asked Questions

Are the React components production ready?

Does shadcncraft work for developers using shadcn/ui?

What stack is used?

Can I modify the code?

Does this replace shadcn/ui?

More Components

Real support from the team behind shadcncraft