Upd(components/download): Overhaul

Completely overhaul the downloads page to now utilise a selector rather than boxes and buttons as per Oren's request.

src/components/download/banner.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+function Banner() {
+    return (
+        <div className="rounded-lg m-auto w-full p-4 bg-rhino-purple text-white text-center mt-0 mb-4">
+            <p className="md:mb-0 mb-4">For an archive of previous releases, please visit our <a href="https://sourceforge.net/projects/rhino-linux-builder/files/" className="underline">SourceForge</a>.</p>
+            <p>Looking for our docker images? <a href="https://rhinolinux.org/wiki-docker.html" className="underline">Click here</a>.</p>
+        </div>
+    )
+}
+
+export default Banner;

src/components/download/selection.jsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { genericContents, pineContents, rpiContents } from './downloads';
+import Banner from './banner';
+
+const DownloadSelection = () => {
+  const [selectedPlatform, setSelectedPlatform] = useState('generic');
+
+  // Function to render content based on selected platform
+  const renderContent = () => {
+    let contentArray = [];
+
+    if (selectedPlatform === 'generic') {
+      contentArray = genericContents;
+    } else if (selectedPlatform === 'pine') {
+      contentArray = pineContents;
+    } else if (selectedPlatform === 'rpi') {
+      contentArray = rpiContents;
+    }
+
+    return contentArray.map((content, index) => (
+        <div key={index} className="p-4 my-4 bg-indigo-950 text-white rounded-lg shadow-md">
+            <h3 className="text-2xl">{content.title}</h3>
+            <p className="mt-2"><strong>Kernel:</strong> {content.details.kernel}</p>
+            <p><strong>Download Mirror:</strong> <a href={content.details.downloadMirror} target="_blank" rel="noopener noreferrer" className="text-rhino-purple underline">{content.details.downloadMirror}</a></p>
+            <p><strong>Download Size:</strong> {content.details.downloadSize}</p>
+            <p><strong>Source Code:</strong> <a href={content.details.sourceCode} target="_blank" rel="noopener noreferrer" className="text-rhino-purple underline">{content.details.sourceCode}</a></p>
+            <button onClick={() => {
+                navigator.clipboard.writeText(content.details.shasum);
+                alert('SHA256sum copied to clipboard!');
+            }} className="my-4 hover:scale-105 transition-all bg-rhino-purple text-white px-4 py-2 rounded-lg shadow-md">Copy SHA256sum</button>
+            {content.details.login && (
+                <p><strong>Login:</strong> <br /> Username: {content.details.login.username} <br /> Password: {content.details.login.password}</p>
+            )}
+        </div>
+    ));
+  };
+
+  return (
+    <div className="md:w-[65%] w-full mx-auto md:p-0 p-4">
+      <label htmlFor="platform" className="block text-sm font-medium text-white">Select a platform:</label>
+      <select
+        id="platform"
+        value={selectedPlatform}
+        onChange={(e) => setSelectedPlatform(e.target.value)}
+        className="block w-full mt-2 p-2 bg-indigo-950 text-white text-xl border-2 border-rhino-purple rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+      >
+        <option value="generic">Generic (x86_64/ARM64)</option>
+        <option value="pine">Pine64 (ARM64)</option>
+        <option value="rpi">Raspberry Pi (ARM64)</option>
+      </select>
+
+      <div className="content-display mt-6">
+        {renderContent()}
+      </div>
+      <Banner />
+    </div>
+  );
+};
+
+export default DownloadSelection;

src/components/home/developers.jsx

@@ -30,7 +30,7 @@ function Developers() {
                         ))}
                     </div>
                     <div>
-                        <img src={post.image} alt="Image" className="w-full" />
+                        <img src={post.image} alt="Image" className="w-full rounded-lg" />
                     </div>
                 </div>
             ))}

src/components/home/hero.jsx

@@ -12,15 +12,15 @@ function Hero() {
                     The rolling release, Ubuntu-based distribution made <span className="text-rhino-purple"><i>by developers, for developers.</i></span>
                 </h2>
             </div>
-            <img src="/img/home/image.png" className=" lg:w-[65%] hover:scale-[102%] transition-all w-[95%] h-full pt-0 mx-auto rounded-[0.65em]" />
+            <img src="/img/home/image.png" className=" lg:w-[65%] hover:scale-[102%] transition-all w-[95%] h-full pt-0 mx-auto rounded-lg" />
             <div className="flex flex-wrap justify-center mt-4 w-[70%] mx-auto pb-8">
         <Link href="#learn" className="m-2 hover:scale-110 transition-all">
-            <span className="rounded-[0.65em] p-2 bg-rhino-purple text-white text-2xl text-center block">
+            <span className="rounded-lg p-2 bg-rhino-purple text-white text-2xl text-center block">
                 Learn More
             </span>
         </Link>
         <Link href="/download/" className="m-2 hover:scale-110 transition-all">
-            <span className="rounded-[0.65em] p-2 bg-rhino-purple text-white text-2xl text-center block">
+            <span className="rounded-lg p-2 bg-rhino-purple text-white text-2xl text-center block">
                 Download
             </span>
         </Link>

src/components/home/packages.jsx

@@ -10,8 +10,8 @@ const data = [
         ],
         image: "/img/home/rhino-pkg.webp",
         link: {
-            text: "Learn more about Pacstall →",
-            url: "https://pacstall.dev"
+            text: "Learn more about rhino-pkg →",
+            url: "#"
         },
     }
 ]

src/pages/download.jsx

@@ -1,15 +1,15 @@
 import React from "react";
 import Menu from "../components/navbar";
 import Hero from "../components/download/hero";
-import TargetSelector from "../components/download/targetSelector";
+import Selection from "../components/download/selection";
 import Footer from "../components/footer";
 
 export default function Home() {
   return (
     <main>
       <Menu />
       <Hero />
-      <TargetSelector />
+      <Selection />
       <Footer />
     </main>
   );

src/styles/globals.css

@@ -6,5 +6,5 @@
 
 body {
   background-color: #13093c;
-  font-family: "Ubuntu", sans-serif;
+  font-family: "Ubuntu", sans-serif !important;
 }