Updated

frontend/@dasig/components/Background.tsx

@@ -0,0 +1,50 @@
+// import '../styles/Background.sass'
+// import { Show, createSignal } from 'solid-js'
+// import fs from 'fs'
+// import webpPath from '../images/background.webp'
+// import avifPath from '../images/background.avif'
+// import noBackground from '../images/no-background.webp'
+
+// interface Props {
+//   image?: boolean
+//   color?: string
+// }
+
+// let [imageLoaded, setImageLoaded] = createSignal(false)
+
+// const checkBackground = () => {
+//   if (!fs.existsSync(avifPath.src) && !fs.existsSync(webpPath.src)) {
+//     setImageLoaded(true)
+//   } else {
+//     setImageLoaded(false)
+//   }
+// }
+
+// export default (props: Props) => {
+//   checkBackground()
+
+//   return (
+//     <>
+//       <Show when={props.image}>
+//         <Show when={imageLoaded()}>
+//           <picture class="fullscreen">
+//             <source srcset={avifPath.src} type="image/avif" />
+//             <source srcset={webpPath.src} type="image/webp" />
+//             <source srcset={noBackground.src} type="image/webp" />
+//             <img width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
+//           </picture>
+//         </Show>
+//         <Show when={!imageLoaded()}>
+//           <picture class="fullscreen">
+//             <source srcset={noBackground.src} type="image/webp" />
+//             <img width="1920" height="auto" decoding="async" loading="lazy" alt="An alternative background if found no image background" />
+//           </picture>
+//         </Show>
+//       </Show>
+
+//       <Show when={!props.image}>
+//         <div style={{ background: props.color }} class="fullscreen" />
+//       </Show>
+//     </>
+//   )
+// }

frontend/@dasig/components/Box.tsx

@@ -0,0 +1,22 @@
+import { createMemo, type JSXElement } from "solid-js";
+import "../styles/Box.sass";
+
+interface Props {
+  thickness: number;
+  color?: string;
+  children: JSXElement;
+  curved?: boolean;
+}
+
+export default (props: Props) => {
+  const boxClass = createMemo(() => (props.curved ? "curvedbox" : "box"));
+
+  return (
+    <section
+      class={boxClass()}
+      style={{ border: `${props.thickness}px solid ${props.color || "white"}` }}
+    >
+      {props.children}
+    </section>
+  );
+};

frontend/@dasig/components/Button.tsx

@@ -0,0 +1,124 @@
+import { Match, Show, Switch } from "solid-js";
+import "../styles/Button.sass";
+
+interface Props {
+  label?: string;
+  to?: string;
+  onClick?: () => void;
+  edges?: "curved" | "rounded" | "flat";
+  design?:
+  | "bu-primary"
+  | "bu-link"
+  | "bu-info"
+  | "bu-success"
+  | "bu-warning"
+  | "bu-danger"
+  | "bu-dark"
+  | "bu-light"
+  | "bu-text"
+  | "bu-ghost"
+  | "bo-primary"
+  | "bo-secondary"
+  | "bo-success"
+  | "bo-danger"
+  | "bo-warning"
+  | "bo-info"
+  | "bo-light"
+  | "bo-dark"
+  | "bo-link";
+  submit?: boolean;
+  newtab?: boolean;
+}
+
+const getBorderRadius = (edge: Props["edges"]) => {
+  switch (edge) {
+    case "curved":
+      return "border-radius: 6px";
+    case "rounded":
+      return "border-radius: 32px";
+    case "flat":
+      return "border-radius: 0";
+    default:
+      return "border-radius: 0";
+  }
+};
+
+export default (props: Props) => {
+  const borderRadius = getBorderRadius(props.edges);
+
+  return (
+    <>
+      <Show when={props.to}>
+        <Switch>
+          <Match when={props.design}>
+            <a
+              href={props.to}
+              aria-label={props.label}
+              rel="noopener"
+              target={props.newtab ? "_blank" : "_self"}
+              data-astro-prefetch
+            >
+              <button type="button" class={props.design} style={borderRadius}>
+                {props.label || "Click Me!"}
+              </button>
+            </a>
+          </Match>
+          <Match when={!props.design}>
+            <a
+              href={props.to}
+              aria-label={props.label}
+              rel="noopener"
+              target={props.newtab ? "_blank" : "_self"}
+              data-astro-prefetch
+            >
+              <button type="button" class="button" style={borderRadius}>
+                {props.label || "Click Me!"}
+              </button>
+            </a>
+          </Match>
+        </Switch>
+      </Show>
+
+      <Show when={!props.to}>
+        <Switch>
+          <Match when={props.design}>
+            <Show when={props.submit}>
+              <button class={props.design} type="submit" style={borderRadius}>
+                {props.label || "Click Me!"}
+              </button>
+            </Show>
+
+            <Show when={!props.submit}>
+              <button
+                type="button"
+                class={props.design}
+                onClick={props.onClick}
+                style={borderRadius}
+              >
+                {props.label || "Click Me!"}
+              </button>
+            </Show>
+          </Match>
+          <Match when={!props.design}>
+            <Show when={props.submit}>
+              <button class="button" type="submit" style={borderRadius}>
+                {props.label || "Click Me!"}
+              </button>
+            </Show>
+
+            <Show when={!props.submit}>
+              <button
+                type="button"
+                class="button"
+                onClick={props.onClick}
+                style={borderRadius}
+              >
+                {props.label || "Click Me!"}
+              </button>
+            </Show>
+          </Match>
+        </Switch>
+      </Show>
+    </>
+  );
+};

frontend/@dasig/components/Column.tsx

@@ -0,0 +1,18 @@
+import type { JSXElement } from 'solid-js';
+import '../styles/Column.sass';
+
+interface Props {
+  children: JSXElement
+  content?: 'top' | 'center' | 'right' | 'split' | 'spaced'
+  gap?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+        {props.children}
+      </section>
+    </>
+  )
+}

frontend/@dasig/components/Copyright.tsx

@@ -0,0 +1,11 @@
+import { $companyName, $copyRightYear } from "../../configs/config.site.ts";
+
+export default () => {
+  return (
+    <>
+      <span>
+        Copyright © {$copyRightYear.get()} {$companyName.get()} All Rights Reserved.
+      </span>
+    </>
+  )
+}

frontend/@dasig/components/Display.tsx

@@ -0,0 +1,41 @@
+import { type JSXElement, Match, Switch } from 'solid-js';
+import '../styles/Display.sass';
+
+interface Props {
+  children: JSXElement
+  desktop?: boolean
+  tablet?: boolean
+  mobile?: boolean
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Switch>
+        <Match when={props.desktop && !props.tablet && !props.mobile}>
+          <div class="on-desktop-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && props.tablet && !props.mobile}>
+          <div class="on-tablet-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && !props.tablet && props.mobile}>
+          <div class="on-mobile-only">{props.children}</div>
+        </Match>
+
+        <Match when={props.desktop && props.tablet && !props.mobile}>
+          <div class="on-desktop-tablet-only">{props.children}</div>
+        </Match>
+
+        <Match when={props.desktop && !props.tablet && props.mobile}>
+          <div class="on-desktop-mobile-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && props.tablet && props.mobile}>
+          <div class="on-tablet-mobile-only">{props.children}</div>
+        </Match>
+      </Switch>
+    </>
+  )
+}

frontend/@dasig/components/HTML.tsx

@@ -0,0 +1,72 @@
+import { type JSXElement, Show } from "solid-js";
+import { $fontSource } from "../../configs/config.site.ts";
+import background1 from "../images/background.avif";
+import background2 from "../images/background.webp";
+import "../styles/HTML.sass";
+
+interface Props {
+  name: string;
+  description: string;
+  children: JSXElement;
+  font?:
+  | "roboto"
+  | "inter"
+  | "montserrat"
+  | "open-sans"
+  | "public-sans"
+  | string;
+  preloadBackground?: boolean;
+  author: string;
+  assets: JSXElement;
+  scripts: JSXElement;
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <html lang="en">
+        <head>
+          <base href="/" />
+          <meta charset="utf-8" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, viewport-fit=cover"
+          />
+          <meta name="name" content={props.name} />
+          <meta name="description" content={props.description} />
+          <meta name="title" property="og:title" content={props.name} />
+          <meta name="keywords" content="HTML, CSS, JavaScript" />
+          <meta name="developer" content={props.author} />
+          <meta property="og:description" content={props.description} />
+          <meta property="og:type" content="website" />
+          <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+          <Show when={$fontSource.get() === "cdn"}>
+            <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+          </Show>
+          <Show when={props.preloadBackground}>
+            <link
+              rel="preload"
+              href={background1}
+              as="image"
+              type="image/svg+xml"
+            />
+            <link
+              rel="preload"
+              href={background2}
+              as="image"
+              type="image/svg+xml"
+            />
+          </Show>
+          {props.assets}
+        </head>
+
+        <body>
+          <div class={props.font} id="app">
+            {props.children}
+          </div>
+          {props.scripts}
+        </body>
+      </html>
+    </>
+  );
+};

frontend/@dasig/components/Padding.tsx

@@ -0,0 +1,13 @@
+import { type JSXElement } from 'solid-js'
+
+interface Props {
+  left: number
+  right: number
+  top: number
+  bottom: number
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return <div style={{ padding: `${props.top || 0}rem ${props.right}rem ${props.bottom || 0}rem ${props.left}rem` }}>{props.children}</div>
+}

frontend/@dasig/components/Page.tsx

@@ -0,0 +1,28 @@
+import { Title } from "@solidjs/meta";
+import { type JSXElement, Show } from "solid-js";
+import "../styles/Page.sass";
+
+interface Props {
+  children?: JSXElement;
+  alignment?: "row" | "column";
+  title: string;
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.alignment}>
+        <main class={props.alignment}>
+          <Title>{props.title}</Title>
+          {props.children}
+        </main>
+      </Show>
+      <Show when={!props.alignment}>
+        <main class="page">
+          <Title>{props.title}</Title>
+          {props.children}
+        </main>
+      </Show>
+    </>
+  );
+};