51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
|
|
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface LanguageSwitchProps {
|
|
isCollapsed?: boolean;
|
|
}
|
|
|
|
const LanguageSwitch: React.FC<LanguageSwitchProps> = ({ isCollapsed = false }) => {
|
|
const { i18n } = useTranslation();
|
|
const isEnglish = i18n.language === 'en';
|
|
|
|
const switchTo = (lang: string) => {
|
|
if (i18n.language !== lang) {
|
|
i18n.changeLanguage(lang);
|
|
}
|
|
};
|
|
|
|
if (isCollapsed) {
|
|
return (
|
|
<button
|
|
className="lang-toggle-collapsed"
|
|
onClick={() => switchTo(isEnglish ? 'ko' : 'en')}
|
|
title={isEnglish ? '한국어로 전환' : 'Switch to English'}
|
|
>
|
|
{isEnglish ? 'EN' : 'KO'}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="lang-toggle">
|
|
<button
|
|
className={`lang-toggle-option ${!isEnglish ? 'active' : ''}`}
|
|
onClick={() => switchTo('ko')}
|
|
>
|
|
KO
|
|
</button>
|
|
<button
|
|
className={`lang-toggle-option ${isEnglish ? 'active' : ''}`}
|
|
onClick={() => switchTo('en')}
|
|
>
|
|
EN
|
|
</button>
|
|
<div className={`lang-toggle-slider ${isEnglish ? 'right' : 'left'}`} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LanguageSwitch;
|