Updated

frontend/src/@dasig/components/Copyright.tsx

@@ -1,4 +1,4 @@
-import { $companyName, $copyRightYear } from "configs/config.site"
+import { $companyName, $copyRightYear } from "../../../configs/config.site"
 
 export default () => {
   return (

frontend/src/@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/src/@dasig/components/HTML.tsx

@@ -30,7 +30,7 @@ export default (props: Props) => {
           <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.ico" />
+          <link rel="icon" type="image/svg+xml" href="/favicon.png" />
           <Show when={$fontSource.get() === 'cdn'}>
             <link rel="preconnect" href="https://cdn.jsdelivr.net" />
           </Show>

frontend/src/@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>
+}