66 lines
1.5 KiB
Plaintext
66 lines
1.5 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";
|
|
|
|
interface Props {
|
|
currentLang: string;
|
|
getPartialUrl: (locale: string) => string;
|
|
availableLanguages: string[];
|
|
}
|
|
|
|
const { currentLang, getPartialUrl, availableLanguages } = Astro.props;
|
|
---
|
|
|
|
{
|
|
/* ------------------------------------------- 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
|
|
class:list={{ current: id === currentLang }}
|
|
href={getPartialUrl(id)}
|
|
>
|
|
{formatLocale(id)}
|
|
</MasoActor>
|
|
))
|
|
}
|
|
</div>
|
|
</Tooltip>
|
|
<p class="high-contrast-text">
|
|
This content is available is {availableLanguages.length} languages.
|
|
</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>
|