Tag.svelte

<script>
	/**
	 * @param {string} content
	 */
	export let content

	/**
	 * @typedef {'active' | 'maintenance' | 'abandoned' | 'engine' | 'info'} TagType
	 * @export
	 */

	/**
	 * @param {TagType} tag_type
	 */
	export let tag_type
</script>

<span
	class="mb-2 mr-2 rounded-md px-2 py-1 text-sm font-semibold"
	class:text-sky-500={tag_type === 'info'}
	class:bg-sky-100={tag_type === 'info'}
	class:text-emerald-50={tag_type === 'active'}
	class:bg-emerald-500={tag_type === 'active'}
	class:text-orange-50={tag_type === 'maintenance'}
	class:bg-orange-500={tag_type === 'maintenance'}
	class:text-ruby-50={tag_type === 'abandoned'}
	class:bg-ruby-500={tag_type === 'abandoned'}
	class:text-sky-50={tag_type === 'engine'}
	class:bg-sky-500={tag_type === 'engine'}
>{content}</span>