path: root/frontend/src/lib/pills/Pill.svelte

<script lang="ts" module>
	export type PillColour = 'pink' | 'blue' | 'violet' | 'amber' | 'zinc' | 'sky';
</script>

<script lang="ts">
	import type { Snippet } from 'svelte';

	interface Props {
		name: string;
		tooltip?: string | null;
		colour?: PillColour;
		icon?: Snippet;
	}

	let { name, tooltip, colour = 'zinc', icon }: Props = $props();
</script>

<div class="flex items-center rounded-sm border p-0.5 {colour}" title={tooltip}>
	{@render icon?.()}
	<span>{name}</span>
</div>

<style lang="postcss">
	@reference "tailwindcss/theme"

	.pink {
		@apply border-pink-800 bg-pink-800/20 text-pink-200;
	}

	.blue {
		@apply border-blue-800 bg-blue-800/20 text-blue-200;
	}

	.violet {
		@apply border-violet-800 bg-violet-800/20 text-violet-200;
	}

	.amber {
		@apply border-amber-800 bg-amber-800/20 text-amber-200;
	}

	.sky {
		@apply border-sky-800 bg-sky-800/20 text-sky-200;
	}

	.zinc {
		@apply border-zinc-700 bg-zinc-700/20 text-zinc-300;
	}
</style>