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

<script lang="ts">
	import Pill from './Pill.svelte';

	type Association = 'artist' | 'circle' | 'world' | 'character';

	let { name, type }: { name: string; type: Association } = $props();
</script>

<Pill {name}>
	{#snippet icon()}
		<span class={`${type} icon-xs`}></span>
	{/snippet}
</Pill>

<style lang="postcss">
	.artist {
		@apply icon-[material-symbols--person] -mx-px;
	}

	.character {
		@apply icon-[material-symbols--face];
	}

	.circle {
		@apply icon-[material-symbols--group] mx-px;
	}

	.world {
		@apply icon-[material-symbols--public];
	}
</style>