133 lines
4.0 KiB
JavaScript
133 lines
4.0 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import axios from "axios";
|
|
import { FaWindows, FaApple, FaLinux } from "react-icons/fa";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
const systemsTemplate = [
|
|
{
|
|
name: "Mac M1, M2, M3",
|
|
logo: FaApple,
|
|
fileFormat: "{appname}-mac-arm64-{tag}.dmg",
|
|
comingSoon: false,
|
|
},
|
|
{
|
|
name: "Mac (Intel)",
|
|
logo: FaApple,
|
|
fileFormat: "{appname}-mac-x64-{tag}.dmg",
|
|
comingSoon: false,
|
|
},
|
|
{
|
|
name: "Windows",
|
|
logo: FaWindows,
|
|
fileFormat: "{appname}-win-x64-{tag}.exe",
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
name: "Linux",
|
|
logo: FaLinux,
|
|
fileFormat: "{appname}-linux-amd64-{tag}.deb",
|
|
comingSoon: true,
|
|
},
|
|
];
|
|
|
|
export default function DownloadApp() {
|
|
const [systems, setSystems] = useState(systemsTemplate);
|
|
|
|
const getLatestReleaseInfo = async (repoOwner, repoName) => {
|
|
const url = `https://api.github.com/repos/${repoOwner}/${repoName}/releases/latest`;
|
|
try {
|
|
const response = await axios.get(url);
|
|
return response.data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const extractAppName = (fileName) => {
|
|
// Extract appname using a regex that matches the provided file formats
|
|
const regex = /^(.*?)-(?:mac|win|linux)-(?:arm64|x64|amd64)-.*$/;
|
|
const match = fileName.match(regex);
|
|
return match ? match[1] : null;
|
|
};
|
|
|
|
useEffect(() => {
|
|
const updateDownloadLinks = async () => {
|
|
try {
|
|
const releaseInfo = await getLatestReleaseInfo("janhq", "jan");
|
|
|
|
// Extract appname from the first asset name
|
|
const firstAssetName = releaseInfo.assets[0].name;
|
|
const appname = extractAppName(firstAssetName);
|
|
|
|
if (!appname) {
|
|
console.error(
|
|
"Failed to extract appname from file name:",
|
|
firstAssetName
|
|
);
|
|
|
|
return;
|
|
}
|
|
|
|
// Remove 'v' at the start of the tag_name
|
|
const tag = releaseInfo.tag_name.startsWith("v")
|
|
? releaseInfo.tag_name.substring(1)
|
|
: releaseInfo.tag_name;
|
|
|
|
const updatedSystems = systems.map((system) => {
|
|
const downloadUrl = system.fileFormat
|
|
.replace("{appname}", appname)
|
|
.replace("{tag}", tag);
|
|
return {
|
|
...system,
|
|
href: `https://github.com/janhq/jan/releases/download/${releaseInfo.tag_name}/${downloadUrl}`,
|
|
};
|
|
});
|
|
|
|
setSystems(updatedSystems);
|
|
} catch (error) {
|
|
console.error("Failed to update download links:", error);
|
|
}
|
|
};
|
|
|
|
updateDownloadLinks();
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex flex-col lg:flex-row items-center justify-center gap-4 mb-4">
|
|
<span className="text-zinc-500 text-lg font-medium inline-block">
|
|
Download for PC
|
|
</span>
|
|
<div className="bg-yellow-50 text-yellow-700 space-x-2 px-4 py-2 border border-yellow-400 rounded-lg text-base">
|
|
<span>🚧</span>
|
|
<span className="font-semibold">Warning:</span>
|
|
<span className="font-medium">
|
|
Jan is in the process of being built. Expect bugs!
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="mx-auto text-center">
|
|
{systems.map((system, i) => (
|
|
<a
|
|
key={i}
|
|
href={system.href}
|
|
className={twMerge(
|
|
"btn-shadow inline-flex m-2 px-4 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 border border-zinc-200 dark:border-gray-700 text-black dark:text-white bg-zinc-50 min-w-[150px] dark:bg-[#18181B] h-[36px]",
|
|
system.comingSoon && "pointer-events-none"
|
|
)}
|
|
>
|
|
<system.logo />
|
|
<span className="text-sm">{system.name}</span>
|
|
{system.comingSoon && (
|
|
<span className="bg-zinc-200 py-0.5 px-2 inline-block ml-2 rounded-md text-xs h-[20px] dark:text-black">
|
|
Coming Soon
|
|
</span>
|
|
)}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|