39 lines
904 B
Vue
39 lines
904 B
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
visitedRegions: Set<string>
|
|
stateLocalCodes: string[]
|
|
regionNames?: Record<string, string>
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="legend">
|
|
<v-chip
|
|
v-for="state in stateLocalCodes"
|
|
:key="state"
|
|
:color="visitedRegions.has(state) ? '#4a90d9' : 'grey'"
|
|
variant="flat"
|
|
size="small"
|
|
>
|
|
<template #prepend>
|
|
<v-icon
|
|
:icon="visitedRegions.has(state) ? 'mdi-check-circle' : 'mdi-circle-outline'"
|
|
size="small"
|
|
class="mr-1"
|
|
/>
|
|
</template>
|
|
{{ regionNames?.[state] ?? state }}
|
|
</v-chip>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
margin-top: 12px;
|
|
}
|
|
</style>
|