PronounsPage/app/components/LocaleList.vue
Valentyne Stigloher 10180aa6a3 (refactor) use #shared alias instead of ~~/shared
the #shared alias used by Nuxt cannot be easily disabled and to prevent breackage with jiti, we make use of it
2025-08-17 18:56:02 +02:00

36 lines
1.3 KiB
Vue

<script setup lang="ts">
import { formatFonts } from '#shared/fonts.ts';
import { getUrlForLocale } from '~/src/domain.ts';
import { fontHeadingsByLocale } from '~~/locale/fonts.ts';
import type { LocaleDescription } from '~~/locale/locales.ts';
withDefaults(defineProps<{
locales: Record<string, LocaleDescription>;
filter?: string;
}>(), {
filter: '',
});
</script>
<template>
<div class="border rounded overflow-hidden list-group-item-bg">
<div class="list-group d-flex flex-wrap flex-row list-group-flush">
<template v-for="(options, locale) in locales">
<a
v-if="filter === '' || options.matches(filter)"
:key="locale"
:href="getUrlForLocale(locale)"
class="list-group-item list-group-item-action list-group-item-hoverable w-md-50 border-start"
:style="`--font-headings: ${formatFonts(fontHeadingsByLocale[locale])}`"
>
<div class="h3">
<LocaleIcon :locale="options" class="mx-2" />
{{ options.name }}
<small v-if="options.extra" class="text-muted">({{ options.extra }})</small>
</div>
</a>
</template>
</div>
</div>
</template>