mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-08-05 03:57:03 -04:00
36 lines
1.3 KiB
Vue
36 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { fontHeadingsByLocale } from '~/locale/fonts.ts';
|
|
import type { LocaleDescription } from '~/locale/locales.ts';
|
|
import { getUrlForLocale } from '~/src/domain.ts';
|
|
import { formatFonts } from '~/src/fonts.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>
|