From 997b850967df8dc03a7321b167dc9f7b52f98c7a Mon Sep 17 00:00:00 2001
From: Pauline <git@ethanlibs.co>
Date: Sat, 14 Oct 2023 14:24:27 -0400
Subject: migrate(web): migrate from website/new-website to nexus/apps/website

---
 apps/website/src/components/base/Header.astro      | 57 ++++++++++++++
 apps/website/src/components/base/Navbar.astro      | 21 ++++++
 .../src/components/base/NavbarElement.astro        | 86 ++++++++++++++++++++++
 .../src/components/base/ScreenOverlay.astro        | 16 ++++
 .../base/ScrollbarOverlayContainer.astro           | 51 +++++++++++++
 apps/website/src/components/base/Tag.astro         | 14 ++++
 6 files changed, 245 insertions(+)
 create mode 100644 apps/website/src/components/base/Header.astro
 create mode 100644 apps/website/src/components/base/Navbar.astro
 create mode 100644 apps/website/src/components/base/NavbarElement.astro
 create mode 100644 apps/website/src/components/base/ScreenOverlay.astro
 create mode 100644 apps/website/src/components/base/ScrollbarOverlayContainer.astro
 create mode 100644 apps/website/src/components/base/Tag.astro

(limited to 'apps/website/src/components/base')

diff --git a/apps/website/src/components/base/Header.astro b/apps/website/src/components/base/Header.astro
new file mode 100644
index 0000000..ad8267b
--- /dev/null
+++ b/apps/website/src/components/base/Header.astro
@@ -0,0 +1,57 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+const sizes = {
+    "xl": "h1",
+    "lg": "h2",
+    "md": "h3",
+    "sm": "h4",
+    "xs": "h5",
+    "xxs": "h6"  
+};
+
+type Headers = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+interface Props extends HTMLAttributes<Headers> {
+    size: keyof typeof sizes;
+}
+
+const { size, ...attr } = Astro.props;
+const Element = sizes[size] as any; // Unfortunately gotta do this
+---
+
+<Element {...attr}>
+    <slot />
+</Element>
+
+<style>
+    h1 {
+        font-size: theme("fontSize.header-lg");
+        font-weight: 700;
+    }
+
+    h2 {
+        font-size: theme("fontSize.header");
+        font-weight: 700;
+    }
+
+    h3 {
+        font-size: theme("fontSize.header-sm");
+        font-weight: 600;
+    }
+
+    h4 {
+        font-size: theme("fontSize.body-lg");
+        font-weight: 500;
+    }
+
+    h5 {
+        font-size: theme("fontSize.body");
+        font-weight: 500;
+    }
+
+    h6 {
+        font-size: theme("fontSize.body-sm");
+        font-weight: 500;
+    }
+</style>
\ No newline at end of file
diff --git a/apps/website/src/components/base/Navbar.astro b/apps/website/src/components/base/Navbar.astro
new file mode 100644
index 0000000..f4f2f49
--- /dev/null
+++ b/apps/website/src/components/base/Navbar.astro
@@ -0,0 +1,21 @@
+---
+import config from "config";
+import type { Config } from "@webtypes/Config";
+import NavbarElement from "./NavbarElement.astro";
+
+---
+
+<div class="w-full flex flex-row justify-center h-screen max-h-[110px] px-3">
+    <nav class="w-full max-w-[1080px] flex flex-col md:flex-row justify-between items-center">
+        <ul class="flex flex-row justify-start gap-4">
+            {(config as Config).navbar.left.map((element, index) => (
+                <NavbarElement {element} {index} />
+            ))}
+        </ul>
+        <ul class="flex flex-row justify-end gap-4">
+            {(config as Config).navbar.right.map((element, index) => (
+                <NavbarElement {element} {index} />
+            ))}
+        </ul>
+    </nav>
+</div>
\ No newline at end of file
diff --git a/apps/website/src/components/base/NavbarElement.astro b/apps/website/src/components/base/NavbarElement.astro
new file mode 100644
index 0000000..4f82e8b
--- /dev/null
+++ b/apps/website/src/components/base/NavbarElement.astro
@@ -0,0 +1,86 @@
+---
+import ChevronDown from "@components/icons/ChevronDown.astro";
+import type { LogoType, NavbarElement } from "@webtypes/Config";
+import ScreenOverlay from "./ScreenOverlay.astro";
+import Header from "./Header.astro";
+import Tag from "./Tag.astro";
+import Logo from "@components/logos/Logo.astro";
+import ScrollbarOverlayContainer from "./ScrollbarOverlayContainer.astro";
+
+interface Props {
+    element: NavbarElement;
+    index: number;
+}
+
+const {
+    element,
+    index
+} = Astro.props;
+---
+
+<li class="sm:relative max-sm:overflow-hidden flex flex-row justify-center items-center text-center">
+    <label for={`navbar-input-${index}`} class="group">
+
+        {element.path ? (
+            <a href={element.path} class="p-2 flex flex-row justify-center items-center text-gray-700 hover:text-blue-500">
+                {element.text && element.text}
+                {element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType} />}
+                {element.dropdown && <ChevronDown />}
+            </a>
+        ) : (
+            <p class="p-2 flex flex-row justify-center items-center text-gray-700 hover:text-blue-500 cursor-default">
+                {element.text && element.text}
+                {element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType} />}
+                {element.dropdown && <ChevronDown />}
+            </p>
+        )}
+
+        {element.dropdown && (
+            <ScreenOverlay class="max-sm:group-focus-within:opacity-100" />
+            <input type="checkbox" id={`navbar-input-${index}`} class="peer appearance-none absolute">
+            <div class={`transition-opacity
+                absolute right-0 max-sm:bottom-0
+                max-sm:overflow-hidden 
+                max-sm:max-h-[70vh] max-sm:h-screen max-sm:w-screen 
+                pointer-events-none opacity-0
+
+                md:top-full md:right-0
+
+                group-focus-within:pointer-events-auto group-focus-within:opacity-100
+                focus-within:pointer-events-auto focus-within:opacity-100
+                hover:pointer-events-auto hover:opacity-100
+            `}>
+                <ScrollbarOverlayContainer class={`
+                    bg-gray-50 
+                    rounded-t-lg md:rounded-lg 
+                    transition-transform
+                    max-sm:translate-y-1/3 max-sm:left-0
+                    group-focus-within:translate-y-0
+                    max-h-full md:max-h-96 overflow-y-auto
+                `}>
+                    <ul class="p-4">
+                        {element.dropdown.map((item) => (
+                            <li>
+                                <a href={item.path} class="flex sm:min-w-[400px] sm:max-w-[400px]">
+                                    <div class="transition-colors text-left w-full flex flex-row justify-start rounded-md items-center px-6 py-4 gap-6 hover:bg-white-hover">
+                                        <div class="w-[36px]">
+                                            {item.logo && <Logo size={40} logo={item.logo} />}    
+                                        </div>
+
+                                        <div class="flex flex-col justify-start items-start">
+                                            <div class="flex flex-row gap-2">
+                                                <Header size="sm" class="text-gray-800">{item.name}</Header>
+                                                {item.tag && <Tag>{item.tag}</Tag>}
+                                            </div>
+                                            <p class="text-sm text-gray-400 font-light">{item.description}</p>
+                                        </div>
+                                    </div>    
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </ScrollbarOverlayContainer>
+            </div>
+        )}
+    </label>
+</li>
\ No newline at end of file
diff --git a/apps/website/src/components/base/ScreenOverlay.astro b/apps/website/src/components/base/ScreenOverlay.astro
new file mode 100644
index 0000000..7be8bc5
--- /dev/null
+++ b/apps/website/src/components/base/ScreenOverlay.astro
@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+    zIndex?: number;
+}
+
+const {
+    zIndex = 0,
+    ...rest
+} = Astro.props;
+---
+
+<div class="pointer-events-none absolute left-0 top-0">
+    <div class={`transition-opacity fixed opacity-0 w-screen h-screen z-[${zIndex}] bg-black/30 ${rest.class}`} {...rest}></div>
+</div>
\ No newline at end of file
diff --git a/apps/website/src/components/base/ScrollbarOverlayContainer.astro b/apps/website/src/components/base/ScrollbarOverlayContainer.astro
new file mode 100644
index 0000000..d8d315d
--- /dev/null
+++ b/apps/website/src/components/base/ScrollbarOverlayContainer.astro
@@ -0,0 +1,51 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+
+}
+
+const { ...attr } = Astro.props;
+---
+
+<div {...attr}>
+    <slot></slot>
+</div>
+
+<style>
+@media (hover: hover) {
+    div {
+        
+    }
+
+    div::-webkit-scrollbar {
+        display: block;
+        width: 5px;
+    }
+
+    div::-webkit-scrollbar:hover {
+        opacity: 1;
+    }
+
+    div::-webkit-scrollbar-button {
+        display: none;
+    }
+
+    div::-webkit-scrollbar-track {
+        background-color: #00000000;
+    }
+
+    div::-webkit-scrollbar-track-piece {
+        background-color: #00000000;
+    }
+
+    div::-webkit-scrollbar-thumb {
+        background-color: #00000000;
+        border-radius: 24px;
+    }
+
+    div::-webkit-scrollbar-thumb:hover {
+        background-color: #00000040;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/apps/website/src/components/base/Tag.astro b/apps/website/src/components/base/Tag.astro
new file mode 100644
index 0000000..e6fd34f
--- /dev/null
+++ b/apps/website/src/components/base/Tag.astro
@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"span"> {}
+
+const { ...attr } = Astro.props;
+---
+
+<div class="transition-colors text-blue-500 hover:bg-blue-500/20 text-xs font-medium bg-blue-500/10 rounded-md flex flex-col justify-center items-center px-2 py-0.5">
+    <span {...attr}>
+        <slot></slot>
+    </span>
+</div>
+
-- 
cgit