File Upload with Progress

1import { FileSpreadsheet, Upload, X } from 'lucide-react';
2import { Button } from '@/components/ui/button';
3import { Label } from '@/components/ui/label';
4 
5export default function FileUpload05() {
6  return (
7    <div className="flex w-full max-w-lg items-center justify-center p-10 sm:mx-auto sm:max-w-lg">
8      <form>
9        <h3 className="text-balance font-semibold text-foreground text-lg">
10          File Upload
11        </h3>
12        <div className="mt-4 flex justify-center space-x-4 rounded-md border border-input border-dashed px-6 py-10">
13          <div className="sm:flex sm:items-center sm:gap-x-3">
14            <Upload
15              aria-hidden={true}
16              className="mx-auto h-8 w-8 text-muted-foreground sm:mx-0 sm:h-6 sm:w-6"
17            />
18            <div className="mt-4 flex text-foreground text-sm leading-6 sm:mt-0">
19              <p>Drag and drop or</p>
20              <Label
21                className="relative cursor-pointer rounded-sm pl-1 font-medium text-primary hover:underline hover:underline-offset-4"
22                htmlFor="file-upload-4"
23              >
24                <span>choose file</span>
25                <input
26                  className="sr-only"
27                  id="file-upload-4"
28                  name="file-upload-4"
29                  type="file"
30                />
31              </Label>
32              <p className="text-pretty pl-1">to upload</p>
33            </div>
34          </div>
35        </div>
36        <p className="mt-2 flex items-center justify-between text-pretty text-muted-foreground text-xs leading-5">
37          Recommended max. size: 10 MB, Accepted file types: XLSX, XLS, CSV.
38        </p>
39        <div className="relative mt-8 rounded-lg bg-muted p-3">
40          <div className="absolute top-1 right-1">
41            <Button
42              aria-label="Remove"
43              className="rounded-sm p-2 text-muted-foreground hover:text-foreground"
44              size="sm"
45              type="button"
46              variant="ghost"
47            >
48              <X aria-hidden={true} className="size-4 shrink-0" />
49            </Button>
50          </div>
51          <div className="flex items-center space-x-2.5">
52            <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-sm bg-background shadow-sm ring-1 ring-input ring-inset">
53              <FileSpreadsheet
54                aria-hidden={true}
55                className="size-5 text-foreground"
56              />
57            </span>
58// … truncated