brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds notifications

Browse Source
This commit is contained in:
Christian Beutel
2024-12-21 03:24:36 +01:00
parent 034f6873c1
commit 9140b523da
39 changed files with 1613 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/lib/components/base/skeleton_notification_card.svelte Normal file
View File

@@ -0,0 +1,14 @@
<div
class="skeleton-notification-card animate-pulse flex items-center gap-x-3 px-3 py-2 m-2 bg-menu-background rounded-xl"
>
<!-- Avatar placeholder -->
<div
class="h-8 w-8 bg-menu-item-background-focus rounded-full shrink-0"
></div>
<!-- Text placeholders -->
<div class="basis-full space-y-2">
<div class="h-4 bg-menu-item-background-focus rounded"></div>
<div class="h-4 bg-menu-item-background-focus rounded w-2/3"></div>
</div>
</div>

9
web/src/lib/components/base/toggle.svelte
View File

@@ -1,8 +1,16 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
export let name: string = "";
export let value: boolean = false;
export let label: string = "";
export let error: string = "";
const dispatch = createEventDispatcher();
function handleToggleChange() {
dispatch("change", value);
}
</script>
<label class="relative my-2 inline-flex items-center cursor-pointer">
@@ -12,6 +20,7 @@
type="checkbox"
class="sr-only peer"
value="1"
on:change={handleToggleChange}
/>
<div
class="w-11 h-6 bg-input-background border border-input-border peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-input-ring rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"