Added backgrund built-in component

This commit is contained in:
Patrick Alvin Alcala 2025-08-01 15:15:58 +08:00
parent d39d7263c5
commit 2684f9faa6
2 changed files with 28 additions and 0 deletions

View file

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

View file

@ -0,0 +1,27 @@
import './Background.sass'
import { Show } from 'solid-js'
import backgroundAvif from '../../assets/images/background.avif'
import backgroundWebp from '../../assets/images/background.webp'
interface Props {
image?: boolean
color?: string
}
export default (props: Props) => {
return (
<>
<Show when={props.image}>
<picture class="fullscreen">
<source srcset={backgroundAvif.src} type="image/avif" />
<source srcset={backgroundWebp.src} type="image/webp" />
<img src={backgroundWebp.src} width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
</picture>
</Show>
<Show when={!props.image}>
<div style={{ background: props.color }} class="fullscreen" />
</Show>
</>
)
}