69 lines
2.5 KiB
JavaScript
69 lines
2.5 KiB
JavaScript
import { Button } from "@/components/ui/button"
|
|
import { useTranslation } from "@/utils/translation"
|
|
import { Download } from 'lucide-react'
|
|
import Link from "next/link"
|
|
import Image from "next/image"
|
|
import { Card, CardHeader, CardContent } from "@/components/ui/card"
|
|
import details from "@/data/downloadDetails"
|
|
import { useRouter } from "next/router"
|
|
import { useEffect } from "react"
|
|
import { SiGitlab } from "@icons-pack/react-simple-icons"
|
|
|
|
export async function getServerSideProps(context) {
|
|
const { query } = context;
|
|
const item = details[query.slug] || null;
|
|
return { props: { item } };
|
|
}
|
|
|
|
export default function DownloadPage({ item }) {
|
|
const { t, lang } = useTranslation()
|
|
const router = useRouter()
|
|
|
|
useEffect(() => {
|
|
if (!item) {
|
|
router.push('/download');
|
|
}
|
|
}, [item, router]);
|
|
|
|
if (!item) return null;
|
|
|
|
const Details = t('details.comp')
|
|
|
|
return (
|
|
<main className="px-4 py-12 md:py-24 lg:py-32">
|
|
<div className="container mx-auto px-4 md:px-6 space-y-8">
|
|
<h2 className="text-3xl font-bold sm:text-4xl md:text-5xl text-center">{item.text[lang]}</h2>
|
|
<Image src={item.img} width={800} height={450} className="mx-auto rounded-xl border shadow" />
|
|
<Card className="max-w-[50rem] mx-auto p-8 bg-muted text-lg overflow-auto">
|
|
<Details
|
|
text={item.text[lang]}
|
|
build_date={item.build_date}
|
|
size={item.size}
|
|
hash={item.hash}
|
|
maintainer={item.maintainer} />
|
|
</Card>
|
|
<div className="flex max-[520px]:flex-col flex-wrap justify-center gap-2">
|
|
{item.changelog && (
|
|
<Button asChild variant="outline" size="lg" className="rounded-full text-lg py-6 flex me-4">
|
|
<Link href={item.changelog} download>
|
|
<SiGitlab className="h-4 w-4" />
|
|
{t('details.changelog')}
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
<Button asChild size="lg" className="rounded-full text-lg py-6 flex">
|
|
<Link href={item.href} download>
|
|
<Download className="h-4 w-4" />
|
|
{t('details.download', item.text[lang])}
|
|
</Link>
|
|
</Button>
|
|
<Button asChild variant="outline" size="lg" className="rounded-full text-lg py-6 flex">
|
|
<Link href={`https://efp.balena.io/open-image-url?imageUrl=${item.href}`}>
|
|
{t('details.balenaEtcher')}
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|