Feature/improved downloads (#30)

* First updated downloads page iteration

* Iteration 2 of new downloads

* Removed unused imports

* Added Octokit for typing and ease of use for getting releases

* added error handling and fallback

* Fix for possible infinite loader

* Fixed loader styling in light mode

* Update styles/components/Tabs.module.scss

Co-authored-by: André Oliveira <37463445+SpecialAro@users.noreply.github.com>

Co-authored-by: André Oliveira <37463445+SpecialAro@users.noreply.github.com>

components/Button.tsx

@@ -3,7 +3,9 @@ import styles from "styles/components/Button.module.scss";
 type Props = {
   children: ReactNode;
   cta?: boolean;
+  cta2?: boolean;
   size?: string;
+  square?: boolean;
   onClick?: MouseEventHandler;
   icon?: boolean;
   ["aria-label"]?: string;
@@ -12,7 +14,18 @@ type Props = {
 };
 
 const Button = (props: Props) => {
-  let className = props.cta ? styles.cta : styles.base;
+  let className = styles.base;
+
+  if (props.cta) {
+    className = styles.cta;
+  }
+
+  if (props.cta2) {
+    className = styles.ctaSecondary;
+  }
+  if (props.square) {
+    className += ` ${styles.square}`;
+  }
 
   if (props.size) {
     className += ` ${styles[props.size]}`;

components/Loader.tsx

@@ -0,0 +1,15 @@
+import styles from "styles/components/Loader.module.scss";
+
+// source: https://loading.io/css/
+const Loader = () => {
+  return (
+    <div className={styles["lds-ring"]}>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  );
+};
+
+export default Loader;

components/PlatformDownloads.tsx

@@ -0,0 +1,65 @@
+import { ReactNode } from "react";
+
+import styles from "styles/components/PlatformDownloads.module.scss";
+import Button from "./Button";
+import ExternalLink from "./ExternalLink";
+type Props = {
+  downloadTypes: Array<Type>;
+  grid?: boolean;
+  gridTemplate?: string;
+  gridTemplateArray?: Array<string>;
+};
+type Type = {
+  link?: Link;
+  title?: string;
+  multipleLinks?: Array<Link>;
+};
+export type Link = {
+  name?: string;
+  browser_download_url?: string;
+};
+const PlatformDownloads = (props: Props) => {
+  return (
+    <article className={styles.section}>
+      <div
+        className={styles.links + ` ${props.gridTemplate ? styles[props.gridTemplate] : ""}`}
+        style={props.grid ? { display: "grid" } : undefined}>
+        {props.downloadTypes.map((type, index) => {
+          let content: ReactNode;
+          if (type.link) {
+            content = (
+              <div className={styles.link}>
+                <ExternalLink href={type.link.browser_download_url ?? ""}>
+                  <Button cta2 square>
+                    {type.link.name}
+                  </Button>
+                </ExternalLink>
+              </div>
+            );
+          }
+
+          if (type.multipleLinks) {
+            content = type.multipleLinks.map((altLink) => (
+              <div className={styles.link} key={altLink.name}>
+                <ExternalLink href={altLink.browser_download_url ?? ""}>
+                  <Button cta2 square>
+                    {altLink.name}
+                  </Button>
+                </ExternalLink>
+              </div>
+            ));
+          }
+
+          return (
+            <section key={type.title} style={{ gridArea: props.gridTemplateArray?.[index] ?? "0" }}>
+              <h3>{type.title}</h3>
+              <div className={styles.content}>{content}</div>
+            </section>
+          );
+        })}
+      </div>
+    </article>
+  );
+};
+
+export default PlatformDownloads;

components/Tabs.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import styles from "styles/components/Tabs.module.scss";
+
+type Props = {
+  value?: string;
+  options: Array<Option>;
+  onClick?: Function;
+};
+export type Option = {
+  title: string;
+  key: string;
+};
+const Tabs = (props: Props) => {
+  const [selectedOption, setSelectedOption] = useState<Option>();
+  const control = props.value ?? selectedOption?.key;
+  return (
+    <div className={styles.tabs}>
+      {props.options.map((tab: Option) => (
+        <Tab
+          option={tab}
+          key={tab.key}
+          selected={tab.key === control}
+          onClick={() => {
+            setSelectedOption(tab);
+            if (props.onClick) props.onClick(tab.key);
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+type TabProps = {
+  selected: boolean;
+  option: Option;
+  onClick: Function;
+};
+const Tab = (props: TabProps) => {
+  return (
+    <button
+      className={styles.tab + ` ${props.selected ? styles.selected : ""}`}
+      onClick={() => props.onClick()}>
+      {props.option.title}
+    </button>
+  );
+};
+
+export default Tabs;

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@mdi/js": "^6.6.96",
     "@mdi/react": "^1.6.0",
+    "@octokit/rest": "^19.0.3",
     "next": "12.1.5",
     "react": "18.0.0",
     "react-dom": "18.0.0"