Updated

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