blah/Weblah
1
0
Fork 0
mirror of https://github.com/Blah-IM/Weblah.git synced 2025-05-01 00:31:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: grouped list selected state

Browse source
This commit is contained in:
Shibo Lyu 2024-10-15 03:03:30 +08:00
parent 3097b8a9dd
commit e3e3481739
3 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/lib/components/GroupedList/GroupedListItem.svelte
View file

@ -1,17 +1,26 @@
<script lang="ts">
import { tw } from '$lib/tw';
import { Icon, type IconSource } from 'svelte-hero-icons';
export let href: string | undefined = undefined;
export let icon: IconSource | undefined = undefined;
export let selected: boolean = false;
</script>
<svelte:element
this={href ? 'a' : 'div'}
{href}
class="flex items-center gap-2 px-4 py-3 font-medium text-sf-primary"
class={tw(
'flex items-center gap-2 px-4 py-3 font-medium text-sf-primary first:rounded-t-lg last:rounded-b-lg',
selected && 'bg-accent-500 text-white shadow-inner dark:bg-accent-900 dark:text-sf-primary'
)}
>
{#if icon}
<Icon src={icon} class="size-5 text-sf-secondary" mini />
<Icon
src={icon}
class={tw('size-5 text-sf-secondary', selected && 'text-white dark:text-sf-primary')}
mini
/>
{/if}
<slot />
</svelte:element>

0
src/routes/(app)/Settings.svelte
View file

2
src/routes/(app)/settings/SettingsList.svelte
View file

@ -26,7 +26,7 @@
<GroupedListItem icon={UserPlus}>Add Account</GroupedListItem>
</GroupedListSection>
<GroupedListSection>
<GroupedListItem icon={Cog}>General</GroupedListItem>
<GroupedListItem icon={Cog} selected>General</GroupedListItem>
<GroupedListItem icon={Bell}>Notifications</GroupedListItem>
<GroupedListItem icon={LockClosed}>Privacy and Security</GroupedListItem>
<GroupedListItem icon={DevicePhoneMobile}>Devices</GroupedListItem>