Components
Loading preview...
Upload Progress Card This component displays the progress of a file upload, including the filename, size, percentage, and a visual progress bar. It is highly reusable and customizable through props.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/progress-cardimport React, { useState, useEffect } from "react";
import { UploadProgressCard } from "@/components/ui/progress-card";
import { Button } from "@/components/ui/button";
import { FileText } from "lucide-react";
export default function UploadProgressCardDemo() {
const [progress, setProgress] = useState(0);
const [isUploading, setIsUploading] = useState(false);
const [status, setStatus] = useState<"uploading" | "complete">("uploading");
// Simulate upload progress
useEffect(() => {
let interval: NodeJS.Timeout | null = null;
if (isUploading && progress < 100) {
interval = setInterval(() => {
setProgress((prev) => {
const next = prev + Math.random() * 10;
if (next >= 100) {
clearInterval(interval!);
setIsUploading(false);
setStatus("complete");
return 100;
}
return next;
});
}, 300);
}
return () => {
if (interval) clearInterval(interval);
};
}, [isUploading, progress]);
const handleStartUpload = () => {
setProgress(0);
setStatus("uploading");
setIsUploading(true);
};
const handleCancel = () => {
setIsUploading(false);
console.log("Upload cancelled by user.");
};
return (
<div className="flex w-full flex-col items-center space-y-4 p-4">
{!isUploading && progress === 0 && (
<Button onClick={handleStartUpload}>Simulate File Upload</Button>
)}
{(isUploading || progress > 0) && (
<UploadProgressCard
fileName="Brief new project.pdf"
fileSize={8100000} // 8.1 MB in bytes
progress={progress}
status={status}
onCancel={handleCancel}
icon={<FileText className="h-8 w-8 text-red-500" />}
/>
)}
</div>
);
}