37 lines
1000 B
Svelte
37 lines
1000 B
Svelte
<script lang="ts">
|
|
import { numberOfUnreadNotification } from "$lib/store";
|
|
import Bell from "lucide-svelte/icons/bell";
|
|
|
|
export let data;
|
|
export let hasUnreadElement;
|
|
|
|
async function toggle() {
|
|
hasUnreadElement = false;
|
|
}
|
|
</script>
|
|
|
|
<!--Start Notification Bell-->
|
|
{#if data?.user}
|
|
<a
|
|
href="/notifications"
|
|
on:click={toggle}
|
|
class="text-gray-300 sm:hover:text-white cursor-pointer sm:hover:bg-[#27272A] relative border p-2 rounded-lg border-gray-600 ml-3 -mr-1"
|
|
>
|
|
<Bell class="h-[20px] w-[20px]" />
|
|
|
|
{#if hasUnreadElement}
|
|
<div class="absolute top-2 -right-2 flex">
|
|
<div
|
|
class="relative inline-flex text-xs text-black font-bold w-[18px] h-[18px] bg-white border-[1px] border-gray-800 rounded-full -top-2 right-2"
|
|
>
|
|
<span class="m-auto"
|
|
>{$numberOfUnreadNotification <= 9
|
|
? $numberOfUnreadNotification
|
|
: "9+"}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</a>
|
|
{/if}
|