1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
import { useEffect } from "react";
import {
Link,
useSearchParams,
useNavigate,
useLocation,
} from "react-router-dom";
import LanguageSwitcher from "./LanguageSwitcher";
import { useTranslation } from "react-i18next";
const TitleBar: React.FC = () => {
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const location = useLocation();
const isMoe = searchParams.has("moe");
const { t } = useTranslation();
const toggleTheme = () => {
const params = new URLSearchParams(searchParams);
if (isMoe) {
params.delete("moe");
localStorage.setItem("theme", "dark");
} else {
params.set("moe", "");
localStorage.setItem("theme", "light");
}
navigate(`${location.pathname}?${params.toString()}`);
};
useEffect(() => {
const savedTheme = localStorage.getItem("theme");
const hasMoe = searchParams.has("moe");
if (!hasMoe && savedTheme === "light") {
const params = new URLSearchParams(searchParams);
params.set("moe", "");
navigate(`${location.pathname}?${params.toString()}`, { replace: true });
}
if (hasMoe && savedTheme === "dark") {
const params = new URLSearchParams(searchParams);
params.delete("moe");
navigate(`${location.pathname}?${params.toString()}`, { replace: true });
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [location.pathname, navigate]);
return (
<div
className={`${isMoe ? "bg-pink-200 border-pink-300" : "bg-gray-900 border-gray-800"} border-b py-4 px-6 font-[Zen_Maru_Gothic]`}
>
<div className="max-w-[800px] mx-auto">
<div className="flex flex-col sm:flex-row justify-between items-center">
<div className="flex items-center space-x-3 mb-3 sm:mb-0">
<button
onClick={toggleTheme}
className={`text-sm ${isMoe ? "bg-pink-100 text-pink-800 hover:bg-pink-200 hover:text-pink-600" : "bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white"} font-medium px-3 py-1 rounded`}
>
{isMoe ? "🌙 "+t('dark_theme_text') : "🌸 "+t("light_theme_text")}
</button>
<img
src="/rasis.webp"
alt="573 Updates Logo"
className="w-8 h-8 object-contain rounded-full"
/>
<div
className={`${isMoe ? "bg-pink-500" : "bg-red-700"} w-8 h-8 rounded-md flex items-center justify-center`}
>
<span className="text-white font-bold">573</span>
</div>
<Link
to={`/${isMoe ? "?moe" : ""}`}
className={`${isMoe ? "text-pink-800" : "text-white"} text-xl font-bold`}
>
UPDATES
</Link>
</div>
<div className="flex items-center space-x-2 sm:space-x-4">
<Link
to={`/${isMoe ? "?moe" : ""}`}
className={`${isMoe ? "text-pink-800 hover:text-pink-600" : "text-gray-300 hover:text-white"} font-medium text-sm sm:text-base`}
>
{t('news_feed')}
</Link>
<Link
to={`/games${isMoe ? "?moe" : ""}`}
className={`${isMoe ? "text-pink-800 hover:text-pink-600" : "text-gray-300 hover:text-white"} font-medium text-sm sm:text-base`}
>
{t('game_selector')}
</Link>
<LanguageSwitcher variant="compact" />
</div>
</div>
</div>
</div>
);
};
export default TitleBar;
|
