mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-09-23 04:34:15 -04:00
36 lines
1.3 KiB
Vue
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: 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="locale of locales">
|
|
<a
|
|
v-if="filter === '' || locale.matches(filter)"
|
|
:key="locale.code"
|
|
:href="getUrlForLocale(locale.code)"
|
|
class="list-group-item list-group-item-action list-group-item-hoverable w-md-50 border-start"
|
|
:style="`--font-headings: ${formatFonts(fontHeadingsByLocale[locale.code])}`"
|
|
>
|
|
<div class="h3">
|
|
<LocaleIcon :locale class="mx-2" />
|
|
{{ locale.name }}
|
|
<small v-if="locale.extra" class="text-muted">({{ locale.extra }})</small>
|
|
</div>
|
|
</a>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|