@jhustle44 / jcr-guide-pro
Code Commits Issues Pulls Cloud Agent CI/CD
main
copilot/add-firebase copilot/change-app-name-to-jcrguru copilot/create-zip-file copilot/create-zip-file-again copilot/merge-any-updates main master
tsx 73 lines 1.85 KB
Raw
1 import { useState } from "react";
2 import { Button } from "@/components/ui/button";
3 import { DownloadModal } from "@/components/ui/download-modal";
4 import { Download, FileDown } from "lucide-react";
5 import type { RepairGuide } from "@shared/schema";
6
7 interface DownloadButtonProps {
8 guide: RepairGuide;
9 variant?: "icon" | "button";
10 size?: "sm" | "md" | "lg";
11 videoUrl?: string;
12 }
13
14 export default function DownloadButton({
15 guide,
16 variant = "icon",
17 size = "sm",
18 videoUrl
19 }: DownloadButtonProps) {
20 const [showDownloadModal, setShowDownloadModal] = useState(false);
21
22 if (variant === "button") {
23 return (
24 <>
25 <Button
26 onClick={(e) => {
27 e.stopPropagation();
28 setShowDownloadModal(true);
29 }}
30 className={`flex items-center gap-2 ${
31 size === "sm" ? "px-3 py-1.5 text-sm" :
32 size === "md" ? "px-4 py-2" :
33 "px-6 py-3 text-lg"
34 }`}
35 >
36 <FileDown className={size === "sm" ? "h-4 w-4" : size === "md" ? "h-5 w-5" : "h-6 w-6"} />
37 Download
38 </Button>
39
40 <DownloadModal
41 open={showDownloadModal}
42 onOpenChange={setShowDownloadModal}
43 guide={guide}
44 videoUrl={videoUrl}
45 />
46 </>
47 );
48 }
49
50 return (
51 <>
52 <Button
53 variant="ghost"
54 size="sm"
55 onClick={(e) => {
56 e.stopPropagation();
57 setShowDownloadModal(true);
58 }}
59 className="text-gray-500 hover:text-primary-700 transition-colors"
60 title="Download guide"
61 >
62 <Download className={size === "sm" ? "h-4 w-4" : size === "md" ? "h-5 w-5" : "h-6 w-6"} />
63 </Button>
64
65 <DownloadModal
66 open={showDownloadModal}
67 onOpenChange={setShowDownloadModal}
68 guide={guide}
69 videoUrl={videoUrl}
70 />
71 </>
72 );
73 }