feat: implement multilingual SEO support and enhance map UI with data synchronization updates

This commit is contained in:
David Fencl
2026-06-06 17:24:30 +02:00
parent 66021e001e
commit 6395df1992
30 changed files with 3036 additions and 280 deletions
+12 -5
View File
@@ -1,7 +1,8 @@
import { useState, useEffect } from 'react';
import { FiStar } from 'react-icons/fi';
import { type Language } from '../translations';
import { type Language, t } from '../translations';
import { useFavorites } from '../hooks/useFavorites';
import { Helmet } from 'react-helmet-async';
import { CircularProgress } from './CircularProgress';
import { useNavigate } from 'react-router-dom';
import { slugify } from '../utils/slugify';
@@ -42,6 +43,12 @@ const FavoritesOverview = ({ language }: Props) => {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
<Helmet>
<title>{t[language].seo.favoritesTitle}</title>
<meta name="description" content={t[language].seo.favoritesDesc} />
<meta property="og:title" content={t[language].seo.favoritesTitle} />
<meta property="og:description" content={t[language].seo.favoritesDesc} />
</Helmet>
<div>
<h1 style={{ fontSize: '1.75rem', fontWeight: 'bold', margin: '0 0 0.5rem 0', display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
<FiStar size={24} fill="#f59e0b" color="#f59e0b" />
@@ -84,7 +91,7 @@ const FavoritesOverview = ({ language }: Props) => {
{/* Unpin button */}
<button
onClick={(e) => { e.stopPropagation(); toggleFavorite(lake.id); }}
title="Odepnout"
title={language === 'cs' ? 'Odepnout' : 'Unpin'}
style={{
position: 'absolute', top: '1rem', right: '1rem',
background: 'none', border: 'none', cursor: 'pointer',
@@ -104,7 +111,7 @@ const FavoritesOverview = ({ language }: Props) => {
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
<div>
<div style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Water level</div>
<div style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>{t[language].kpi.level}</div>
<div style={{ fontSize: '2rem', fontWeight: 'bold' }}>{lake.level} <span style={{ fontSize: '1rem', fontWeight: 'normal', color: 'var(--text-muted)' }}>m n.m.</span></div>
</div>
</div>
@@ -123,11 +130,11 @@ const FavoritesOverview = ({ language }: Props) => {
<div style={{ display: 'flex', gap: '1rem', fontSize: '0.85rem' }}>
<div style={{ display: 'flex', gap: '0.5rem' }}>
<FiTrendingUp color="var(--color-green)" />
<span style={{ color: 'var(--text-muted)' }}>Inflow <span style={{ color: 'var(--color-green)' }}>{lake.inflow} m³/s</span></span>
<span style={{ color: 'var(--text-muted)' }}>{t[language].kpi.inflow} <span style={{ color: 'var(--color-green)' }}>{lake.inflow} m³/s</span></span>
</div>
<div style={{ display: 'flex', gap: '0.5rem' }}>
<FiTrendingDown color="var(--color-red)" />
<span style={{ color: 'var(--text-muted)' }}>Outflow <span style={{ color: 'var(--color-red)' }}>{lake.outflow} m³/s</span></span>
<span style={{ color: 'var(--text-muted)' }}>{t[language].kpi.outflow} <span style={{ color: 'var(--color-red)' }}>{lake.outflow} m³/s</span></span>
</div>
</div>