Changed from astro to pure solidjs

src/components/Box/Box.sass

@@ -0,0 +1,6 @@
+.box
+  padding: 1rem
+
+.curvedbox
+  @extend .box
+  border-radius: 8px

src/components/Box/Box.tsx

@@ -0,0 +1,19 @@
+import './Box.sass'
+import { type JSXElement, createMemo } from 'solid-js'
+
+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>
+  )
+}

src/components/Button/Button.sass

@@ -0,0 +1,223 @@
+@use '/src/styles/variables.sass' as vars
+@use '/src/styles/fonts.sass' as fonts
+@use 'sass:color'
+
+$bulmaPrimary: rgb(0, 235, 199)
+$bulmaPrimaryText: rgb(0, 31, 26)
+$bulmaLink: rgb(92, 111, 255)
+$bulmaLinkText: rgb(245, 246, 255)
+$bulmaInfo: rgb(128, 217, 255)
+$bulmaInfoText: rgb(0, 36, 51)
+$bulmaSuccess: rgb(91, 205, 154)
+$bulmaSuccessText: rgb(10, 31, 21)
+$bulmaWarning: rgb(255, 191, 41)
+$bulmaWarningText: rgb(41, 29, 0)
+$bulmaDanger: rgb(255, 128, 153)
+$bulmaDangerText: rgb(26, 0, 5)
+$bulmaLight: rgb(255, 255, 255)
+$bulmaLightText: rgb(46, 51, 61)
+$bulmaDark: rgb(57, 63, 76)
+$bulmaDarkText: rgb(243, 244, 246)
+$bulmaText: rgb(31, 34, 41)
+$bulmaTextText: rgb(235, 236, 240)
+$bulmaGhost: rgba(0,0,0,0)
+$bulmaGhostText: rgb(66, 88, 255)
+
+$bootstrapTextLight: rgb(255, 255, 253)
+$bootstrapTextDark: rgb(0, 0, 2)
+$bootstrapTextLink: rgb(139, 185, 254)
+$bootstrapPrimary: rgb(13, 110, 253)
+$bootstrapSecondary: rgb(92, 99, 106)
+$bootstrapSuccess: rgb(21, 115, 71)
+$bootstrapDanger: rgb(187, 45, 59)
+$bootstrapWarning: rgb(255, 202, 44)
+$bootstrapInfo: rgb(49, 210, 242)
+$bootstrapLight: rgb(211, 212, 213)
+$bootstrapDark: rgb(33, 37, 41)
+
+.button
+  background-color: vars.$primaryColor
+  border: none
+  color: white
+  padding: 0.5rem 1.25rem
+  text-align: center
+  text-decoration: none
+  display: inline-block
+  font-size: 1rem
+  font-weight: 500
+  cursor: pointer
+  transition: all 0.2s ease-out
+
+  &:hover
+    background-color: color.adjust(vars.$primaryColor, $blackness: 20%)
+
+  &:active
+    transform: scale(0.95)
+
+.bu-primary
+  @extend .button
+  font-family: fonts.$Inter
+  background-color: $bulmaPrimary
+  color: $bulmaPrimaryText
+  border: none
+  font-size: 1rem
+  border-radius: 0.375rem
+  font-weight: 500
+  padding: 0.5rem 1.25rem
+  height: 2.5rem
+
+  &:hover
+    background-color: color.adjust($bulmaPrimary, $lightness: 10%)
+
+.bu-link
+  @extend .bu-primary
+  background-color: $bulmaLink
+  color: $bulmaLinkText
+
+  &:hover
+    background-color: color.adjust($bulmaLink, $lightness: 5%)
+
+.bu-info
+  @extend .bu-primary
+  background-color: $bulmaInfo
+  color: $bulmaInfoText
+
+  &:hover
+    background-color: color.adjust($bulmaInfo, $lightness: 5%)
+
+.bu-success
+  @extend .bu-primary
+  background-color: $bulmaSuccess
+  color: $bulmaSuccessText
+
+  &:hover
+    background-color: color.adjust($bulmaSuccess, $lightness: 5%)
+
+.bu-warning
+  @extend .bu-primary
+  background-color: $bulmaWarning
+  color: $bulmaWarningText
+
+  &:hover
+    background-color: color.adjust($bulmaWarning, $lightness: 5%)
+
+.bu-danger
+  @extend .bu-primary
+  background-color: $bulmaDanger
+  color: $bulmaDangerText
+
+  &:hover
+    background-color: color.adjust($bulmaDanger, $lightness: 5%)
+
+.bu-light
+  @extend .bu-primary
+  background-color: $bulmaLight
+  color: $bulmaLightText
+
+  &:hover
+    background-color: color.adjust($bulmaLight, $lightness: 5%)
+
+.bu-dark
+  @extend .bu-primary
+  background-color: $bulmaDark
+  color: $bulmaDarkText
+
+  &:hover
+    background-color: color.adjust($bulmaDark, $lightness: 5%)
+
+.bu-text
+  @extend .bu-primary
+  background-color: rgba(0,0,0,0)
+  color: $bulmaTextText
+  text-decoration: underline
+
+  &:hover
+    background-color: hsl(221,14%,14%)
+
+.bu-ghost
+  @extend .bu-primary
+  background-color: $bulmaGhost
+  color: $bulmaGhostText
+
+  &:hover
+    background-color: transparent
+    text-decoration: underline
+
+.bo-primary
+  @extend .button
+  font-family: 'Segoe UI', fonts.$Roboto
+  background-color: $bootstrapPrimary
+  color: $bootstrapTextLight
+  border: none
+  font-size: 1rem
+  border-radius: 0.375rem
+  font-weight: 400
+  padding: 0.5rem 1.25rem
+  height: 2.5rem
+  margin: 0.25rem 0.125rem
+
+  &:hover
+    background-color: color.adjust($bootstrapPrimary, $blackness: 10%)
+
+.bo-secondary
+  @extend .bo-primary
+  background-color: $bootstrapSecondary
+
+  &:hover
+    background-color: color.adjust($bootstrapSecondary, $blackness: 10%)
+
+.bo-success
+  @extend .bo-primary
+  background-color: $bootstrapSuccess
+
+  &:hover
+    background-color: color.adjust($bootstrapSuccess, $blackness: 10%)
+
+.bo-danger
+  @extend .bo-primary
+  background-color: $bootstrapDanger
+
+  &:hover
+    background-color: color.adjust($bootstrapDanger, $blackness: 10%)
+
+.bo-warning
+  @extend .bo-primary
+  background-color: $bootstrapWarning
+  color: $bootstrapTextDark
+
+  &:hover
+    background-color: color.adjust($bootstrapWarning, $lightness: 5%)
+
+.bo-info
+  @extend .bo-primary
+  background-color: $bootstrapInfo
+  color: $bootstrapTextDark
+
+  &:hover
+    background-color: color.adjust($bootstrapInfo, $lightness: 5%)
+
+.bo-light
+  @extend .bo-primary
+  background-color: $bootstrapLight
+  color: $bootstrapTextDark
+
+  &:hover
+    background-color: color.adjust($bootstrapLight, $blackness: 10%)
+
+.bo-dark
+  @extend .bo-primary
+  background-color: $bootstrapDark
+  // color: $bootstrapTextDark
+
+  &:hover
+    background-color: color.adjust($bootstrapDark, $lightness: 10%)
+
+.bo-link
+  @extend .bo-primary
+  background-color: transparent
+  color: $bootstrapTextLink
+  text-decoration: underline
+
+  &:hover
+    color: color.adjust($bootstrapTextLink, $lightness: 5%)
+    background-color: transparent

src/components/Button/Button.tsx

@@ -0,0 +1,84 @@
+import './Button.sass'
+import { Show, Switch, Match } from 'solid-js'
+import { A } from '@solidjs/router'
+
+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} target={props.newtab ? '_blank' : '_self'}>
+              <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} target={props.newtab ? '_blank' : '_self'}>
+              <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 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 class="button" onClick={props.onClick} style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </Show>
+          </Match>
+        </Switch>
+      </Show>
+    </>
+  )
+}

src/components/Column/Column.sass

@@ -0,0 +1,39 @@
+.column-top
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: center
+  align-content: center
+
+.column-center
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: center
+  align-items: center
+  align-content: center
+
+.column-right
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: flex-end
+  align-items: center
+  align-content: center
+
+.column-split
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: center
+  align-content: center
+
+.column-spaced
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: space-around
+  align-items: center
+  align-content: center

src/components/Column/Column.tsx

@@ -0,0 +1,18 @@
+import './Column.sass'
+import type { JSXElement } from 'solid-js'
+
+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>
+    </>
+  )
+}

src/components/Combobox/Combobox.tsx

@@ -1,41 +0,0 @@
-import Input from '../../../fwt/components/Input'
-import { createSignal } from 'solid-js'
-
-interface Props {
-  placeholder?: string
-  value?: string
-  onChange?: (value: string) => void
-  options: string[]
-}
-
-export default (props: Props) => {
-  const [sample, setSample] = createSignal(props.value || '')
-  const [isOpen, setIsOpen] = createSignal(false)
-  const [selectedOption, setSelectedOption] = createSignal('')
-
-  const handleInputChange = (val: string) => {
-    setSample(val)
-    setSelectedOption('')
-    setIsOpen(true)
-  }
-
-  const handleSelectOption = (option: string) => {
-    setSelectedOption(option)
-    setSample(option)
-    setIsOpen(false)
-    props.onChange?.(option)
-  }
-
-  return (
-    <>
-      <Input onChange={handleInputChange} placeholder={props.placeholder || 'Select an option'} value={sample()}></Input>
-      {isOpen() && (
-        <ul>
-          {props.options.map((option, index) => (
-            <li onClick={() => handleSelectOption(option)}>{option}</li>
-          ))}
-        </ul>
-      )}
-    </>
-  )
-}

src/components/Display/Display.sass

@@ -0,0 +1 @@
+@use '/src/styles/breakpoint.sass'

src/components/Display/Display.tsx

@@ -0,0 +1,41 @@
+import './Display.sass'
+import { type JSXElement, Switch, Match } from 'solid-js'
+
+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>
+    </>
+  )
+}

src/components/Footer/Footer.sass

@@ -0,0 +1,13 @@
+@use '/src/styles/breakpoint.sass' as view
+
+.footer
+  padding: 1rem 0
+  margin: 0 2rem
+  position: fixed
+  bottom: 0
+  width: 100%
+  opacity: 0.8
+  font-size: 1rem
+
+  @media only screen and (max-width: view.$tablet)
+    font-size: 0.75rem

src/components/Footer/Footer.tsx

@@ -0,0 +1,16 @@
+import './Footer.sass'
+import type { JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <footer class="footer">
+        <small>{props.children}</small>
+      </footer>
+    </>
+  )
+}

src/components/Form/Form.tsx

@@ -0,0 +1,16 @@
+// import './Form.sass'
+import type { JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <form method="post" enctype="application/x-www-form-urlencoded">
+        {props.children}
+      </form>
+    </>
+  )
+}

src/components/Image/Image.tsx

@@ -0,0 +1,19 @@
+interface Props {
+  avif: string
+  webp: string
+  size?: number
+  alt?: string
+  radius?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <picture>
+        <source srcset={props.avif} type="image/avif" />
+        <source srcset={props.webp} type="image/webp" />
+        <img style={`border-radius: ${props.radius}rem`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
+      </picture>
+    </>
+  )
+}

src/components/Input/Input.tsx

@@ -1,12 +0,0 @@
-import Input from '../../../fwt/components/Input'
-import { createSignal } from 'solid-js'
-
-const [sample, setSample] = createSignal('')
-
-export default () => {
-  return (
-    <>
-      <Input onChange={(val) => setSample(val)}></Input>
-    </>
-  )
-}

src/components/Link/Link.sass

@@ -0,0 +1,3 @@
+a
+  text-decoration: none
+  color: inherit

src/components/Link/Link.tsx

@@ -0,0 +1,18 @@
+import './Link.sass'
+import { A } from '@solidjs/router'
+
+interface Props {
+  to: string
+  children?: any
+  newtab?: boolean
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <A href={props.to} aria-label={`Go to ${props.to}`} target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
+        {props.children}
+      </A>
+    </>
+  )
+}

src/components/Logo/Logo.tsx

@@ -0,0 +1,19 @@
+import webpPath from '../../assets/images/optimized/logo.webp'
+import avifPath from '../../assets/images/optimized/logo.avif'
+
+interface Props {
+  size?: number
+  alt?: string
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <picture>
+        <source srcset={avifPath} type="image/avif" />
+        <source srcset={webpPath} type="image/webp" />
+        <img width={props.size} height="auto" decoding="async" loading="lazy" alt="logo" />
+      </picture>
+    </>
+  )
+}

src/components/Modal/Modal.sass

@@ -0,0 +1,20 @@
+@use '/src/styles/variables.sass' as vars
+@use 'sass:color'
+
+.modal
+  display: flex
+  justify-content: center
+  align-items: center
+  position: fixed
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  backdrop-filter: blur(20px)
+  background-color: rgba(color.adjust(vars.$background, $blackness: 5%), 0.6)
+  z-index: 999
+
+  &__content
+    border-radius: 8px
+    padding: 2rem
+    position: relative

src/components/Modal/Modal.tsx

@@ -0,0 +1,52 @@
+import './Modal.sass'
+import { type JSXElement, Show } from 'solid-js'
+import gsap from 'gsap'
+import Button from '../Button/Button'
+
+interface Props {
+  children: JSXElement
+  background?: string
+  color?: string
+  border?: string
+}
+
+export default (props: Props) => {
+  let dialogRef!: HTMLDivElement
+
+  // const [open, setOpen] = createSignal(false)
+
+  const openHandler = () => {
+    gsap.to(dialogRef, {
+      duration: 0,
+      display: 'flex',
+      ease: 'power2.out',
+    })
+  }
+
+  const closeHandler = () => {
+    gsap.to(dialogRef, {
+      duration: 0,
+      display: 'none',
+      ease: 'power2.out',
+    })
+  }
+
+  return (
+    <>
+      <Button label="OpenDialog" onClick={openHandler}></Button>
+      <div class="modal" ref={dialogRef} onClick={closeHandler}>
+        <Show when={props.border}>
+          <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}`}>
+            {props.children}
+          </div>
+        </Show>
+
+        <Show when={!props.border}>
+          <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
+            {props.children}
+          </div>
+        </Show>
+      </div>
+    </>
+  )
+}

src/components/Optimizers/OptimizeBackground.tsx

@@ -0,0 +1,17 @@
+import sharp from 'sharp'
+
+const convertBackground = async () => {
+  const inputSrc = 'src/assets/images/background.png'
+  const webpOutput = 'src/assets/images/optimized/background.webp'
+  const avifOutput = 'src/assets/images/optimized/background.avif'
+
+  const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(1920).toBuffer()
+  await sharp(avifBuffer).toFile(avifOutput)
+
+  const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(1920).toBuffer()
+  await sharp(webpBuffer).toFile(webpOutput)
+}
+
+export default () => {
+  convertBackground()
+}

src/components/Optimizers/OptimizeImage.tsx

@@ -0,0 +1,21 @@
+import sharp from 'sharp'
+
+interface Props {
+  src: string
+  size?: number
+}
+
+const convertImage = async (props: Props) => {
+  const avifOutputPath = `src/assets/images/optimized/${props.src.split('.').slice(0, -1).join('.')}.avif`
+  const webpOutputPath = `src/assets/images/optimized/${props.src.split('.').slice(0, -1).join('.')}.webp`
+
+  const avifBuffer = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
+  await sharp(avifBuffer).toFile(avifOutputPath)
+
+  const webpBuffer = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
+  await sharp(webpBuffer).toFile(webpOutputPath)
+}
+
+export default (props: Props) => {
+  convertImage(props)
+}

src/components/Optimizers/OptimizeLogo.tsx

@@ -0,0 +1,45 @@
+import sharp from 'sharp'
+import { Image } from '../index'
+
+interface Props {
+  size?: number
+  favicon?: boolean
+}
+
+export default (props: Props) => {
+  const webpImage = 'src/assets/images/optimized/logo.webp'
+  const avifImage = 'src/assets/images/optimized/logo.avif'
+  const inputSrc = 'src/assets/images/logo.png'
+
+  const convertLogo = async (props: Props) => {
+    // const webpImage = 'src/assets/images/optimized/logo.webp'
+    // const avifImage = 'src/assets/images/optimized/logo.avif'
+
+    const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(props.size).toBuffer()
+    await sharp(avifBuffer).toFile(avifImage)
+
+    const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(props.size).toBuffer()
+    await sharp(webpBuffer).toFile(webpImage)
+  }
+
+  const generateFavicon = async () => {
+    const inputSrc = 'src/assets/images/logo.png'
+    const favicon = 'public/favicon.png'
+
+    const faviconBuffer = await sharp(inputSrc).png({ quality: 90 }).resize(50).toBuffer()
+    await sharp(faviconBuffer).toFile(favicon)
+  }
+
+  convertLogo(props)
+
+  if (props.favicon) {
+    generateFavicon()
+  }
+
+  return (
+    <>
+      {/* <Image avif={avifImage} webp={webpImage} size={props.size}></Image> */}
+      <h1>Hello</h1>
+    </>
+  )
+}

src/components/Padding/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>
+}

src/components/Page/Page.sass

@@ -0,0 +1,13 @@
+.page
+  margin: 2rem
+  height: auto
+  min-height: 90vh
+
+.column
+  @extend .page
+  display: flex
+  flex-direction: column
+
+.row
+  @extend .column
+  flex-direction: row

src/components/Page/Page.tsx

@@ -0,0 +1,20 @@
+import './Page.sass'
+import { Show } from 'solid-js'
+
+interface Props {
+  children?: any
+  alignment?: 'row' | 'column'
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.alignment}>
+        <main class={props.alignment}>{props.children}</main>
+      </Show>
+      <Show when={!props.alignment}>
+        <main class="page">{props.children}</main>
+      </Show>
+    </>
+  )
+}

src/components/RegistrationForm/RegistrantionForm.tsx

@@ -1,26 +0,0 @@
-import { Button, Logo, Link, Box, Page, Form, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding } from '../../../fwt/'
-import Input from '../../components/Input/Input'
-import Combobox from '../../components/Combobox/Combobox'
-import { ofetch } from 'ofetch'
-import { createSignal } from 'solid-js'
-
-const api = import.meta.env.BACKEND
-const assessors = await ofetch(api + 'get-list-assessors', { parseResponse: JSON.parse })
-const assessorsIDList = assessors.result
-const assessorsNameList = assessors.result2
-
-const [sample, setSample] = createSignal('')
-
-export default () => {
-  return (
-    <>
-      <Column>
-        <Form>
-          <span>Name</span>
-          {/* <Combobox placeholder="Enter Name" value="1" onChange={() => console.log(1)} /> */}
-          <span>{assessorsNameList}</span>
-        </Form>
-      </Column>
-    </>
-  )
-}

src/components/RegistrationForm/RegistrationForm.sass

@@ -0,0 +1,147 @@
+.aa
+  font-size: 5rem
+
+.combobox__control
+  display: inline-flex
+  justify-content: space-between
+  width: 200px
+  border-radius: 6px
+  font-size: 16px
+  line-height: 1
+  outline: none
+  background-color: white
+  border: 1px solid hsl(240 6% 90%)
+  color: hsl(240 4% 16%)
+  transition: border-color 250ms, color 250ms
+
+  &[data-invalid]
+    border-color: hsl(0 72% 51%)
+    color: hsl(0 72% 51%)
+
+  &_multi
+    width: 100%
+    min-width: 200px
+    max-width: 300px
+
+.combobox__input
+  appearance: none
+  display: inline-flex
+  min-width: 0
+  min-height: 40px
+  padding-left: 16px
+  font-size: 16px
+  background: transparent
+  border-top-left-radius: 6px
+  border-bottom-left-radius: 6px
+  outline: none
+
+  &::placeholder
+    color: hsl(240 4% 46%)
+
+.combobox__trigger
+  appearance: none
+  display: inline-flex
+  justify-content: center
+  align-items: center
+  width: auto
+  outline: none
+  border-top-right-radius: 6px
+  border-bottom-right-radius: 6px
+  padding: 0 10px
+  background-color: hsl(240 5% 96%)
+  border-left: 1px solid hsl(240 6% 90%)
+  color: hsl(240 4% 16%)
+  font-size: 16px
+  line-height: 0
+  transition: 250ms background-color
+
+.combobox__icon
+  height: 20px
+  width: 20px
+  flex: 0 0 20px
+
+.combobox__description
+  margin-top: 8px
+  color: hsl(240 5% 26%)
+  font-size: 12px
+  user-select: none
+
+.combobox__error-message
+  margin-top: 8px
+  color: hsl(0 72% 51%)
+  font-size: 12px
+  user-select: none
+
+.combobox__content
+  background-color: white
+  border-radius: 6px
+  border: 1px solid hsl(240 6% 90%)
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
+  // transform-origin: var(--kb-combobox-content-transform-origin)
+  animation: contentHide 250ms ease-in forwards
+
+  &[data-expanded]
+    animation: contentShow 250ms ease-out
+
+.combobox__listbox
+  overflow-y: auto
+  max-height: 360px
+  padding: 8px
+
+  &:focus
+    outline: none
+
+.combobox__item
+  font-size: 16px
+  line-height: 1
+  color: hsl(240 4% 16%)
+  border-radius: 4px
+  display: flex
+  align-items: center
+  justify-content: space-between
+  height: 32px
+  padding: 0 8px
+  position: relative
+  user-select: none
+  outline: none
+
+  &[data-disabled]
+    color: hsl(240 5% 65%)
+    opacity: 0.5
+    pointer-events: none
+
+  &[data-highlighted]
+    outline: none
+    background-color: hsl(200 98% 39%)
+    color: white
+
+.combobox__section
+  padding: 8px 0 0 8px
+  font-size: 14px
+  line-height: 32px
+  color: hsl(240 4% 46%)
+
+.combobox__item-indicator
+  height: 20px
+  width: 20px
+  display: inline-flex
+  align-items: center
+  justify-content: center
+
+  @keyframes contentShow
+    from
+      opacity: 0
+      transform: translateY(-8px)
+
+    to
+      opacity: 1
+      transform: translateY(0)
+
+  @keyframes contentHide
+    from
+      opacity: 1
+      transform: translateY(0)
+
+    to
+      opacity: 0
+      transform: translateY(-8px)

src/components/RegistrationForm/RegistrationForm.tsx

@@ -0,0 +1,29 @@
+import './RegistrationForm.sass'
+import { Button, Logo, Link, Box, Page, Form, Row, Column, Image, Display, Padding } from '../../components'
+import { ofetch } from 'ofetch'
+import { Combobox } from '@kobalte/core/combobox'
+import { AiTwotoneCheckCircle } from 'solid-icons/ai'
+import { TiArrowSortedDown } from 'solid-icons/ti'
+import { createMemo, createSignal, createUniqueId, For, Show } from 'solid-js'
+
+const OPTIONS = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
+
+// const api = import.meta.env.BACKEND
+// const assessors = await ofetch(api + 'get-list-assessors', { parseResponse: JSON.parse })
+// const assessorsIDList = assessors.result
+// const assessorsNameList = assessors.result2
+
+// const [sample, setSample] = createSignal('')
+
+export default () => {
+  return (
+    <>
+      {/* <Form> */}
+      {/* <span>{OPTIONS}</span>
+      <span>{assessorsNameList}</span> */}
+
+      {/* <span>{sample()}</span> */}
+      {/* </Form> */}
+    </>
+  )
+}

src/components/Row/Row.sass

@@ -0,0 +1,47 @@
+.row-left
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: center
+  align-content: center
+
+.row-center
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: center
+  align-items: center
+  align-content: center
+
+.row-right
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: flex-end
+  align-items: center
+  align-content: center
+
+.row-split
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: center
+  align-content: center
+
+.row-spaced
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-around
+  align-items: center
+  align-content: center
+
+.row-even
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-evenly
+  align-items: center
+  align-content: center

src/components/Row/Row.tsx

@@ -0,0 +1,24 @@
+import './Row.sass'
+import { Show, type JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+  content?: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
+  gap?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.gap}>
+        <section class={`row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+          {props.children}
+        </section>
+      </Show>
+
+      <Show when={!props.gap}>
+        <section class={`row-${props.content || 'center'}`}>{props.children}</section>
+      </Show>
+    </>
+  )
+}

src/components/Table/Table.tsx

@@ -1,7 +1,8 @@
 import './Table.sass'
-import { createSignal, onMount, Index, For } from 'solid-js'
+import { Modal } from '../../components'
+import { createSignal } from 'solid-js'
 import { ofetch } from 'ofetch'
-import { Button } from '../../../fwt'
+// import { Button } from '../../components'
 
 const api = import.meta.env.BACKEND
 
@@ -77,6 +78,12 @@ export default () => {
           </tr> */}
         </tbody>
       </table>
+
+      <div id="modal" style="display: none">
+        <Modal background="rgba(0,0,0,0.5)">
+          <h1>SAMPLE</h1>
+        </Modal>
+      </div>
     </>
   )
 }

src/components/index.ts

@@ -0,0 +1,22 @@
+export { default as Button } from './Button/Button'
+export { default as Box } from './Box/Box'
+export { default as Column } from './Column/Column'
+// export { default as Copyright } from './components/Copyright'
+export { default as Footer } from './Footer/Footer'
+export { default as Form } from './Form/Form'
+// export { default as HTML } from './components/HTML'
+export { default as Image } from './Image/Image'
+export { default as Link } from './Link/Link'
+export { default as Logo } from './Logo/Logo'
+// export { default as Navbar } from './components/Navbar'
+export { default as Page } from './Page/Page'
+export { default as Row } from './Row/Row'
+export { default as Display } from './Display/Display'
+export { default as Padding } from './Padding/Padding'
+export { default as Modal } from './Modal/Modal'
+export { default as Table } from './Table/Table'
+// export { default as Input } from './components/Input'
+
+// export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
+// export { default as OptimizeImage } from './Optimizers/OptimizeImage'
+// export { default as OptimizeLogo } from './Optimizers/OptimizeLogo'

src/layouts/Layout.astro

@@ -1,13 +0,0 @@
----
-const { title } = Astro.props
-
-const websiteName = 'OCBO e-Sign'
-const websiteDescription = 'Digital Signature added for OCBO (Office of the City Building Official)'
-
-import { Background, HTML } from '../../fwt'
----
-
-<HTML title={title} name={websiteName} description={websiteDescription} font="roboto" author="Patrick Alvin Alcala">
-  <Background image />
-  <slot />
-</HTML>

src/layouts/Layout.sass

@@ -0,0 +1,36 @@
+@use '/src/styles/variables.sass' as vars
+@use '/src/styles/fonts.sass' as fonts
+@use '/src/styles/breakpoint.sass' as views
+
+.body
+  color: vars.$textColor
+  font-family: fonts.$Roboto
+  background-image: url('/src/assets/images/optimized/background.avif'), url('/src/assets/images/optimized/background.webp')
+  position: absolute
+  top: 0
+  left: 0
+  min-width: 90vw
+  min-height: 90vh
+  object-fit: cover
+  z-index: -1
+  opacity: 1
+
+.inter
+  @extend .body
+  font-family: fonts.$Inter
+
+.roboto
+  @extend .body
+  font-family: fonts.$Roboto
+
+.montserrat
+  @extend .body
+  font-family: fonts.$Montserrat
+
+.open-sans
+  @extend .body
+  font-family: fonts.$OpenSans
+
+.public-sans
+  @extend .body
+  font-family: fonts.$PublicSans

src/layouts/Layout.tsx

@@ -0,0 +1,23 @@
+import './Layout.sass'
+import { lazy } from 'solid-js'
+import { render } from 'solid-js/web'
+import { Router } from '@solidjs/router'
+
+const root = document.getElementById('root')
+
+const routes = [
+  {
+    path: '/',
+    component: lazy(() => import('../pages/IndexPage/Index.tsx')),
+  },
+  {
+    path: '/main',
+    component: lazy(() => import('../pages/MainPage/Main.tsx')),
+  },
+  {
+    path: '/register',
+    component: lazy(() => import('../pages/RegisterPage/Register.tsx')),
+  },
+]
+
+render(() => <Router>{routes}</Router>, root!)

src/pages/IndexPage/Index.sass

@@ -0,0 +1,12 @@
+@use '/src/styles/variables.sass' as vars
+@use '/src/styles/breakpoint.sass' as views
+
+h1
+  font-size: 3.25rem
+  color: vars.$textColor
+
+  @media only screen and (max-width: views.$mobile)
+    font-size: 2.25rem
+
+.div
+  width: 8rem

src/pages/IndexPage/Index.tsx

@@ -0,0 +1,44 @@
+import './Index.sass'
+import { Button, Page, Padding, Display, Row, Logo, Column, Box } from '../../components'
+
+export default () => {
+  return (
+    <>
+      <Page>
+        <Padding left={4.75} right={4.75}>
+          <Display desktop tablet>
+            <Row content="split">
+              <Row content="left" gap={2}>
+                <Logo size={200} />
+                <h1>OCBO e-Sign</h1>
+              </Row>
+
+              <Row content="left" gap={1}>
+                <Button label="Login" edges="curved" design="bo-link" />
+                <Button label="Register" edges="curved" design="bo-primary" to="/register" />
+              </Row>
+            </Row>
+          </Display>
+
+          <Display mobile>
+            <Column content="center">
+              <Logo size={120} />
+              <h1>OCBO e-Sign</h1>
+
+              <Button label="Register" edges="curved" to="/main" />
+            </Column>
+          </Display>
+
+          <Row content="spaced">
+            <Box thickness={1} curved>
+              <h2>Assessor</h2>
+            </Box>
+            <Box thickness={1} curved>
+              <h2>Approver</h2>
+            </Box>
+          </Row>
+        </Padding>
+      </Page>
+    </>
+  )
+}

src/pages/MainPage/Main.sass

@@ -0,0 +1,16 @@
+@use '/src/styles/variables.sass' as vars
+@use 'sass:color'
+
+.padding
+  margin: 11rem
+  border: 1px solid red
+
+h1
+  font-size: 3.25rem
+  color: vars.$textColor
+
+.div
+  width: 8rem
+
+.name
+  font-size: 1.25rem

src/pages/MainPage/Main.tsx

@@ -0,0 +1,35 @@
+import './Main.sass'
+import { Logo, Link, Page, Row, Padding, Table } from '../../components/'
+import { FiLogOut } from 'solid-icons/fi'
+// import { ofetch } from 'ofetch'
+
+export default () => {
+  return (
+    <>
+      <Page alignment="column">
+        <Padding left={4.75} right={4.75}>
+          <Row content="split">
+            <Link to="/">
+              <Row content="left" gap={2}>
+                <Logo size={200} />
+                <h1>OCBO e-Sign</h1>
+              </Row>
+            </Link>
+
+            <Row content="left" gap={1}>
+              <span class="name">Login Name</span>
+              <Link to="/">
+                <FiLogOut size={25} />
+              </Link>
+            </Row>
+          </Row>
+          <Row content="center">
+            <h2>List of Ready to Approve and Sign OP (Order of Payments)</h2>
+          </Row>
+
+          <Table />
+        </Padding>
+      </Page>
+    </>
+  )
+}

src/pages/RegisterPage/Register.tsx

@@ -0,0 +1,36 @@
+import { Button, Logo, Link, Page, Row, Column, Display, Padding } from '../../components'
+// import RegistrationForm from '../components/RegistrationForm/RegistrationForm'
+
+export default () => {
+  return (
+    <>
+      <Page alignment="column">
+        <Padding left={4.75} right={4.75}>
+          <Display desktop tablet>
+            <Row content="split">
+              <Link to="/">
+                <Row content="left" gap={2}>
+                  <Logo size={200} />
+                  <h1>OCBO e-Sign</h1>
+                </Row>
+              </Link>
+
+              <Button label="Register" edges="curved" to="/main" />
+            </Row>
+
+            <Display mobile>
+              <Column content="center">
+                <Link to="/">
+                  <Logo size={120} />
+                  <h1>OCBO e-Sign</h1>
+                </Link>
+
+                <Button label="Register" edges="curved" to="/main" />
+              </Column>
+            </Display>
+          </Display>
+        </Padding>
+      </Page>
+    </>
+  )
+}

src/pages/index.astro

@@ -1,59 +0,0 @@
----
-import Layout from '../layouts/Layout.astro'
-import { Button, Logo, Box, Link, Page, Footer, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding } from '../../fwt/'
-
-// const sample = import.meta.env.SAMPLE
----
-
-<Layout title="OCBO e-Sign">
-  <Page alignment="column">
-    <Padding left={4.75} right={4.75}>
-      <Display desktop tablet>
-        <Row content="split">
-          <Row content="left" gap={2}>
-            <Logo size={200} />
-            <h1>OCBO e-Sign</h1>
-          </Row>
-
-          <Row content="left" gap={1}>
-            <Button label="Login" edges="curved" design="bo-link" to="/login" />
-            <Button label="Register" edges="curved" design="bo-primary" to="/register" />
-          </Row>
-        </Row>
-      </Display>
-
-      <Display mobile>
-        <Column content="center">
-          <Logo size={120} />
-          <h1>OCBO e-Sign</h1>
-
-          <Button label="Register" edges="curved" to="/main" />
-        </Column>
-      </Display>
-
-      <Row content="spaced">
-        <Box thickness={1} curved>
-          <h2>Assessor</h2>
-        </Box>
-        <Box thickness={1} curved>
-          <h2>Approver</h2>
-        </Box>
-      </Row>
-    </Padding>
-  </Page>
-</Layout>
-
-<style lang="sass">
-  @use '/src/styles/variables.sass' as vars
-  @use '/src/styles/breakpoint.sass' as views
-
-  h1
-    font-size: 3.25rem
-    color: vars.$textColor
-
-    @media only screen and (max-width: views.$mobile)
-      font-size: 2.25rem
-
-  .div
-    width: 8rem
-</style>

src/pages/login.astro

@@ -1,67 +0,0 @@
----
-import Layout from '../layouts/Layout.astro'
-import { Button, Logo, Link, Page, Footer, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding } from '../../fwt/'
-import { RiArrowsArrowGoBackLine } from 'solid-icons/ri'
----
-
-<Layout title="Dashboard - OCBO e-Sign">
-  <Page alignment="column">
-    <Padding left={4.75} right={4.75}>
-      <Row content="split">
-        <Display desktop tablet>
-          <Row content="left" gap={2}>
-            <Logo size={200} />
-            <h1>OCBO e-Sign</h1>
-          </Row>
-        </Display>
-
-        <Link to="/">
-          <Row content="left" gap={1}>
-            <span class="name">Go Back</span>
-            <RiArrowsArrowGoBackLine size={25} />
-          </Row>
-        </Link>
-      </Row>
-    </Padding>
-  </Page>
-</Layout>
-
-<style lang="sass">
-  @use '/src/styles/variables.sass' as vars
-  @use 'sass:color'
-
-  .padding
-    margin: 11rem
-    border: 1px solid red
-
-  h1
-    font-size: 3.25rem
-    color: vars.$textColor
-
-  .div
-    width: 8rem
-
-  .name
-    font-size: 1.25rem
-
-  .table
-    width: 100%
-    border-collapse: collapse
-    margin: 2rem
-
-    th, td
-      border: 1px solid vars.$tableBorderColor
-      padding: 0.75rem
-      text-align: left
-      font-size: 1.1rem
-
-    td:nth-child(1)
-      width: 12rem
-
-    td:nth-child(3)
-      width: 9rem
-
-    th
-      background-color: vars.$tableHeaderBackground
-      color: white
-</style>

src/pages/main.astro

@@ -1,82 +0,0 @@
----
-import Layout from '../layouts/Layout.astro'
-import { Button, Logo, Link, Page, Footer, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding, Modal } from '../../fwt/'
-import { FiLogOut } from 'solid-icons/fi'
-import { ofetch } from 'ofetch'
-import Table from '../components/Table/Table'
----
-
-<script>
-  import gsap from 'gsap'
-  const modal = document.getElementById('modal')
-  const modalButton = document.getElementById('modal-button')
-
-  modalButton?.addEventListener('click', () => {
-    gsap.to(modal, {
-      duration: 0,
-      display: 'block',
-      ease: 'power2.out',
-    })
-  })
-
-  modal?.addEventListener('click', () => {
-    gsap.to(modal, {
-      duration: 0,
-      display: 'none',
-      ease: 'power2.out',
-    })
-  })
-</script>
-
-<Layout title="Dashboard - OCBO e-Sign">
-  <Page alignment="column">
-    <Padding left={4.75} right={4.75}>
-      <Row content="split">
-        <Display desktop tablet>
-          <Link to="/">
-            <Row content="left" gap={2}>
-              <Logo size={200} />
-              <h1>OCBO e-Sign</h1>
-            </Row>
-          </Link>
-
-          <Row content="left" gap={1}>
-            <span class="name">Patrick Alvin Alcala</span>
-            <Link to="/"><FiLogOut size={25} /></Link>
-          </Row>
-        </Display>
-
-        <Row content="center">
-          <h2>List of Ready to Approve and Sign OP (Order of Payments)</h2>
-        </Row>
-
-        <Table client:load />
-      </Row>
-    </Padding>
-
-    <div id="modal" style="display: none">
-      <Modal background="rgba(0,0,0,0.5)">
-        <h1>SAMPLE</h1>
-      </Modal>
-    </div>
-  </Page>
-
-  <style lang="sass">
-    @use '/src/styles/variables.sass' as vars
-    @use 'sass:color'
-
-    .padding
-      margin: 11rem
-      border: 1px solid red
-
-    h1
-      font-size: 3.25rem
-      color: vars.$textColor
-
-    .div
-      width: 8rem
-
-    .name
-      font-size: 1.25rem
-  </style>
-</Layout>

src/pages/register.astro

@@ -1,54 +0,0 @@
----
-import Layout from '../layouts/Layout.astro'
-import { Button, Logo, Link, Box, Page, Form, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding } from '../../fwt/'
-import RegistrationForm from '../components/RegistrationForm/RegistrationForm'
----
-
-<Layout title="Register - OCBO e-Sign">
-  <Page alignment="column">
-    <Padding left={4.75} right={4.75}>
-      <Display desktop tablet>
-        <Row content="split">
-          <Link to="/">
-            <Row content="left" gap={2}>
-              <Logo size={200} />
-              <h1>OCBO e-Sign</h1>
-            </Row>
-          </Link>
-
-          <Button label="Register" edges="curved" to="/main" />
-        </Row>
-
-        <Display mobile>
-          <Column content="center">
-            <Link to="/">
-              <Logo size={120} />
-              <h1>OCBO e-Sign</h1>
-            </Link>
-
-            <Button label="Register" edges="curved" to="/main" />
-          </Column>
-        </Display>
-
-        <Column>
-          <RegistrationForm />
-        </Column>
-      </Display>
-    </Padding>
-
-    <style lang="sass">
-      @use '/src/styles/variables.sass' as vars
-      @use '/src/styles/breakpoint.sass' as views
-
-      h1
-        font-size: 3.25rem
-        color: vars.$textColor
-
-        @media only screen and (max-width: views.$mobile)
-          font-size: 2.25rem
-
-      .div
-        width: 8rem
-    </style>
-  </Page>
-</Layout>

src/stores/sample.ts

@@ -1,3 +0,0 @@
-// import { atom } from 'nanostores'
-
-// export const $sample = atom(0)

src/utils/js/generateFavicon.js

@@ -0,0 +1,17 @@
+import sharp from 'sharp'
+
+const path = require('path')
+
+const generateFavicon = async () => {
+  const inputSrc = 'src/assets/images/logo.png'
+  const faviconPath = path.join(__dirname, '../public/favicon.png')
+
+  try {
+    await sharp(inputSrc).png({ quality: 90 }).resize(50).toFile(faviconPath)
+    console.log('Favicon generated successfully')
+  } catch (error) {
+    console.error('Error generating favicon:', error)
+  }
+}
+
+export default generateFavicon

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />