Alternative web application for the
mkizka.dev
pdsadmin command
1import { useTranslation } from "react-i18next";
2
3import { cn } from "../../utils/cn";
4
5type LanguageSwitcherProps = {
6 className?: string;
7};
8
9function LanguageSwitcher({ className }: LanguageSwitcherProps) {
10 const { i18n } = useTranslation();
11
12 const handleLanguageChange = async (language: string) => {
13 await i18n.changeLanguage(language);
14 if (document.activeElement) {
15 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
16 (document.activeElement as HTMLElement).blur();
17 }
18 };
19
20 return (
21 <div className={cn("dropdown dropdown-end", className)}>
22 <div
23 tabIndex={0}
24 role="button"
25 className="btn btn-square btn-ghost shadow"
26 >
27 <span className="i-lucide-globe size-4"></span>
28 </div>
29 <ul
30 tabIndex={0}
31 className="dropdown-content menu bg-base-100 rounded-box z-[1] w-36 p-2 shadow"
32 >
33 <li>
34 <a
35 className="btn btn-ghost h-12"
36 onClick={() => handleLanguageChange("en")}
37 >
38 English
39 </a>
40 </li>
41 <li>
42 <a
43 className="btn btn-ghost h-12"
44 onClick={() => handleLanguageChange("ja")}
45 >
46 日本語
47 </a>
48 </li>
49 </ul>
50 </div>
51 );
52}
53
54export function Header() {
55 return (
56 <header className="card rounded-box bg-base-100 shadow-md">
57 <div className="card-body relative items-center gap-4 text-center">
58 <LanguageSwitcher className="absolute top-0 right-4 bottom-0 my-auto" />
59 <h1 className="card-title text-2xl font-bold">pdsadmin-web</h1>
60 </div>
61 </header>
62 );
63}