50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
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>
|
|
</>
|
|
)
|
|
}
|