Components
Loading preview...
Download Card This component displays download options and visual feedback for different states like loading and success, driven by props.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/download-cardimport React, { useState } from "react";
import { Video, Music, FileImage } from "lucide-react";
import { DownloadCard } from "@/components/ui/download-card"; // Adjust the import path
import { Button } from "@/components/ui/button"; // Optional: For control buttons
type Status = "idle" | "loading" | "success";
export default function DownloadCardDemo() {
const [status, setStatus] = useState<Status>("idle");
// Simulate a download process
const handleDownload = () => {
if (status !== 'idle') return; // Prevent multiple clicks
setStatus("loading");
// Simulate rendering time
setTimeout(() => {
setStatus("success");
// Reset back to idle after showing success message
setTimeout(() => {
setStatus("idle");
}, 2500);
}, 3000);
};
const downloadFormats = [
{
name: "MP4",
icon: <Video className="h-6 w-6" />,
onSelect: handleDownload,
},
{
name: "MP3",
icon: <Music className="h-6 w-6" />,
onSelect: handleDownload,
},
{
name: "GIF",
icon: <FileImage className="h-6 w-6" />,
onSelect: handleDownload,
},
];
return (
<div className="flex flex-col items-center justify-center space-y-6 rounded-lg bg-muted p-8">
<DownloadCard
status={status}
formats={downloadFormats}
/>
{/* Optional: Buttons to manually control the state for testing */}
<div className="flex space-x-2 pt-4">
<Button variant="outline" size="sm" onClick={() => setStatus("idle")} disabled={status !== 'idle'}>
Reset to Idle
</Button>
</div>
</div>
);
}