jalil/jalil.arfaoui.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Ajout du sélecteur de langue dans le footer photo

Browse source
This commit is contained in:
Jalil Arfaoui 2026-02-18 14:47:37 +01:00
parent 3d23e84b34
commit b5964cdc78
2 changed files with 63 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/photo/PhotoFooter.astro
View file

@ -1,4 +1,5 @@
--- ---
import PhotoLanguageSwitcher from './PhotoLanguageSwitcher.astro';
import { t, getAboutPath, type Locale } from '../../utils/i18n'; import { t, getAboutPath, type Locale } from '../../utils/i18n';
interface Props { interface Props {
@ -15,6 +16,7 @@ const { lang = 'fr' } = Astro.props;
<a href="mailto:jalil@arfaoui.net">{t('photo', 'contact', lang)}</a> <a href="mailto:jalil@arfaoui.net">{t('photo', 'contact', lang)}</a>
<a href="https://instagram.com/l.i.l.a.j" target="_blank" rel="noopener noreferrer">Instagram</a> <a href="https://instagram.com/l.i.l.a.j" target="_blank" rel="noopener noreferrer">Instagram</a>
</div> </div>
<PhotoLanguageSwitcher lang={lang} />
<div class="photo-footer-copy"> <div class="photo-footer-copy">
&copy; Jalil Arfaoui <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener noreferrer">Creative Commons CC-BY-NC 4.0</a> &copy; Jalil Arfaoui <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener noreferrer">Creative Commons CC-BY-NC 4.0</a>
</div> </div>
@ -46,6 +48,12 @@ const { lang = 'fr' } = Astro.props;
.photo-footer-links { .photo-footer-links {
display: flex; display: flex;
gap: 15px; gap: 15px;
flex: 1;
}
.photo-footer-copy {
flex: 1;
text-align: end;
} }
.photo-footer-links a, .photo-footer-links a,

55
src/components/photo/PhotoLanguageSwitcher.astro Normal file
View file

@ -0,0 +1,55 @@
---
import { getPhotoBasePath, type Locale } from '../../utils/i18n';
interface Props {
lang?: Locale;
}
const { lang = 'fr' } = Astro.props;
const languages = [
{ code: 'fr' as const, label: 'FR', name: 'Français' },
{ code: 'en' as const, label: 'EN', name: 'English' },
{ code: 'ar' as const, label: 'ع', name: 'العربية' },
];
---
<div class="photo-lang-switcher">
{languages.map((l, i) => (
<>
{i > 0 && <span class="lang-sep">·</span>}
{l.code === lang ? (
<span class="lang-active" title={l.name}>{l.label}</span>
) : (
<a href={getPhotoBasePath(l.code)} class="lang-link" title={l.name} hreflang={l.code}>{l.label}</a>
)}
</>
))}
</div>
<style>
.photo-lang-switcher {
display: flex;
align-items: center;
gap: 6px;
}
.lang-sep {
color: rgba(255, 255, 255, 0.3);
}
.lang-active {
color: white;
font-weight: 600;
}
.lang-link {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: color 0.2s;
}
.lang-link:hover {
color: white;
}
</style>