Button + Section component, new Icon component + new colors

5 files changed, 103 insertions, 20 deletions

diff --git a/apps/website/src/components/base/Button.astro b/apps/website/src/components/base/Button.astro
new file mode 100644
index 0000000..e0787c2
--- /dev/null
+++ b/apps/website/src/components/base/Button.astro
@@ -0,0 +1,57 @@
+---
+import type { Icons } from "@components/icons/Icon.astro";
+import Icon from "@components/icons/Icon.astro";
+import type { HTMLAttributes } from "astro/types";
+
+const styles = {
+	primary: "bg-blue-500 text-white hover:bg-blue-400 active:bg-blue-600 disabled:bg-blue-800 disabled:text-white-1/4",
+	secondary: "bg-blue-100 text-blue-500 hover:bg-blue-50 active:bg-blue-200 disabled:bg-blue-50 disabled:text-blue-200",
+}
+
+const sizes = {
+	sm: "px-4 py-2 text-sm",
+	md: "px-5 py-2 text-md",
+	lg: "px-6 py-3 text-lg rounded-2xl"
+}
+
+const iconSize = {
+	sm: 15,
+	md: 16,
+	lg: 24
+}
+
+interface Props extends HTMLAttributes<"button"> {
+	style?: keyof typeof styles
+	size?: keyof typeof sizes
+	text?: string
+	iconLeft?: Icons
+	iconRight?: Icons
+	href?: string
+}
+
+const {
+	style = "primary",
+	size = "md",
+    text = "",
+	iconLeft = "",
+	iconRight = "",
+	...rest
+} = Astro.props;
+
+const className = [
+	"flex flex-row justify-center items-center text-center focus-visible:ring-offset-4 focus-visible:outline-offset-4",
+	"rounded-xl font-medium",
+	styles[style],
+	sizes[size],
+	"transition-colors",
+	rest.class
+].join(" ");
+
+const Element = rest.href ? "a" : "button" as any;
+---
+
+<Element {...rest} class={className}>
+	{iconLeft && <span class="mr-2"><Icon icon={iconLeft} size={iconSize[size]}></Icon></span>}
+	{text ? text : <slot />}
+	{iconRight && <span class="ml-2"><Icon icon={iconRight} size={iconSize[size]}></Icon></span>}
+</Element>
diff --git a/apps/website/src/components/base/Header.astro b/apps/website/src/components/base/Header.astro
index 1201798..aea04af 100644
--- a/apps/website/src/components/base/Header.astro
+++ b/apps/website/src/components/base/Header.astro
@@ -13,14 +13,21 @@ const sizes = {
 type Headers = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
 interface Props extends HTMLAttributes<Headers> {
-    size: keyof typeof sizes;
+    size?: keyof typeof sizes;
+	align?: "left" | "center" | "right";
 }
 
-const { size, ...attr } = Astro.props;
+const {
+	size = "lg",
+	align = "left",
+	...attr
+} = Astro.props;
 const Element = sizes[size] as any; // Unfortunately gotta do this
+
+const className = `text-${align}` + (attr.class ? ` ${attr.class}` : "");
 ---
 
-<Element {...attr}>
+<Element {...attr} class={className}>
     <slot />
 </Element>
 
diff --git a/apps/website/src/components/base/Navbar.astro b/apps/website/src/components/base/Navbar.astro
index f4f2f49..a3a82fe 100644
--- a/apps/website/src/components/base/Navbar.astro
+++ b/apps/website/src/components/base/Navbar.astro
@@ -5,7 +5,7 @@ import NavbarElement from "./NavbarElement.astro";
 
 ---
 
-<div class="w-full flex flex-row justify-center h-screen max-h-[110px] px-3">
+<div class="absolute 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) => (
@@ -18,4 +18,4 @@ import NavbarElement from "./NavbarElement.astro";
             ))}
         </ul>
     </nav>
-</div>
\ No newline at end of file
+</div>
diff --git a/apps/website/src/components/base/NavbarElement.astro b/apps/website/src/components/base/NavbarElement.astro
index 4f82e8b..a7a0768 100644
--- a/apps/website/src/components/base/NavbarElement.astro
+++ b/apps/website/src/components/base/NavbarElement.astro
@@ -1,11 +1,12 @@
 ---
-import ChevronDown from "@components/icons/ChevronDown.astro";
+import ChevronDown from "@components/icons/ChevronDown.svg";
 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";
+import Icon from "@components/icons/Icon.astro";
 
 interface Props {
     element: NavbarElement;
@@ -25,23 +26,24 @@ const {
             <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 />}
+                {element.dropdown && <Icon icon="chevron-down" />}
             </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 />}
+                {element.dropdown && <Icon icon="chevron-down" />}
             </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 
+            <input tabindex="-1" type="checkbox" id={`navbar-input-${index}`} class="peer appearance-none absolute">
+            <div class={`
+				transition-opacity
+                fixed md: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
@@ -50,9 +52,9 @@ const {
                 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 
+                <ScrollbarOverlayContainer tabindex="-1" 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
@@ -62,9 +64,9 @@ const {
                         {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="transition-colors text-left w-full flex flex-row justify-start rounded-md items-center px-6 py-4 gap-6 hover:bg-blue-50">
                                         <div class="w-[36px]">
-                                            {item.logo && <Logo size={40} logo={item.logo} />}    
+                                            {item.logo && <Logo size={40} logo={item.logo} />}
                                         </div>
 
                                         <div class="flex flex-col justify-start items-start">
@@ -74,7 +76,7 @@ const {
                                             </div>
                                             <p class="text-sm text-gray-400 font-light">{item.description}</p>
                                         </div>
-                                    </div>    
+                                    </div>
                                 </a>
                             </li>
                         ))}
@@ -83,4 +85,4 @@ const {
             </div>
         )}
     </label>
-</li>
\ No newline at end of file
+</li>
diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro
new file mode 100644
index 0000000..318056b
--- /dev/null
+++ b/apps/website/src/components/base/Section.astro
@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"section"> {
+	maxWidth?: number;
+}
+
+const {
+	maxWidth = 800,
+	...rest
+} = Astro.props;
+const className = `max-w-[${maxWidth}px] px-3 md:p-0 flex flex-col justify-center items-center h-screen md:h-4/5 md:min-h-[600px] gap-4` + (rest.class ? ` ${rest.class}` : "");
+---
+
+<section {...rest} class={className}>
+	<slot></slot>
+</section>