path: root/frontend/src/lib/components/Dropdown.svelte

<script lang="ts">
	import { fadeFast } from '$lib/Transitions';
	import type { Snippet } from 'svelte';
	import { fade } from 'svelte/transition';

	interface Props {
		button: Snippet<[() => void]>;
		children?: Snippet;
	}

	let { button, children }: Props = $props();

	let visible = $state(false);

	function onfocusout(event: FocusEvent & { currentTarget: EventTarget & HTMLDivElement }) {
		if (
			event.relatedTarget instanceof HTMLElement &&
			event.currentTarget.contains(event.relatedTarget)
		) {
			return;
		}

		visible = false;
	}
</script>

<div class="relative" {onfocusout}>
	{@render button(() => (visible = !visible))}
	{#if visible}
		<div
			class="absolute z-[1] mt-1 w-max rounded bg-slate-700 p-1 shadow-sm shadow-slate-900"
			transition:fade={fadeFast}
		>
			{@render children?.()}
		</div>
	{/if}
</div>