Apply i18n

2024-05-05 21:20:56 +09:00
parent 03560f8d17
commit ac9af2d604
15 changed files with 79 additions and 134 deletions
--- a/frontend/src/app/[locale]/Header.tsx
+++ b/frontend/src/app/[locale]/Header.tsx
@@ -3,10 +3,10 @@ import {
  NavbarContent,
  NavbarBrand,
  NavbarItem,
+  Chip,
  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";
@@ -15,10 +15,10 @@ import { GithubIcon } from "@/components/icons";
 import Image from "next/image";

 export default function Header(params: { locale: string }) {
-  const t = useTranslations("Index");
+  const t = useTranslations("Header");

  return (
-    <NextUINavbar maxWidth="xl" position="sticky" className="bg-inherit">
+    <NextUINavbar maxWidth="full" 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
@@ -32,20 +32,29 @@ export default function Header(params: { locale: string }) {
              height={32}
              alt="Logo"
            />
-            <p className="font-bold text-inherit">Test Case Manager</p>
+            <p className="font-bold text-inherit">Platest</p>
          </Link>
        </NavbarBrand>
-        {siteConfig.navItems.map((item) => (
-          <NavbarItem key={item.href}>
+        <NavbarItem>
+          <Chip size="sm" variant="flat">
            <Link
              className="data-[active=true]:text-primary data-[active=true]:font-medium"
-              href={item.href}
+              href="/about"
              locale={params.locale}
            >
-              {item.label}
+              1.0.0-alpha.3
            </Link>
-          </NavbarItem>
-        ))}
+          </Chip>
+        </NavbarItem>
+        <NavbarItem>
+          <Link
+            className="data-[active=true]:text-primary data-[active=true]:font-medium"
+            href="/projects"
+            locale={params.locale}
+          >
+            {t("projects")}
+          </Link>
+        </NavbarItem>
      </NavbarContent>

      <NavbarContent className="basis-1 pl-4" justify="end">
--- a/frontend/src/app/[locale]/layout.tsx
+++ b/frontend/src/app/[locale]/layout.tsx
@@ -1,34 +1,33 @@
 import "@/styles/globals.css";
-import { Metadata } from "next";
-import { siteConfig } from "@/config/site";
 import { fontSans } from "@/config/fonts";
 import { Providers } from "./providers";
 import Header from "./Header";
 import clsx from "clsx";
+import { getTranslations } from "next-intl/server";

-export const metadata: Metadata = {
-  title: {
-    default: siteConfig.name,
-    template: `%s - ${siteConfig.name}`,
-  },
-  description: siteConfig.description,
-  themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "white" },
-    { media: "(prefers-color-scheme: dark)", color: "black" },
-  ],
-  icons: {
-    icon: "/favicon/favicon.ico",
-    shortcut: "/favicon/favicon-16x16.png",
-    apple: "/favicon/apple-touch-icon.png",
-  },
-};
+export async function generateMetadata({ params: { locale } }) {
+  const t = await getTranslations({ locale, namespace: "Header" });
+  return {
+    title: t("title"),
+    description: t("description"),
+    themeColor: [
+      { media: "(prefers-color-scheme: light)", color: "white" },
+      { media: "(prefers-color-scheme: dark)", color: "black" },
+    ],
+    icons: {
+      icon: "/favicon/favicon.ico",
+      shortcut: "/favicon/favicon-16x16.png",
+      apple: "/favicon/apple-touch-icon.png",
+    },
+  };
+}

 export default function RootLayout({
  children,
-  params: {locale}
+  params: { locale },
 }: {
  children: React.ReactNode;
-  params: {locale: string};
+  params: { locale: string };
 }) {
  return (
    <html lang={locale} suppressHydrationWarning>
--- a/frontend/src/app/[locale]/page.tsx
+++ b/frontend/src/app/[locale]/page.tsx
@@ -4,7 +4,7 @@ import { useTranslations } from "next-intl";
 import { Link } from "@/src/navigation";

 export default function Home() {
-  const t = useTranslations("Index");
+  const t = useTranslations("Home");

  return (
    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
@@ -13,12 +13,10 @@ export default function Home() {
        <h1 className={title()}>Test Case Management Tool&nbsp;</h1>
        <br />
        <h2 className={subtitle({ class: "text-inherit mt-4" })}>
-          Integrate and manage all your software testing.
+          {t("integrate_and_manage")}
        </h2>
      </div>

-      <h1>{t("title")}</h1>
-
      <div className="flex gap-3">
        <Link
          href="/projects"
@@ -28,7 +26,7 @@ export default function Home() {
            variant: "shadow",
          })}
        >
-          Create first test project
+          {t("get_started")}
        </Link>
      </div>
    </section>
--- a/frontend/src/app/[locale]/projects/ProjectsPage.tsx
+++ b/frontend/src/app/[locale]/projects/ProjectsPage.tsx
@@ -83,7 +83,7 @@ export default function ProjectsPage({ messages, locale }: Props) {
  return (
    <div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
      <div className="w-full p-3 flex items-center justify-between">
-        <h3 className="font-bold">{messages.project}</h3>
+        <h3 className="font-bold">{messages.projectList}</h3>
        <div>
          <Button
            startContent={<Plus size={16} />}
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
@@ -165,7 +165,7 @@ export default function TestCaseTable({
  return (
    <>
      <div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between">
-        <h3 className="font-bold">{messages.testCases}</h3>
+        <h3 className="font-bold">{messages.testCaseList}</h3>
        <div>
          {(selectedKeys.size > 0 || selectedKeys === "all") && (
            <Button
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx
@@ -8,7 +8,7 @@ export default function Page({
 }) {
  const t = useTranslations("Cases");
  const messages = {
-    testCases: t("test_cases"),
+    testCaseList: t("test_case_list"),
    id: t("id"),
    title: t("title"),
    priority: t("priority"),
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/RunsPage.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/RunsPage.tsx
@@ -52,7 +52,7 @@ export default function RunsPage({ projectId, locale, messages }: Props) {
  return (
    <div className="container mx-auto max-w-3xl pt-6 px-6 flex-grow">
      <div className="w-full p-3 flex items-center justify-between">
-        <h3 className="font-bold">{messages.runs}</h3>
+        <h3 className="font-bold">{messages.runList}</h3>
        <div>
          <Button
            startContent={<Plus size={16} />}
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/page.tsx
@@ -8,7 +8,7 @@ export default function Page({
 }) {
  const t = useTranslations("Runs");
  const messages = {
-    runs: t("runs"),
+    runList: t("run_list"),
    id: t("id"),
    name: t("name"),
    description: t("description"),
--- a/frontend/src/app/[locale]/projects/page.tsx
+++ b/frontend/src/app/[locale]/projects/page.tsx
@@ -4,7 +4,7 @@ import { useTranslations } from "next-intl";
 export default function Page(params: { locale }) {
  const t = useTranslations("Projects");
  const messages = {
-    projects: t("projects"),
+    projectList: t("projectList"),
    project: t("project"),
    newProject: t("new_project"),
    editProject: t("edit_project"),