Apply i18n to client components

frontend/messages/en.json

@@ -3,21 +3,21 @@
     "title": "Hello world!"
   },
   "Projects": {
-    "projects": "プロジェクト",
+    "projects": "Projects",
-    "project": "プロジェクト",
+    "project": "Project",
-    "new_project": "新規プロジェクト",
+    "new_project": "New Project",
-    "edit_project": "プロジェクトの編集",
+    "edit_project": "Edit Project",
-    "delete_project": "プロジェクトの削除",
+    "delete_project": "Delete Project",
     "id": "ID",
-    "name": "名前",
+    "name": "Name",
-    "detail": "詳細",
+    "detail": "Detail",
-    "last_update": "最終更新",
+    "last_update": "Last update",
-    "actions": "アクション",
+    "actions": "Actions",
-    "project_name": "プロジェクト名",
+    "project_name": "Project Name",
-    "project_detail": "プロジェクト詳細",
+    "project_detail": "Project Detail",
-    "close": "閉じる",
+    "close": "Close",
-    "create": "作成",
+    "create": "Create",
-    "update": "作成",
+    "update": "Update",
-    "please_enter": "プロジェクト名を入力してください"
+    "please_enter": "Please enter project name"
   }
 }

frontend/messages/ja.json

@@ -3,21 +3,21 @@
     "title": "はろー"
   },
   "Projects": {
-    "projects": "Projects",
+    "projects": "プロジェクト",
-    "project": "Project",
+    "project": "プロジェクト",
-    "new_project": "New Project",
+    "new_project": "新規プロジェクト",
-    "edit_project": "Edit Project",
+    "edit_project": "プロジェクトの編集",
-    "delete_project": "Delete Project",
+    "delete_project": "プロジェクトの削除",
     "id": "ID",
-    "name": "Name",
+    "name": "名前",
-    "detail": "Detail",
+    "detail": "詳細",
-    "last_update": "Last update",
+    "last_update": "最終更新",
-    "actions": "Actions",
+    "actions": "アクション",
-    "project_name": "Project Name",
+    "project_name": "プロジェクト名",
-    "project_detail": "Project Detail",
+    "project_detail": "プロジェクト詳細",
-    "close": "Close",
+    "close": "閉じる",
-    "create": "Create",
+    "create": "作成",
-    "update": "Update",
+    "update": "更新",
-    "please_enter": "Please enter project name"
+    "please_enter": "プロジェクト名を入力してください"
   }
 }

frontend/src/app/[locale]/Header.tsx

@@ -1,7 +1,6 @@
 import {
   Navbar as NextUINavbar,
   NavbarContent,
-  NavbarMenuToggle,
   NavbarBrand,
   NavbarItem,
   Link as NextUiLink
@@ -36,7 +35,20 @@ export default function Header(params: { locale: string }) {
             <p className="font-bold text-inherit">Test Case Manager</p>
           </Link>
         </NavbarBrand>
-        {siteConfig.navItems.map((item) => (
+        <ul className="hidden lg:flex gap-4 justify-start ml-2">
+          {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>
+          ))}
+        </ul>
+        {/* {siteConfig.navItems.map((item) => (
           <NavbarItem key={item.href}>
             <Link
               className="data-[active=true]:text-primary data-[active=true]:font-medium"
@@ -46,7 +58,7 @@ export default function Header(params: { locale: string }) {
               {item.label}
             </Link>
           </NavbarItem>
-        ))}
+        ))} */}
       </NavbarContent>
 
       <NavbarContent className="basis-1 pl-4" justify="end">

frontend/src/app/[locale]/projects/ProjectDialog.tsx

@@ -11,13 +11,14 @@ import {
   ModalBody,
   ModalFooter,
 } from "@nextui-org/react";
-import { ProjectType } from "@/types/project";
+import { ProjectType, ProjectsMessages } from "@/types/project";
 
 type Props = {
   isOpen: boolean;
   editingProject: ProjectType;
   onCancel: () => void;
   onSubmit: (name: string, detail: string) => void;
+  messages: ProjectsMessages;
 };
 
 export default function ProjectDialog({
@@ -25,6 +26,7 @@ export default function ProjectDialog({
   editingProject,
   onCancel,
   onSubmit,
+  messages,
 }: Props) {
   const [projectName, setProjectName] = useState({
     text: editingProject ? editingProject.name : "",
@@ -80,7 +82,7 @@ export default function ProjectDialog({
       setProjectName({
         text: "",
         isValid: false,
-        errorMessage: "Please enter project name",
+        errorMessage: messages.pleaseEnter,
       });
 
       return;
@@ -98,11 +100,13 @@ export default function ProjectDialog({
       }}
     >
       <ModalContent>
-        <ModalHeader className="flex flex-col gap-1">Project</ModalHeader>
+        <ModalHeader className="flex flex-col gap-1">
+          {messages.project}
+        </ModalHeader>
         <ModalBody>
           <Input
             type="text"
-            label="Project Name"
+            label={messages.projectName}
             value={projectName.text}
             isInvalid={projectName.isValid}
             errorMessage={projectName.errorMessage}
@@ -114,7 +118,7 @@ export default function ProjectDialog({
             }}
           />
           <Textarea
-            label="Project Detail"
+            label={messages.projectDetail}
             value={projectDetail.text}
             isInvalid={projectDetail.isValid}
             errorMessage={projectDetail.errorMessage}
@@ -128,10 +132,10 @@ export default function ProjectDialog({
         </ModalBody>
         <ModalFooter>
           <Button variant="light" onPress={onCancel}>
-            Close
+            {messages.close}
           </Button>
           <Button color="primary" onPress={validate}>
-            {editingProject ? "Update" : "Create"}
+            {editingProject ? messages.update : messages.create}
           </Button>
         </ModalFooter>
       </ModalContent>

frontend/src/app/[locale]/projects/ProjectsPage.tsx

@@ -1,8 +1,8 @@
-// "use client";
+"use client";
 import { useEffect, useState } from "react";
 import { Button } from "@nextui-org/react";
 import { Plus } from "lucide-react";
-import { ProjectType } from "@/types/project";
+import { ProjectType, ProjectsMessages } from "@/types/project";
 import ProjectsTable from "./ProjectsTable";
 import ProjectDialog from "./ProjectDialog";
 import {
@@ -11,10 +11,12 @@ import {
   updateProject,
   deleteProject,
 } from "./projectsControl";
-import { useTranslations } from "next-intl";
 
-export default function ProjectsPage() {
+export type Props = {
-  const t = useTranslations("ProjectsPage");
+  messages: ProjectsMessages;
+};
+
+export default function ProjectsPage({ messages }: Props) {
   const [projects, setProjects] = useState([]);
 
   useEffect(() => {
@@ -78,33 +80,37 @@ export default function ProjectsPage() {
   };
 
   return (
-    <div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
+    <div className="flex justify-center">
-      <div className="w-full p-3 flex items-center justify-between">
+      <div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
-        <h3 className="font-bold">{t("project.project")}</h3>
+        <div className="w-full p-3 flex items-center justify-between">
-        <div>
+          <h3 className="font-bold">{messages.project}</h3>
-          <Button
+          <div>
-            startContent={<Plus size={16} />}
+            <Button
-            size="sm"
+              startContent={<Plus size={16} />}
-            color="primary"
+              size="sm"
-            onClick={openDialogForCreate}
+              color="primary"
-          >
+              onClick={openDialogForCreate}
-            {t("newProject")}
+            >
-          </Button>
+              {messages.newProject}
+            </Button>
+          </div>
         </div>
+
+        <ProjectsTable
+          projects={projects}
+          onEditProject={onEditClick}
+          onDeleteProject={onDeleteClick}
+          messages={messages}
+        />
+
+        <ProjectDialog
+          isOpen={isProjectDialogOpen}
+          editingProject={editingProject}
+          onCancel={closeDialog}
+          onSubmit={onSubmit}
+          messages={messages}
+        />
       </div>
-
-      <ProjectsTable
-        projects={projects}
-        onEditProject={onEditClick}
-        onDeleteProject={onDeleteClick}
-      />
-
-      <ProjectDialog
-        isOpen={isProjectDialogOpen}
-        editingProject={editingProject}
-        onCancel={closeDialog}
-        onSubmit={onSubmit}
-      />
     </div>
   );
 }

frontend/src/app/[locale]/projects/ProjectsTable.tsx

@@ -15,28 +15,30 @@ import {
   Link,
 } from "@nextui-org/react";
 import { MoreVertical } from "lucide-react";
-import { ProjectType } from "@/types/project";
+import { ProjectType, ProjectsMessages } from "@/types/project";
 import dayjs from "dayjs";
 
-const headerColumns = [
-  { name: "ID", uid: "id", sortable: true },
-  { name: "Name", uid: "name", sortable: true },
-  { name: "Detail", uid: "detail", sortable: true },
-  { name: "Last update", uid: "updatedAt", sortable: true },
-  { name: "Actions", uid: "actions" },
-];
-
 type Props = {
   projects: ProjectType[];
   onEditProject: (project: ProjectType) => void;
   onDeleteProject: (projectId: number) => void;
+  messages: ProjectsMessages;
 };
 
 export default function ProjectsTable({
   projects,
   onEditProject,
   onDeleteProject,
+  messages,
 }: Props) {
+  const headerColumns = [
+    { name: messages.id, uid: "id", sortable: true },
+    { name: messages.name, uid: "name", sortable: true },
+    { name: messages.detail, uid: "detail", sortable: true },
+    { name: messages.lastUpdate, uid: "updatedAt", sortable: true },
+    { name: messages.actions, uid: "actions" },
+  ];
+
   const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
     column: "id",
     direction: "ascending",
@@ -92,13 +94,13 @@ export default function ProjectsTable({
             </DropdownTrigger>
             <DropdownMenu aria-label="project actions">
               <DropdownItem onClick={() => onEditProject(project)}>
-                Edit project
+                {messages.editProject}
               </DropdownItem>
               <DropdownItem
                 className="text-danger"
                 onClick={() => onDeleteProject(project.id)}
               >
-                Delete project
+                {messages.deleteProject}
               </DropdownItem>
             </DropdownMenu>
           </Dropdown>

frontend/src/app/[locale]/projects/page.tsx

@@ -1,9 +1,29 @@
 import ProjectsPage from "./ProjectsPage";
+import { useTranslations } from "next-intl";
 
 export default function Page() {
+  const t = useTranslations("Projects");
+  const messages = {
+    projects: t("projects"),
+    project: t("project"),
+    newProject: t("new_project"),
+    editProject: t("edit_project"),
+    deleteProject: t("delete_project"),
+    id: t("id"),
+    name: t("name"),
+    detail: t("detail"),
+    lastUpdate: t("last_update"),
+    actions: t("actions"),
+    projectName: t("project_name"),
+    projectDetail: t("project_detail"),
+    close: t("close"),
+    create: t("create"),
+    update: t("update"),
+    pleaseEnter: t("please_enter"),
+  };
   return (
     <>
-      <ProjectsPage />
+      <ProjectsPage messages={messages} />
     </>
   );
 }

frontend/types/project.ts

@@ -4,4 +4,23 @@ export type ProjectType = {
   detail: string;
   createdAt: string;
   updatedAt: string;
-};
+};
+
+export type ProjectsMessages = {
+  project: string;
+  projects: string;
+  newProject: string;
+  editProject: string;
+  deleteProject: string;
+  id: string;
+  name: string;
+  detail: string;
+  lastUpdate: string;
+  actions: string;
+  projectName: string;
+  projectDetail: string;
+  close: string;
+  create: string;
+  update: string;
+  pleaseEnter: string;
+};