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

<script lang="ts">
	interface Props {
		name: string;
		tooltip?: string | null;
		style: string;
	}

	let { name, tooltip, style }: Props = $props();
</script>

<div class="flex items-center rounded-sm border p-0.5 {style}" title={tooltip}>
	{#if style === 'female'}
		<span class="icon-xs icon-[material-symbols--female] -mx-[3px]"></span>
	{:else if style === 'male'}
		<span class="icon-xs icon-[material-symbols--male] -mx-px"></span>
	{:else if style === 'trans'}
		<span class="icon-xs icon-[material-symbols--transgender]"></span>
	{:else if style === 'location'}
		<span class="icon-xs icon-[material-symbols--location-on-outline]"></span>
	{:else if style === 'artist'}
		<span class="icon-xs icon-[material-symbols--person] -mx-px"></span>
	{:else if style === 'character'}
		<span class="icon-xs icon-[material-symbols--face]"></span>
	{:else if style === 'circle'}
		<span class="icon-xs icon-[material-symbols--group] mx-px"></span>
	{:else if style === 'world'}
		<span class="icon-xs icon-[material-symbols--public]"></span>
	{/if}
	<span>{name}</span>
</div>

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

	div {
		@apply border-zinc-700 bg-zinc-700/20 text-zinc-300;
	}

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

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

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

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

	.location {
		@apply border-sky-800 bg-sky-800/20 text-sky-200;
	}
</style>