enzostvs's picture
enzostvs HF Staff
add user validation
b1a4d81
raw
history blame
1.53 kB
<script lang="ts">
import { browser } from '$app/environment';
import Icon from "@iconify/svelte";
import { REACTION_EMOJIS } from "$lib/utils";
export let count: number;
let isOpen: boolean = false;
$: uuid = Math.random().toString(36).substring(7);
const handleClick = (event: MouseEvent) => {
const target = event.target as HTMLElement;
const addReaction = document.getElementById(uuid);
if (!addReaction) return;
if (!addReaction.contains(target)) {
isOpen = false;
}
}
if (browser) {
window.addEventListener("click", handleClick);
}
</script>
<div
id="{uuid}"
class="rounded-full text-sm text-white/80 hover:text-white font-bold flex items-center justify-start gap-1.5 px-1.5 py-1 border border-dashed border-white/80 hover:border-white relative z-[2]"
class:!border-white={isOpen}
class:!text-white={isOpen}
>
<button on:click={() => isOpen = !isOpen}>
<Icon icon="fluent:emoji-add-16-regular" class="w-5 h-5" />
</button>
<div
class={`opacity-0 pointer-events-none absolute max-w-max flex items-center justify-center bg-white px-1 py-1 rounded-full gap-0 text-xl ${count > 0 ? "-translate-y-[calc(100%+8px)] -translate-x-1/2 left-0 top-0" : "right-0 translate-x-[calc(100%+8px)]"}`}
class:opacity-100={isOpen}
class:pointer-events-auto={isOpen}
>
{#each REACTION_EMOJIS as emoji}
<div class="w-8 h-8 hover:bg-neutral-200 rounded-full text-center flex items-center justify-center">{emoji}</div>
{/each}
</div>
</div>