src/lib/components/match-table/cells/map-cell.svelte

<script lang="ts">
	import { Badge } from '$lib/components/ui/badge';
	import { cn } from '$lib/utils';
	import MapPinIcon from 'phosphor-svelte/lib/MapPinIcon';
	import { mapColorClasses } from '$lib/utils/map-colors';
	import { prettyMap } from '$lib/utils/format';

	interface Props {
		map: string;
	}
	let { map }: Props = $props();
</script>

<Badge class={cn('gap-1 border capitalize', mapColorClasses(map))}>
	<MapPinIcon size={11} weight="duotone" />{prettyMap(map)}
</Badge>