64 lines
1.6 KiB
Plaintext
64 lines
1.6 KiB
Plaintext
---
|
|
import MasoActor from "components/Maso/MasoActor.astro";
|
|
import Tooltip from "components/Tooltip.astro";
|
|
import Button from "components/Button.astro";
|
|
import { formatLocale } from "src/utils/format";
|
|
import { getI18n } from "src/i18n/i18n";
|
|
|
|
interface Props {
|
|
currentLang: string;
|
|
getPartialUrl: (locale: string) => string;
|
|
availableLanguages: string[];
|
|
}
|
|
|
|
const { currentLang, getPartialUrl, availableLanguages } = Astro.props;
|
|
const { t } = await getI18n(Astro.locals.currentLocale);
|
|
---
|
|
|
|
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
|
|
|
<div id="lang-selector" class="when-js when-no-print">
|
|
<Tooltip trigger="click">
|
|
<Button icon="material-symbols:translate" title={currentLang.toUpperCase()} />
|
|
|
|
<div id="tooltip-content" slot="tooltip-content">
|
|
{
|
|
availableLanguages.map((id) => (
|
|
<MasoActor href={getPartialUrl(id)}>
|
|
<p class:list={{ current: id === currentLang, "pressable-link": true }}>
|
|
{formatLocale(id)}
|
|
</p>
|
|
</MasoActor>
|
|
))
|
|
}
|
|
</div>
|
|
</Tooltip>
|
|
<p class="high-contrast-text">
|
|
{
|
|
t("global.languageOverride.availableLanguages", {
|
|
count: availableLanguages.length,
|
|
})
|
|
}
|
|
</p>
|
|
</div>
|
|
|
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
|
|
|
<style>
|
|
#lang-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1em;
|
|
|
|
#tooltip-content {
|
|
display: grid;
|
|
gap: 0.5em;
|
|
|
|
& .current {
|
|
color: var(--color-base-750);
|
|
text-decoration: underline 0.08em var(--color-base-650);
|
|
}
|
|
}
|
|
}
|
|
</style>
|