|
| 1 | +import { useState, useMemo, useEffect } from "react"; |
| 2 | +import Image from "next/image"; |
| 3 | +import Link from "next/link"; |
| 4 | +import cn from "classnames"; |
| 5 | +import ProjectConfigType from "../../interfaces/projectConfig"; |
| 6 | +import { detectPlatform } from "../../lib/utils"; |
| 7 | +import { getDownloadData, desktopPlatforms, type DesktopPlatform } from "../../lib/downloads"; |
| 8 | + |
| 9 | +// --- Store badge button --- |
| 10 | +function StoreBadge({ url, icon, alt, className }: { url: string; icon: string; alt?: string; className?: string }) { |
| 11 | + return ( |
| 12 | + <Link href={url} target="_blank" rel="noopener noreferrer" |
| 13 | + className={cn("inline-block hover:opacity-80 transition-opacity", className)}> |
| 14 | + <Image src={icon} width={0} height={0} sizes="100vw" alt={alt || ''} className="h-[40px] w-auto" /> |
| 15 | + </Link> |
| 16 | + ); |
| 17 | +} |
| 18 | + |
| 19 | +// --- Download link button --- |
| 20 | +function DownloadButton({ label, url, primary }: { label: string; url: string; primary?: boolean }) { |
| 21 | + return ( |
| 22 | + <Link href={url} target="_blank" rel="noopener noreferrer" |
| 23 | + className={cn( |
| 24 | + "inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-medium transition-colors", |
| 25 | + primary |
| 26 | + ? "bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 hover:opacity-90" |
| 27 | + : "border border-neutral-300 dark:border-neutral-600 hover:bg-neutral-100 dark:hover:bg-neutral-800" |
| 28 | + )}> |
| 29 | + {label} |
| 30 | + </Link> |
| 31 | + ); |
| 32 | +} |
| 33 | + |
| 34 | +const HCDownload = ({ project, title }: { project: ProjectConfigType; title: string }) => { |
| 35 | + const [desktopTab, setDesktopTab] = useState<DesktopPlatform>('macOS'); |
| 36 | + const [mobileFirst, setMobileFirst] = useState(false); |
| 37 | + const [userArch, setUserArch] = useState<'arm64' | 'x64' | 'unknown'>('unknown'); |
| 38 | + const { desktop, mobile, hasDesktop, hasMobile } = useMemo(() => getDownloadData(project.downloadLinks || {}), [project]); |
| 39 | + const currentDesktop = desktop[desktopTab]; |
| 40 | + |
| 41 | + useEffect(() => { |
| 42 | + const { os, isMobile, arch } = detectPlatform(); |
| 43 | + setUserArch(arch); |
| 44 | + if (isMobile) { |
| 45 | + setMobileFirst(true); |
| 46 | + } |
| 47 | + if (os === 'Windows') setDesktopTab('Windows'); |
| 48 | + else if (os === 'Linux') setDesktopTab('Linux'); |
| 49 | + // macOS is already the default |
| 50 | + }, []); |
| 51 | + |
| 52 | + const desktopSection = hasDesktop && ( |
| 53 | + <div> |
| 54 | + <div className="flex flex-col-reverse sm:flex-row sm:items-center justify-between gap-3 mb-6"> |
| 55 | + <h3 className="text-lg font-medium">Download for {desktopTab}</h3> |
| 56 | + <div className="flex gap-4 self-start border-b border-neutral-200 dark:border-neutral-700"> |
| 57 | + {desktopPlatforms.map((tab) => ( |
| 58 | + <button |
| 59 | + key={tab} |
| 60 | + onClick={() => setDesktopTab(tab)} |
| 61 | + className={cn( |
| 62 | + "pb-2 text-sm font-medium transition-colors border-b-2 -mb-px", |
| 63 | + desktopTab === tab |
| 64 | + ? "border-neutral-900 dark:border-white text-neutral-900 dark:text-white" |
| 65 | + : "border-transparent text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-200" |
| 66 | + )} |
| 67 | + > |
| 68 | + {tab} |
| 69 | + </button> |
| 70 | + ))} |
| 71 | + </div> |
| 72 | + </div> |
| 73 | + |
| 74 | + <div className="flex flex-wrap items-center gap-3 min-h-[48px]"> |
| 75 | + {currentDesktop.store || currentDesktop.assets.length > 0 ? ( |
| 76 | + <> |
| 77 | + {currentDesktop.store && ( |
| 78 | + <StoreBadge |
| 79 | + url={currentDesktop.store.url} |
| 80 | + icon={currentDesktop.store.icon} |
| 81 | + alt={currentDesktop.store.label} |
| 82 | + /> |
| 83 | + )} |
| 84 | + {currentDesktop.assets.map((asset, i) => { |
| 85 | + const isPrimary = asset.arch && userArch !== 'unknown' |
| 86 | + ? asset.arch === userArch |
| 87 | + : !currentDesktop.store && i === 0; |
| 88 | + return ( |
| 89 | + <DownloadButton |
| 90 | + key={i} |
| 91 | + label={asset.label} |
| 92 | + url={asset.url} |
| 93 | + primary={isPrimary} |
| 94 | + /> |
| 95 | + ); |
| 96 | + })} |
| 97 | + </> |
| 98 | + ) : ( |
| 99 | + <p className="text-sm text-neutral-500 dark:text-neutral-400">Coming soon</p> |
| 100 | + )} |
| 101 | + </div> |
| 102 | + </div> |
| 103 | + ); |
| 104 | + |
| 105 | + const mobileSection = hasMobile && ( |
| 106 | + <div> |
| 107 | + <h3 className="text-lg font-medium mb-5">Download for mobile</h3> |
| 108 | + <div className="flex flex-wrap gap-3"> |
| 109 | + {mobile.map((store, i) => ( |
| 110 | + <StoreBadge |
| 111 | + key={i} |
| 112 | + url={store.url} |
| 113 | + icon={store.icon} |
| 114 | + alt={store.label} |
| 115 | + /> |
| 116 | + ))} |
| 117 | + </div> |
| 118 | + </div> |
| 119 | + ); |
| 120 | + |
| 121 | + const separator = hasDesktop && hasMobile && ( |
| 122 | + <hr className="my-8 border-neutral-200 dark:border-neutral-700" /> |
| 123 | + ); |
| 124 | + |
| 125 | + return ( |
| 126 | + <div> |
| 127 | + <h2 className="text-3xl sm:text-4xl md:text-5xl font-normal mb-3"> |
| 128 | + {title} |
| 129 | + </h2> |
| 130 | + <p className="text-base text-neutral-600 dark:text-neutral-400 max-w-4xl leading-relaxed mb-10"> |
| 131 | + It's easy to set up, install the {project.name} app on all your devices and login with the same email account, all your logged-in devices will automatically start showing up everywhere. {project.name} is available for all major platforms so that none of your devices are left out. |
| 132 | + </p> |
| 133 | + |
| 134 | + {/* Downloads card */} |
| 135 | + <div className="md:rounded-2xl md:border md:border-neutral-200 md:dark:border-neutral-700 md:p-8"> |
| 136 | + {mobileFirst ? ( |
| 137 | + <> |
| 138 | + {mobileSection} |
| 139 | + {separator} |
| 140 | + {desktopSection} |
| 141 | + </> |
| 142 | + ) : ( |
| 143 | + <> |
| 144 | + {desktopSection} |
| 145 | + {separator} |
| 146 | + {mobileSection} |
| 147 | + </> |
| 148 | + )} |
| 149 | + </div> |
| 150 | + </div> |
| 151 | + ); |
| 152 | +}; |
| 153 | + |
| 154 | +export default HCDownload; |
0 commit comments