feat: Add edit/create/list
sight page
This commit is contained in:
@ -1,29 +1,63 @@
|
||||
import { languageStore } from "@shared";
|
||||
import { Button } from "@mui/material"; // Only Button is needed
|
||||
import { useEffect, useCallback } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
|
||||
const LANGUAGES = ["ru", "en", "zh"] as const;
|
||||
type Language = (typeof LANGUAGES)[number];
|
||||
|
||||
export const LanguageSwitcher = observer(() => {
|
||||
const { language, setLanguage } = languageStore;
|
||||
|
||||
// Memoize getLanguageLabel for consistent rendering
|
||||
const getLanguageLabel = useCallback((lang: Language) => {
|
||||
switch (lang) {
|
||||
case "ru":
|
||||
return "RU";
|
||||
case "en":
|
||||
return "EN";
|
||||
case "zh":
|
||||
return "ZH";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyPress = (event: KeyboardEvent) => {
|
||||
// Keep Ctrl+S for language cycling
|
||||
if (event.key.toLowerCase() === "f3") {
|
||||
event.preventDefault(); // Prevent browser save dialog
|
||||
const currentIndex = LANGUAGES.indexOf(language as Language);
|
||||
const nextIndex = (currentIndex + 1) % LANGUAGES.length;
|
||||
setLanguage(LANGUAGES[nextIndex]);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handleKeyPress);
|
||||
return () => {
|
||||
window.removeEventListener("keydown", handleKeyPress);
|
||||
};
|
||||
}, [language, setLanguage]); // Only language is a dependency now
|
||||
|
||||
const handleLanguageChange = (lang: Language) => {
|
||||
setLanguage(lang);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<button
|
||||
className={`p-3 ${language === "ru" ? "bg-blue-500" : ""}`}
|
||||
onClick={() => setLanguage("ru")}
|
||||
>
|
||||
RU
|
||||
</button>
|
||||
<button
|
||||
className={`p-3 ${language === "en" ? "bg-blue-500" : ""}`}
|
||||
onClick={() => setLanguage("en")}
|
||||
>
|
||||
EN
|
||||
</button>
|
||||
<button
|
||||
className={`p-3 ${language === "zh" ? "bg-blue-500" : ""}`}
|
||||
onClick={() => setLanguage("zh")}
|
||||
>
|
||||
zh
|
||||
</button>
|
||||
<div className="fixed top-1/2 -translate-y-1/2 right-0 flex flex-col gap-2 p-4 ">
|
||||
{/* Added some styling for better visualization */}
|
||||
{LANGUAGES.map((lang) => (
|
||||
<Button
|
||||
key={lang}
|
||||
onClick={() => handleLanguageChange(lang)}
|
||||
variant={language === lang ? "contained" : "outlined"} // Highlight the active language
|
||||
color="primary"
|
||||
sx={{ minWidth: "60px" }} // Give buttons a consistent width
|
||||
>
|
||||
{getLanguageLabel(lang)}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
Reference in New Issue
Block a user