From 11fd60da81dd78f5fb99bc061078e1b13bbe082a Mon Sep 17 00:00:00 2001 From: LynithDev <61880709+LynithDev@users.noreply.github.com> Date: Mon, 16 Oct 2023 21:23:42 +0200 Subject: Button + Section component, new Icon component + new colors --- apps/website/src/components/base/Button.astro | 57 ++++++++++++++++ apps/website/src/components/base/Header.astro | 13 +++- apps/website/src/components/base/Navbar.astro | 4 +- .../src/components/base/NavbarElement.astro | 32 ++++----- apps/website/src/components/base/Section.astro | 17 +++++ .../website/src/components/icons/ChevronDown.astro | 16 ----- apps/website/src/components/icons/Icon.astro | 77 ++++++++++++++++++++++ .../src/components/icons/impl/book-open.svg | 3 + .../src/components/icons/impl/chevron-down.svg | 3 + .../website/src/components/icons/impl/download.svg | 3 + apps/website/src/components/logos/Logo.astro | 4 +- 11 files changed, 191 insertions(+), 38 deletions(-) create mode 100644 apps/website/src/components/base/Button.astro create mode 100644 apps/website/src/components/base/Section.astro delete mode 100644 apps/website/src/components/icons/ChevronDown.astro create mode 100644 apps/website/src/components/icons/Icon.astro create mode 100644 apps/website/src/components/icons/impl/book-open.svg create mode 100644 apps/website/src/components/icons/impl/chevron-down.svg create mode 100644 apps/website/src/components/icons/impl/download.svg (limited to 'apps/website/src/components') 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; +--- + + + {iconLeft && } + {text ? text : } + {iconRight && } + 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 { - 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}` : ""); --- - + 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"; --- -
+
-
\ No newline at end of file +
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 { {element.text && element.text} {element.logo && } - {element.dropdown && } + {element.dropdown && } ) : (

{element.text && element.text} {element.logo && } - {element.dropdown && } + {element.dropdown && }

)} {element.dropdown && ( - - )} - \ No newline at end of file + 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}` : ""); +--- + +
+ +
diff --git a/apps/website/src/components/icons/ChevronDown.astro b/apps/website/src/components/icons/ChevronDown.astro deleted file mode 100644 index 5cb98e4..0000000 --- a/apps/website/src/components/icons/ChevronDown.astro +++ /dev/null @@ -1,16 +0,0 @@ ---- -import type { HTMLAttributes } from 'astro/types'; - -interface Props extends HTMLAttributes<"svg"> { - size?: number; -} - -const { - size = 16, - ...attr -} = Astro.props; ---- - - - - \ No newline at end of file diff --git a/apps/website/src/components/icons/Icon.astro b/apps/website/src/components/icons/Icon.astro new file mode 100644 index 0000000..bf2b362 --- /dev/null +++ b/apps/website/src/components/icons/Icon.astro @@ -0,0 +1,77 @@ +--- +export type Icons = "chevron-down" | "download" | "book-open"; + +import { parse } from 'node-html-parser'; +import type { HTMLAttributes } from "astro/types"; + +interface Props extends HTMLAttributes<"svg"> { + icon: Icons; + size?: number | [number, number]; +} + +async function getSVG(name: string) { + const file = await import(`./impl/${name}.svg?raw` /* @vite-ignore */); + + if (!file) { + throw new Error(`${name} not found`); + } + + const content = parse(file.default); + + const svg = content.querySelector('svg'); + + if (!svg) { + throw new Error(`${name} is not a valid SVG`); + } + + const { attributes, innerHTML } = svg; + + return { + attributes, + innerHTML, + }; +} + +const { + icon, + size, + ...attributes +} = Astro.props as Props; + +let svgAttributes = {}; +let html = ""; + +try { + const sizeAttributes = () => { + if (!size) { + return {}; + } + + if (Array.isArray(size)) { + return { + width: size[0], + height: size[1], + }; + } + + return { + width: size, + height: size, + }; + } + + const { attributes: baseAttributes, innerHTML } = await getSVG(icon); + svgAttributes = { + ...baseAttributes, + ...attributes, + ...sizeAttributes(), + }; + + const colorRegex = /(fill|stroke)=\"([^"]*)\"/g; + html = innerHTML.replaceAll(colorRegex, '$1="currentColor"'); +} catch (err) { + +} +--- + + diff --git a/apps/website/src/components/icons/impl/book-open.svg b/apps/website/src/components/icons/impl/book-open.svg new file mode 100644 index 0000000..37cf696 --- /dev/null +++ b/apps/website/src/components/icons/impl/book-open.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/website/src/components/icons/impl/chevron-down.svg b/apps/website/src/components/icons/impl/chevron-down.svg new file mode 100644 index 0000000..910a0b5 --- /dev/null +++ b/apps/website/src/components/icons/impl/chevron-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/website/src/components/icons/impl/download.svg b/apps/website/src/components/icons/impl/download.svg new file mode 100644 index 0000000..cd8a6cb --- /dev/null +++ b/apps/website/src/components/icons/impl/download.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/website/src/components/logos/Logo.astro b/apps/website/src/components/logos/Logo.astro index 0532396..2fd6bea 100644 --- a/apps/website/src/components/logos/Logo.astro +++ b/apps/website/src/components/logos/Logo.astro @@ -10,7 +10,7 @@ export interface Props extends HTMLAttributes<"svg"> { silent?: boolean, } -const { +const { logo, silent = false, size = undefined, @@ -44,7 +44,7 @@ try { svg = svg.replace(/ `${key}="${value}"`).join(" ")}`); } catch (err) { - if (typeof silent != "boolean" || silent == false) console.error(err); + } --- -- cgit