Implemented language selection

This commit is contained in:
Takeshi Kimata
2024-05-03 12:10:36 +09:00
parent 1e01535134
commit 72c71efedc
6 changed files with 146 additions and 107 deletions

View File

@@ -0,0 +1,65 @@
import {
Navbar as NextUINavbar,
NavbarContent,
NavbarMenuToggle,
NavbarBrand,
NavbarItem,
Link as NextUiLink
} from "@nextui-org/react";
import { useTranslations } from "next-intl";
import { siteConfig } from "@/config/site";
import { Link } from "@/src/navigation";
import LangSwitch from "./LangSwitch";
import { ThemeSwitch } from "@/components/theme-switch";
import { GithubIcon } from "@/components/icons";
import Image from "next/image";
export default function Header(params: { locale: string }) {
const t = useTranslations("Index");
return (
<NextUINavbar maxWidth="xl" position="sticky" className="bg-inherit">
<NavbarContent className="basis-1/5 sm:basis-full" justify="start">
<NavbarBrand as="li" className="gap-3 max-w-fit">
<Link
className="flex justify-start items-center gap-1"
href="/"
locale={params.locale}
>
<Image
src="/favicon/android-chrome-192x192.png"
width={32}
height={32}
alt="Logo"
/>
<p className="font-bold text-inherit">Test Case Manager</p>
</Link>
</NavbarBrand>
{siteConfig.navItems.map((item) => (
<NavbarItem key={item.href}>
<Link
className="data-[active=true]:text-primary data-[active=true]:font-medium"
href={item.href}
locale={params.locale}
>
{item.label}
</Link>
</NavbarItem>
))}
</NavbarContent>
<NavbarContent className="basis-1 pl-4" justify="end">
<NextUiLink
isExternal
href="https://github.com/kimatata/TestCaseManager"
aria-label="Github"
>
<GithubIcon className="text-default-500" />
</NextUiLink>
<ThemeSwitch />
<LangSwitch locale={params.locale} />
</NavbarContent>
</NextUINavbar>
);
}

View File

@@ -0,0 +1,44 @@
"use client";
import {
Button,
DropdownTrigger,
Dropdown,
DropdownMenu,
DropdownItem,
} from "@nextui-org/react";
import { Globe } from "lucide-react";
import { useRouter } from "@/src/navigation";
const locales = [
{ code: "en", name: "English" },
{ code: "ja", name: "日本語" },
];
export default function LangSwitch(params: { locale: string }) {
const router = useRouter();
async function changeLocale(locale: string) {
router.push("/", { locale: locale });
}
return (
<Dropdown>
<DropdownTrigger>
<Button size="sm" color="primary" startContent={<Globe size={16} />}>
{locales.find((locale) => locale.code === params.locale)?.name ||
params.locale}
</Button>
</DropdownTrigger>
<DropdownMenu aria-label="lacales">
{locales.map((entry) => (
<DropdownItem
key={entry.code}
onClick={() => changeLocale(entry.code)}
>
{entry.name}
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
);
}

View File

@@ -3,7 +3,7 @@ import { Metadata } from "next";
import { siteConfig } from "@/config/site";
import { fontSans } from "@/config/fonts";
import { Providers } from "./providers";
import { Navbar } from "@/components/navbar";
import Header from "./Header";
import clsx from "clsx";
export const metadata: Metadata = {
@@ -41,7 +41,7 @@ export default function RootLayout({
>
<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
<div className="relative flex flex-col min-h-screen light:bg-neutral-50 dark:bg-neutral-800">
<Navbar />
<Header locale={locale} />
<main>{children}</main>
{/* <footer className="w-full flex items-center justify-center py-3">
<Link