Eclypsed/Lazuli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Began work on fetching recommendations; created song factory

Browse Source
This commit is contained in:
Eclypsed
2024-01-10 02:31:49 -05:00
parent f9359ae300
commit 4149cf7528
13 changed files with 281 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/lib/components/utility/toggle.svelte
View File

@@ -4,27 +4,27 @@
import { createEventDispatcher } from 'svelte'
const dispatch = createEventDispatcher()
let toggle, knob
const handleToggle = () => {
toggled = !toggled
if (toggled) {
toggle.style.backgroundColor = 'var(--lazuli-primary)'
knob.style.left = '100%'
knob.style.transform = 'translateX(-100%)'
} else {
toggle.style.backgroundColor = 'rgb(115, 115, 115)'
knob.style.left = 0
knob.style.transform = ''
}
dispatch('toggled', {
toggleState: toggled,
})
dispatch('toggled', { toggled })
}
</script>
<button bind:this={toggle} aria-checked={toggle} role="checkbox" class="relative flex h-6 w-10 items-center rounded-full bg-neutral-500 transition-colors" on:click={handleToggle}>
<div bind:this={knob} class="absolute left-0 aspect-square h-full p-1 transition-all">
<div class="h-full w-full rounded-full bg-white"></div>
<button class:toggled aria-checked={toggled} role="checkbox" class="relative flex h-6 w-10 items-center rounded-full bg-neutral-500 transition-colors" on:click={handleToggle}>
<div class:toggled class="absolute left-0 aspect-square h-full p-1 transition-all">
<div class="grid h-full w-full place-items-center rounded-full bg-white">
<i class={toggled ? 'fa-solid fa-check text-xs' : 'fa-solid fa-xmark text-xs'} />
</div>
</div>
</button>
<style>
button.toggled {
background-color: var(--lazuli-primary);
}
div.toggled {
left: 100%;
transform: translateX(-100%);
color: var(--lazuli-primary);
}
</style>