Download Card

Cards 57

About

Download Card This component displays download options and visual feedback for different states like loading and success, driven by props.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Download Card to your project and fits it to your theme.

Code

How Download Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import 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>
  );
}