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

Changed from Show to Switch & Match

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-06-05 16:48:38 +08:00
parent f1efb38dd4
commit 50c7943b42
2 changed files with 44 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/Card/Card.tsx
View file

@ -1,21 +1,31 @@
import { Show, type JSX } from 'solid-js'
import './Card.sass' import './Card.sass'
import { Switch, Match } from 'solid-js'
import { RiSystemLockPasswordLine } from 'solid-icons/ri' import { RiSystemLockPasswordLine } from 'solid-icons/ri'
import { FiHash } from 'solid-icons/fi' import { FiHash } from 'solid-icons/fi'
import { TbColorSwatch } from 'solid-icons/tb' import { TbColorSwatch } from 'solid-icons/tb'
import { BiRegularGitCompare } from 'solid-icons/bi'
export default (props: { title: string; description: string }) => { export default (props: { title: string; description: string }) => {
return ( return (
<section class="card"> <section class="card">
<Show when={props.title === 'Password Generator'}> <Switch>
<RiSystemLockPasswordLine class="card__icon" size={32} opacity={0.5} /> <Match when={props.title === 'Password Generator'}>
</Show> <RiSystemLockPasswordLine class="card__icon" size={32} opacity={0.5} />
<Show when={props.title === 'Hash Generator'}> </Match>
<FiHash class="card__icon" size={32} opacity={0.5} />
</Show> <Match when={props.title === 'Hash Generator'}>
<Show when={props.title === 'Color Converter'}> <FiHash class="card__icon" size={32} opacity={0.5} />
<TbColorSwatch class="card__icon" size={32} opacity={0.5} /> </Match>
</Show>
<Match when={props.title === 'Color Converter'}>
<TbColorSwatch class="card__icon" size={32} opacity={0.5} />
</Match>
<Match when={props.title === 'Text Comparison'}>
<BiRegularGitCompare class="card__icon" size={32} opacity={0.5} />
</Match>
</Switch>
<h3 class="card__title">{props.title}</h3> <h3 class="card__title">{props.title}</h3>
<p class="card__description">{props.description}</p> <p class="card__description">{props.description}</p>
</section> </section>

37
src/components/PageTitle/PageTitle.tsx
View file

@ -1,25 +1,36 @@
import './PageTitle.sass' import './PageTitle.sass'
import { Show } from 'solid-js' import { Switch, Match } from 'solid-js'
import { RiSystemLockPasswordLine } from 'solid-icons/ri' import { RiSystemLockPasswordLine } from 'solid-icons/ri'
import { FiHash } from 'solid-icons/fi' import { FiHash } from 'solid-icons/fi'
import { Si1password } from 'solid-icons/si' import { Si1password } from 'solid-icons/si'
import { TbColorSwatch } from 'solid-icons/tb' import { TbColorSwatch } from 'solid-icons/tb'
import { BiRegularGitCompare } from 'solid-icons/bi'
export default (props: { title: string; description: string }) => { export default (props: { title: string; description: string }) => {
return ( return (
<section class="title"> <section class="title">
<Show when={props.title === 'Password Generator'}> <Switch>
<RiSystemLockPasswordLine class="title__icon" opacity={1} /> <Match when={props.title === 'Password Generator'}>
</Show> <RiSystemLockPasswordLine class="title__icon" opacity={1} />
<Show when={props.title === 'Hash Generator'}> </Match>
<FiHash class="title__icon" opacity={1} />
</Show> <Match when={props.title === 'Hash Generator'}>
<Show when={props.title === 'Password Manager'}> <FiHash class="title__icon" opacity={1} />
<Si1password class="title__icon" opacity={1} /> </Match>
</Show>
<Show when={props.title === 'Color Converter'}> <Match when={props.title === 'Password Manager'}>
<TbColorSwatch class="title__icon" opacity={1} /> <Si1password class="title__icon" opacity={1} />
</Show> </Match>
<Match when={props.title === 'Color Converter'}>
<TbColorSwatch class="title__icon" opacity={1} />
</Match>
<Match when={props.title === 'Text Comparison'}>
<BiRegularGitCompare class="title__icon" opacity={1} />
</Match>
</Switch>
<h1 class="title__text">{props.title}</h1> <h1 class="title__text">{props.title}</h1>
<p class="title__description">{props.description}</p> <p class="title__description">{props.description}</p>
</section> </section>