cec967f953
- Surse complete web (React/Vite) + mobil (React Native/Expo) + extensie (MV3) - Documentație de livrare: ghid utilizare, matrice trasabilitate cerințe, raport testare furnizor - Artefacte binare: imagine Docker didi-frontend:lot3-1.0, APK, extensie v3.2.6 + SHA256SUMS - Configurare adresă platformă externalizată (build args / .env / config.js) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import styled from '@emotion/styled';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { spacing, borderRadius, animation, sizing } from '../../theme';
|
|
|
|
export const LanguageSwitcher: React.FC = () => {
|
|
const { i18n } = useTranslation();
|
|
|
|
const currentLang = i18n.language?.startsWith('ro') ? 'ro' : 'en';
|
|
|
|
const handleToggle = () => {
|
|
const next = currentLang === 'en' ? 'ro' : 'en';
|
|
i18n.changeLanguage(next);
|
|
};
|
|
|
|
return (
|
|
<SwitchButton
|
|
onClick={handleToggle}
|
|
aria-label={`Switch language to ${currentLang === 'en' ? 'Romanian' : 'English'}`}
|
|
title={currentLang === 'en' ? 'Switch to Romanian' : 'Switch to English'}
|
|
>
|
|
<LangCode>{currentLang.toUpperCase()}</LangCode>
|
|
</SwitchButton>
|
|
);
|
|
};
|
|
|
|
const SwitchButton = styled.button`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: ${sizing.button.lg}px;
|
|
height: ${sizing.button.lg}px;
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-default);
|
|
border-radius: ${borderRadius.md}px;
|
|
cursor: pointer;
|
|
color: var(--fg-primary);
|
|
transition: all ${animation.duration.normal} ${animation.easing.default};
|
|
|
|
&:hover {
|
|
background: var(--accent-subtle);
|
|
border-color: var(--accent-border);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(0, 145, 152, 0.3);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(0);
|
|
}
|
|
`;
|
|
|
|
const LangCode = styled.span`
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
user-select: none;
|
|
`;
|