PatAlcala9/aio-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated fwt components

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-09-16 10:52:31 +08:00
parent 7d8ed2f355
commit 4517c40513
4 changed files with 49 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

41
fwt/components/Display.tsx Normal file
View file

@ -0,0 +1,41 @@
import '../styles/Viewport.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>
</>
)
}