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
---
.../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 +
5 files changed, 86 insertions(+), 16 deletions(-)
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/icons')
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 @@
+
--
cgit