From 5dea009304ea20ef371ce8424504c4cc0e21b94b Mon Sep 17 00:00:00 2001
From: ExampleWasTaken <58574351+ExampleWasTaken@users.noreply.github.com>
Date: Sat, 9 Nov 2024 23:59:35 +0100
Subject: [PATCH 1/2] add alert component

---
 src/components/Alert/Alert.tsx | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/components/Alert/Alert.tsx

diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
new file mode 100644
index 00000000..36306c4b
--- /dev/null
+++ b/src/components/Alert/Alert.tsx
@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface AlertProps {
+    type: 'note' | 'caution' | 'danger';
+    className?: string;
+    children: ReactNode;
+}
+
+export const Alert = ({ type, className, children }: AlertProps) => {
+    let borderColor: string;
+    switch (type) {
+    default:
+    case 'note': {
+        borderColor = 'border-l-cyan';
+        break;
+    }
+    case 'caution': {
+        borderColor = 'border-l-utility-amber';
+        break;
+    }
+    case 'danger': {
+        borderColor = 'border-l-red';
+        break;
+    }
+    }
+
+    return (
+        <div className={twMerge('flex flex-col gap-3 p-5 border-l-8 bg-navy text-quasi-white rounded', borderColor, className)}>
+            {children}
+        </div>
+    );
+};

From 35105d4465066111bb8e3862a868848d3bfa1f13 Mon Sep 17 00:00:00 2001
From: ExampleWasTaken <58574351+ExampleWasTaken@users.noreply.github.com>
Date: Sun, 10 Nov 2024 01:28:34 +0100
Subject: [PATCH 2/2] add support for multi-part downloads

---
 src/components/Downloads/DownloadLinks.tsx | 51 ++++++++++++----------
 src/pages/downloads/index.tsx              | 34 +++++++++++++--
 2 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/src/components/Downloads/DownloadLinks.tsx b/src/components/Downloads/DownloadLinks.tsx
index e000ef8f..2ffb4aaa 100644
--- a/src/components/Downloads/DownloadLinks.tsx
+++ b/src/components/Downloads/DownloadLinks.tsx
@@ -1,31 +1,38 @@
 import Link from 'next/link';
-import Button from '../Button/Button';
+import { Alert } from '../Alert/Alert';
+
+interface Version {
+    name: string;
+    links: string[];
+}
 
 type DownloadProps = {
-    stableLink?: string,
-    devLink?: string,
     aircraft: string,
-
+    note?: string;
+    versions: Version[];
 }
 
-const downloadLinks = ({ stableLink, devLink, aircraft }: DownloadProps) => (
-    <span className="flex flex-col gap-y-1.5">
+const DownloadLinks = ({ versions, note, aircraft }: DownloadProps) => (
+    <div
+        className="mt-4 pb-4 flex flex-col border-b border-b-navy"
+    >
         <h3>{aircraft}</h3>
-        {stableLink && devLink ? (
-            <>
-                <span className="flex gap-x-2.5">
-                    <Link href={stableLink}>
-                        <Button>Stable</Button>
-                    </Link>
-                    <Link href={devLink}>
-                        <Button theme="secondary">Development</Button>
-                    </Link>
-                </span>
-            </>
-        ) : (
-            <p>Use our installer to download.</p>
-        )}
-    </span>
+        <div className="flex flex-col gap-4 mt-4">
+            {note && <Alert type="note">{note}</Alert>}
+
+            <div className="grid grid-cols-2 gap-y-4">
+                {versions.map((version) => (
+                    <ul className="flex flex-col" key={crypto.randomUUID()}>
+                        {version.links.map((link, i) => (
+                            <li key={crypto.randomUUID()}>
+                                <Link className="underline" href={link}>{`${version.name} - Part ${i + 1} of ${version.links.length}`}</Link>
+                            </li>
+                        ))}
+                    </ul>
+                ))}
+            </div>
+        </div>
+    </div>
 );
 
-export default downloadLinks;
+export default DownloadLinks;
diff --git a/src/pages/downloads/index.tsx b/src/pages/downloads/index.tsx
index 4ab2681f..6d73461f 100644
--- a/src/pages/downloads/index.tsx
+++ b/src/pages/downloads/index.tsx
@@ -35,13 +35,39 @@ const Downloads: NextPage = () => (
                 <div className="grow">
                     <h2>Direct Download</h2>
                     <p className="pb-6">If you prefer a direct download, the following links are available.</p>
-                    <div className="flex flex-col lg:flex-row gap-8">
+                    <div className="flex flex-col gap-8">
                         <DownloadLinks
                             aircraft="A32NX"
-                            stableLink="https://github.com/flybywiresim/aircraft/releases/download/assets/stable/A32NX-stable.zip"
-                            devLink="https://github.com/flybywiresim/aircraft/releases/download/assets/master/A32NX-master.7z"
+                            versions={[
+                                {
+                                    name: 'Stable',
+                                    links: ['https://github.com/flybywiresim/aircraft/releases/download/assets/stable/A32NX-stable.7z'],
+                                },
+                                {
+                                    name: 'Development',
+                                    links: ['https://github.com/flybywiresim/aircraft/releases/download/assets/master/A32NX-master.7z'],
+                                },
+                            ]}
+                        />
+
+                        <DownloadLinks
+                            aircraft="A380X"
+                            note="The 8K version must be installed in multiple packages. Download all parts and open the .001 with 7-Zip."
+                            versions={[
+                                {
+                                    name: 'Stable (4K)',
+                                    links: ['https://github.com/flybywiresim/aircraft/releases/download/assets/stable/A380X-stable-4K.7z'],
+                                },
+                                {
+                                    name: 'Stable (8K)',
+                                    links: [
+                                        'https://github.com/flybywiresim/aircraft/releases/download/assets/stable/A380X-stable-8K.7z.001',
+                                        'https://github.com/flybywiresim/aircraft/releases/download/assets/stable/A380X-stable-8K.7z.002',
+                                        'https://github.com/flybywiresim/aircraft/releases/download/assets/stable/A380X-stable-8K.7z.003',
+                                    ],
+                                },
+                            ]}
                         />
-                        <DownloadLinks aircraft="A380X" stableLink="" devLink="" />
                     </div>
                 </div>
             </Container>