Skip to content

Commit

Permalink
add version dropdown to downloads page
Browse files Browse the repository at this point in the history
  • Loading branch information
@lohit-bruno
lohit-bruno committed Jul 16, 2024
1 parent a838963 commit c6c1889
Showing 1 changed file with 136 additions and 11 deletions.
147 changes: 136 additions & 11 deletions src/pages/downloads.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Footer from 'components/Footer';
import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
import GlobalStyle from '../globalStyles';
import { useState } from 'react';

export async function getStaticProps() {
const res = await fetch('https://api.github.com/repos/usebruno/bruno/releases/latest')
Expand All @@ -24,6 +25,12 @@ export async function getStaticProps() {
}

export default function Downloads({ latestVersion, releaseDate }) {
const [selectedVersion, setSelectedVersion] = useState(latestVersion);

const handleVersionSelect = (v) => {
setSelectedVersion(v);
}

return (
<div className="container flex flex-col root downloads-page" style={{fontFamily: 'Inter', maxWidth: '1280px'}}>
<Head>
Expand Down Expand Up @@ -80,7 +87,10 @@ export default function Downloads({ latestVersion, releaseDate }) {

<TabPanel>
<div className="overflow-x-auto relative">
<h1 className="text-xl font-bold leading-tight w-full">Binaries</h1>
<h1 className="text-xl font-bold leading-tight w-full flex flex-row items-center">
Binaries
<VersionSelector selectedVersion={selectedVersion} handleVersionSelect={handleVersionSelect} />
</h1>

<table className="text-left text-gray-500 mt-6">
<thead className="text-xs text-gray-700 uppercase bg-gray-50">
Expand All @@ -99,7 +109,7 @@ export default function Downloads({ latestVersion, releaseDate }) {
<IconBrandApple className="text-gray-500" size={24} strokeWidth={2}/><span className="label ml-2">Mac x64</span>
</td>
<td className="py-3 pl-6 pr-10">
<a href={`https://github.com/usebruno/bruno/releases/download/v${latestVersion}/bruno_${latestVersion}_x64_mac.dmg`} target="_blank" rel="noreferrer" className='link'>
<a href={`https://github.com/usebruno/bruno/releases/download/v${selectedVersion}/bruno_${selectedVersion}_x64_mac.dmg`} target="_blank" rel="noreferrer" className='link'>
Download
</a>
</td>
Expand All @@ -110,7 +120,7 @@ export default function Downloads({ latestVersion, releaseDate }) {
<IconBrandApple className="text-gray-500" size={24} strokeWidth={2}/><span className="label ml-2">Mac x64 (Portable)</span>
</td>
<td className="py-3 pl-6 pr-10">
<a href={`https://github.com/usebruno/bruno/releases/download/v${latestVersion}/bruno_${latestVersion}_x64_mac.zip`} target="_blank" rel="noreferrer" className='link'>
<a href={`https://github.com/usebruno/bruno/releases/download/v${selectedVersion}/bruno_${selectedVersion}_x64_mac.zip`} target="_blank" rel="noreferrer" className='link'>
Download
</a>
</td>
Expand All @@ -121,7 +131,7 @@ export default function Downloads({ latestVersion, releaseDate }) {
<IconBrandApple className="text-gray-500" size={24} strokeWidth={2}/><span className="label ml-2">Mac Apple Silicon</span>
</td>
<td className="py-3 pl-6 pr-10">
<a href={`https://github.com/usebruno/bruno/releases/download/v${latestVersion}/bruno_${latestVersion}_arm64_mac.dmg`} target="_blank" rel="noreferrer" className='link'>
<a href={`https://github.com/usebruno/bruno/releases/download/v${selectedVersion}/bruno_${selectedVersion}_arm64_mac.dmg`} target="_blank" rel="noreferrer" className='link'>
Download
</a>
</td>
Expand All @@ -132,7 +142,7 @@ export default function Downloads({ latestVersion, releaseDate }) {
<IconBrandApple className="text-gray-500" size={24} strokeWidth={2}/><span className="label ml-2">Mac Apple Silicon (Portable)</span>
</td>
<td className="py-3 pl-6 pr-10">
<a href={`https://github.com/usebruno/bruno/releases/download/v${latestVersion}/bruno_${latestVersion}_arm64_mac.zip`} target="_blank" rel="noreferrer" className='link'>
<a href={`https://github.com/usebruno/bruno/releases/download/v${selectedVersion}/bruno_${selectedVersion}_arm64_mac.zip`} target="_blank" rel="noreferrer" className='link'>
Download
</a>
</td>
Expand All @@ -152,7 +162,10 @@ export default function Downloads({ latestVersion, releaseDate }) {

<TabPanel>
<div className="overflow-x-auto relative">
<h1 className="text-xl font-bold leading-tight w-full">Binaries</h1>
<h1 className="text-xl font-bold leading-tight w-full flex flex-row items-center">
Binaries
<VersionSelector selectedVersion={selectedVersion} handleVersionSelect={handleVersionSelect} />
</h1>
<table className="text-left text-gray-500 mt-6">
<thead className="text-xs text-gray-700 uppercase bg-gray-50">
<tr>
Expand All @@ -170,7 +183,7 @@ export default function Downloads({ latestVersion, releaseDate }) {
<IconBrandUbuntu className="text-gray-500" size={24} strokeWidth={2}/><span className="label ml-2">Ubuntu / Debian</span>
</td>
<td className="py-3 pl-6 pr-10">
<a href={`https://github.com/usebruno/bruno/releases/download/v${latestVersion}/bruno_${latestVersion}_amd64_linux.deb`} target="_blank" rel="noreferrer" className='link'>
<a href={`https://github.com/usebruno/bruno/releases/download/v${selectedVersion}/bruno_${selectedVersion}_amd64_linux.deb`} target="_blank" rel="noreferrer" className='link'>
Download
</a>
</td>
Expand All @@ -181,7 +194,7 @@ export default function Downloads({ latestVersion, releaseDate }) {
<IconDeviceDesktop className="text-gray-500" size={24} strokeWidth={2}/><span className="label ml-2">Linux AppImage</span>
</td>
<td className="py-3 pl-6 pr-10">
<a href={`https://github.com/usebruno/bruno/releases/download/v${latestVersion}/bruno_${latestVersion}_x86_64_linux.AppImage`} target="_blank" rel="noreferrer" className='link'>
<a href={`https://github.com/usebruno/bruno/releases/download/v${selectedVersion}/bruno_${selectedVersion}_x86_64_linux.AppImage`} target="_blank" rel="noreferrer" className='link'>
Download
</a>
</td>
Expand Down Expand Up @@ -225,7 +238,10 @@ export default function Downloads({ latestVersion, releaseDate }) {

<TabPanel>
<div className="overflow-x-auto relative">
<h1 className="text-xl font-bold leading-tight w-full">Binaries</h1>
<h1 className="text-xl font-bold leading-tight w-full flex flex-row items-center">
Binaries
<VersionSelector selectedVersion={selectedVersion} handleVersionSelect={handleVersionSelect} />
</h1>
<table className="text-left text-gray-500 mt-6">
<thead className="text-xs text-gray-700 uppercase bg-gray-50">
<tr>
Expand All @@ -243,7 +259,7 @@ export default function Downloads({ latestVersion, releaseDate }) {
<IconBrandWindows className="text-gray-500" size={24} strokeWidth={2}/><span className="label ml-2">Windows x64</span>
</td>
<td className="py-3 pl-6 pr-10">
<a href={`https://github.com/usebruno/bruno/releases/download/v${latestVersion}/bruno_${latestVersion}_x64_win.exe`} target="_blank" rel="noreferrer" className='link'>
<a href={`https://github.com/usebruno/bruno/releases/download/v${selectedVersion}/bruno_${selectedVersion}_x64_win.exe`} target="_blank" rel="noreferrer" className='link'>
Download
</a>
</td>
Expand All @@ -254,7 +270,7 @@ export default function Downloads({ latestVersion, releaseDate }) {
<IconBrandWindows className="text-gray-500" size={24} strokeWidth={2}/><span className="label ml-2">Windows x64 (Portable)</span>
</td>
<td className="py-3 pl-6 pr-10">
<a href={`https://github.com/usebruno/bruno/releases/download/v${latestVersion}/bruno_${latestVersion}_x64_win.zip`} target="_blank" rel="noreferrer" className='link'>
<a href={`https://github.com/usebruno/bruno/releases/download/v${selectedVersion}/bruno_${selectedVersion}_x64_win.zip`} target="_blank" rel="noreferrer" className='link'>
Download
</a>
</td>
Expand Down Expand Up @@ -288,4 +304,113 @@ export default function Downloads({ latestVersion, releaseDate }) {
<Footer/>
</div>
);
};const VersionSelector = ({ handleVersionSelect, selectedVersion }) => {
const versions = [
"1.20.4",
"1.20.3",
"1.20.2",
"1.20.1",
"1.20.0",
"1.19.0",
"1.18.1",
"1.18.0",
"1.17.0",
"1.16.1",
"1.16.0",
"1.14.0",
"1.13.1",
"1.13.0",
"1.12.3",
"1.12.2",
"1.12.1",
"1.12.0",
"1.11.0",
"1.10.0",
"1.9.0",
"1.8.0",
"1.7.1",
"1.7.0",
"1.6.1",
"1.6.0",
"1.5.1",
"1.5.0",
"1.4.0",
"1.3.2",
"1.3.1",
"1.3.0",
"1.2.0",
"1.1.1",
"1.1.0",
"1.0.1",
"1.0.0",
"0.27.3",
"0.27.2",
"0.27.1",
"0.27.0",
"0.26.0",
"0.25.0",
"0.24.0",
"0.23.0",
"0.22.1",
"0.22.0",
"0.21.1",
"0.21.0",
"0.20.0",
"0.19.0",
"0.18.0",
"0.17.0",
"0.16.6",
"0.16.5",
"0.16.4",
"0.16.3",
"0.16.2",
"0.16.1",
"0.16.0",
"0.15.3",
"0.15.2",
"0.15.1",
"0.15.0",
"0.14.1",
"0.14.0",
"0.13.2",
"0.13.1",
"0.13.0",
"0.12.2",
"0.12.1",
"0.12.0",
"0.11.0",
"0.10.2",
"0.10.1",
"0.10.0",
"0.9.4",
"0.9.3",
"0.9.2",
"0.9.1",
"0.9.0",
"0.8.2",
"0.8.1",
"0.8.0",
"0.7.2",
"0.7.1",
"0.7.0",
"0.6.1",
"0.6.0",
"0.5.0",
"0.4.0",
"0.3.0",
"0.2.0",
"0.1.0",
];

const handleSelect = (e) => {
handleVersionSelect(e.target.value);
};

return (
<select className="mx-4 text-sm" onChange={handleSelect} value={selectedVersion}>
{versions?.map((v) => (
<option value={v}>{v}</option>
))}
</select>
);
};

0 comments on commit c6c1889

Please sign in to comment.