feat: add basic modules translation

messages/en.json

@@ -7,6 +7,69 @@
     "Sign up": "Sign up"
   },
   "sign-up-form": {
-    "title": "Hello world!"
+    "title": "Hello world!",
+    "enter-your-email-below-to-sign-up-to-your-account": "enter-your-email-below-to-sign-up-to-your-account",
+    "sign-up-to-your-account": "Sign up to your account",
+    "or": "Or",
+    "already-have-an-account": "Already have an account?",
+    "sign-in": "Sign in"
+  },
+  "appearance-settings": {
+    "choose-a-theme": "Choose a theme",
+    "toggle-theme": "Toggle theme",
+    "light": "Light",
+    "dark": "Dark",
+    "system": "System"
+  },
+  "avatar-button": {
+    "log-in": "Log In",
+    "account": "Account",
+    "log-out": "Log out"
+  },
+  "email": "Email",
+  "password": "Password",
+  "GithubSignInForm": {
+    "continue-with-github": "Continue with GitHub"
+  },
+  "nav": {
+    "platform": "Platform",
+    "projects": "Projects",
+    "more": "More",
+    "view-project": "View Project",
+    "share-project": "Share Project",
+    "delete-project": "Delete Project",
+    "upgrade-to-pro": "Upgrade to Pro",
+    "billing": "Billing",
+    "notifications": "Notifications",
+    "home": "Home"
+  },
+  "run-code": {
+    "run": "Run",
+    "run-code": "Run Code",
+    "running": "Running..."
+  },
+  "settings": {
+    "settings": "Settings",
+    "appearance": "Appearance",
+    "language-and-region": "Language & region",
+    "code-editor": "Code Editor",
+    "advanced": "Advanced",
+    "customize-your-settings-here": "Customize your settings here."
+  },
+  "submissions": {
+    "index": "Index",
+    "status": "Status",
+    "language": "Language",
+    "time": "Time",
+    "memory": "Memory",
+    "submitted": "Submitted"
+  },
+  "teams": {
+    "teams": "Teams",
+    "add-team": "Add team"
+  },
+  "test": {
+    "case": "Case",
+    "failed-to-submit-the-form-please-try-again": "Failed to submit the form. Please try again."
   }
 }

messages/zh.json

@@ -7,6 +7,69 @@
     "Sign up": "注册"
   },
   "sign-up-form": {
-    "title": "Hello world!"
+    "title": "Hello world!",
+    "already-have-an-account": "已经有账号了？",
+    "enter-your-email-below-to-sign-up-to-your-account": "在下面输入您的电子邮件以注册您的帐户",
+    "or": "或",
+    "sign-in": "登录",
+    "sign-up-to-your-account": "注册您的帐户"
+  },
+  "appearance-settings": {
+    "dark": "暗",
+    "light": "亮",
+    "system": "系统",
+    "choose-a-theme": "选择一个主题",
+    "toggle-theme": "切换主题"
+  },
+  "nav": {
+    "platform": "平台",
+    "projects": "项目",
+    "share-project": "共享项目",
+    "upgrade-to-pro": "升级到专业版",
+    "view-project": "查看项目",
+    "more": "更多",
+    "notifications": "通知",
+    "billing": "账务",
+    "delete-project": "删除项目",
+    "home": "主页"
+  },
+  "GithubSignInForm": {
+    "continue-with-github": "继续使用GitHub"
+  },
+  "avatar-button": {
+    "account": "账户",
+    "log-in": "登录",
+    "log-out": "注销"
+  },
+  "password": "密码",
+  "run-code": {
+    "run-code": "运行代码",
+    "run": "运行",
+    "running": "正在运行。。。"
+  },
+  "submissions": {
+    "status": "状态",
+    "submitted": "提交",
+    "time": "时间",
+    "language": "语言",
+    "memory": "内存",
+    "index": "指数"
+  },
+  "teams": {
+    "teams": "团队",
+    "add-team": "添加团队"
+  },
+  "email": "电子邮件",
+  "settings": {
+    "advanced": "高级",
+    "appearance": "外貌",
+    "code-editor": "代码编辑器",
+    "customize-your-settings-here": "在此处自定义您的设置。",
+    "language-and-region": "语言和地区",
+    "settings": "设置"
+  },
+  "test": {
+    "case": "样例",
+    "failed-to-submit-the-form-please-try-again": "提交失败。请重试。"
   }
 }

src/components/appearance-settings.tsx

@@ -1,9 +1,11 @@
+//appearance-settings
 "use client";
 
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import { CheckIcon, MinusIcon } from "lucide-react";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { useTranslations } from 'next-intl';
 
 const items = [
   { value: "system", label: "System", image: "/ui-system.png" },
@@ -13,11 +15,12 @@ const items = [
 
 export default function AppearanceSettings() {
   const { theme, setTheme } = useTheme();
+  const t = useTranslations('appearance-settings');
 
   return (
     <fieldset className="space-y-4">
       <legend className="text-foreground text-sm leading-none font-medium">
-        Choose a theme
+        {t('choose-a-theme')}
       </legend>
       <RadioGroup className="flex gap-3" defaultValue={theme}>
         {items.map((item) => (

src/components/avatar-button.tsx

@@ -1,3 +1,4 @@
+//avatar-button
 import {
   BadgeCheck,
   Bell,
@@ -21,6 +22,7 @@ import { auth, signOut } from "@/lib/auth";
 import { redirect } from "next/navigation";
 import { Skeleton } from "@/components/ui/skeleton";
 import { SettingsButton } from "@/components/settings-button";
+import { useTranslations } from 'next-intl';
 
 const UserAvatar = ({ image, name }: { image: string; name: string }) => (
   <Avatar className="h-8 w-8 rounded-lg">
@@ -45,6 +47,7 @@ export async function AvatarButton() {
   const image = session?.user?.image ?? "https://github.com/shadcn.png";
   const name = session?.user?.name ?? "unknown";
   const email = session?.user?.email ?? "unknwon@example.com";
+  const t = useTranslations('avatar-button');
 
   return (
     <DropdownMenu>
@@ -61,7 +64,7 @@ export async function AvatarButton() {
             <SettingsButton />
             <DropdownMenuItem onClick={handleSignIn}>
               <LogIn />
-              Log In
+              {t('log-in')}
             </DropdownMenuItem>
           </DropdownMenuGroup>
         ) : (
@@ -79,7 +82,7 @@ export async function AvatarButton() {
             <DropdownMenuGroup>
               <DropdownMenuItem>
                 <BadgeCheck />
-                Account
+                {t('account')}
               </DropdownMenuItem>
               <DropdownMenuItem>
                 <Bell />
@@ -93,7 +96,7 @@ export async function AvatarButton() {
             <DropdownMenuSeparator />
             <DropdownMenuItem onClick={handleSignOut}>
               <LogOut />
-              Log out
+              {t('log-out')}
             </DropdownMenuItem>
           </>
         )}

src/components/credentials-sign-in-form.tsx

@@ -19,6 +19,7 @@ import { useState, useTransition } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { signInWithCredentials } from "@/actions/auth";
 import { EyeIcon, EyeOffIcon, MailIcon } from "lucide-react";
+import { useTranslations } from 'next-intl';
 
 export type CredentialsSignInFormValues = z.infer<typeof authSchema>;
 
@@ -52,6 +53,8 @@ export function CredentialsSignInForm() {
     });
   };
 
+  const t = useTranslations('');
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-6">
@@ -60,7 +63,7 @@ export function CredentialsSignInForm() {
           name="email"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Email</FormLabel>
+              <FormLabel>{t('email')}</FormLabel>
               <FormControl>
                 <div className="relative">
                   <Input className="peer pe-9" {...field} />
@@ -79,7 +82,7 @@ export function CredentialsSignInForm() {
           name="password"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Password</FormLabel>
+              <FormLabel>{t('password')}</FormLabel>
               <FormControl>
                 <div className="relative">
                   <Input

src/components/credentials-sign-up-form.tsx

@@ -19,6 +19,7 @@ import { useState, useTransition } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { signUpWithCredentials } from "@/actions/auth";
 import { EyeIcon, EyeOffIcon, MailIcon } from "lucide-react";
+import { useTranslations } from 'next-intl';
 
 export type CredentialsSignUpFormValues = z.infer<typeof authSchema>;
 
@@ -57,6 +58,8 @@ export function CredentialsSignUpForm() {
     });
   };
 
+  const t = useTranslations('');
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-6">
@@ -65,7 +68,7 @@ export function CredentialsSignUpForm() {
           name="email"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Email</FormLabel>
+              <FormLabel>{t('email')}</FormLabel>
               <FormControl>
                 <div className="relative">
                   <Input className="peer pe-9" {...field} />
@@ -84,7 +87,7 @@ export function CredentialsSignUpForm() {
           name="password"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Password</FormLabel>
+              <FormLabel>{t('password')}</FormLabel>
               <FormControl>
                 <div className="relative">
                   <Input

src/components/github-sign-in-form.tsx

@@ -1,7 +1,10 @@
+//GithubSignInForm
 import { signIn } from "@/lib/auth";
 import { Button } from "@/components/ui/button";
+import { useTranslations } from "next-intl";
 
 export function GithubSignInForm() {
+   const t = useTranslations('GithubSignInForm');
   return (
     <form
       action={async () => {
@@ -16,7 +19,7 @@ export function GithubSignInForm() {
             fill="currentColor"
           />
         </svg>
-        Continue with GitHub
+        {t('continue-with-github')}
       </Button>
     </form>
   );

src/components/mode-toggle.tsx

@@ -11,9 +11,12 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import { useTranslations } from "next-intl"
 
 export function ModeToggle() {
   const { setTheme } = useTheme()
+  //appearance-settings
+  const t = useTranslations('appearance-settings');
 
   return (
     <DropdownMenu>
@@ -21,18 +24,18 @@ export function ModeToggle() {
         <Button variant="outline" size="icon">
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
+          <span className="sr-only">{t('toggle-theme')}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
+          {t('light')}
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
+          {t('dark')}
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
+          {t('system')}
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

src/components/nav-main.tsx

@@ -16,7 +16,9 @@ import {
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import { ChevronRight, type LucideIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 
+const t = useTranslations('nav');
 export interface NavMainProps {
   items: {
     title: string;
@@ -33,7 +35,7 @@ export interface NavMainProps {
 export function NavMain({ items }: NavMainProps) {
   return (
     <SidebarGroup>
-      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarGroupLabel>{t('platform')}</SidebarGroupLabel>
       <SidebarMenu>
         {items.map((item) =>
           !item.items ? (

src/components/nav-projects.tsx

@@ -24,6 +24,10 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar"
+import { useTranslations } from "next-intl";
+
+
+const t = useTranslations('nav');
 
 export function NavProjects({
   projects,
@@ -38,7 +42,7 @@ export function NavProjects({
 
   return (
     <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarGroupLabel>{t('projects')}</SidebarGroupLabel>
       <SidebarMenu>
         {projects.map((item) => (
           <SidebarMenuItem key={item.name}>
@@ -52,7 +56,7 @@ export function NavProjects({
               <DropdownMenuTrigger asChild>
                 <SidebarMenuAction showOnHover>
                   <MoreHorizontal />
-                  <span className="sr-only">More</span>
+                  <span className="sr-only">{t('more')}</span>
                 </SidebarMenuAction>
               </DropdownMenuTrigger>
               <DropdownMenuContent
@@ -62,16 +66,16 @@ export function NavProjects({
               >
                 <DropdownMenuItem>
                   <Folder className="text-muted-foreground" />
-                  <span>View Project</span>
+                  <span>{t('view-project')}</span>
                 </DropdownMenuItem>
                 <DropdownMenuItem>
                   <Forward className="text-muted-foreground" />
-                  <span>Share Project</span>
+                  <span>{t('share-project')}</span>
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem>
                   <Trash2 className="text-muted-foreground" />
-                  <span>Delete Project</span>
+                  <span>{t('delete-project')}</span>
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -80,7 +84,7 @@ export function NavProjects({
         <SidebarMenuItem>
           <SidebarMenuButton className="text-sidebar-foreground/70">
             <MoreHorizontal className="text-sidebar-foreground/70" />
-            <span>More</span>
+            <span>{t('more')}</span>
           </SidebarMenuButton>
         </SidebarMenuItem>
       </SidebarMenu>

src/components/nav-user.tsx

@@ -24,6 +24,9 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { useTranslations } from "next-intl";
+
+const t = useTranslations('');
 
 export interface NavUserProps {
   user: {
@@ -80,28 +83,28 @@ export function NavUser({
             <DropdownMenuGroup>
               <DropdownMenuItem>
                 <Sparkles />
-                Upgrade to Pro
+                {t('nav.upgrade-to-pro')}
               </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
               <DropdownMenuItem>
                 <BadgeCheck />
-                Account
+                {t('avatar-button.account')}
               </DropdownMenuItem>
               <DropdownMenuItem>
                 <CreditCard />
-                Billing
+                {t('nav.billing')}
               </DropdownMenuItem>
               <DropdownMenuItem>
                 <Bell />
-                Notifications
+                {t('nav.notifications')}
               </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
             <DropdownMenuItem>
               <LogOut />
-              Log out
+              {t('avatar-button.log-out')}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

src/components/navbar.tsx

@@ -11,10 +11,12 @@ import {
 } from "@/components/ui/breadcrumb";
 import { Home } from "lucide-react";
 import { usePathname } from "next/navigation";
+import { useTranslations } from "next-intl";
 
 export const Navbar = () => {
   const pathname = usePathname();
   const pathSegments = pathname.split("/").filter(Boolean); // Filter out empty strings
+  const t = useTranslations('nav');
 
   return (
     <Breadcrumb>
@@ -24,7 +26,7 @@ export const Navbar = () => {
           <BreadcrumbItem>
             <BreadcrumbPage>
               <Home size={16} strokeWidth={2} aria-hidden="true" />
-              <span className="sr-only">Home</span>
+              <span className="sr-only">{t('home')}</span>
             </BreadcrumbPage>
           </BreadcrumbItem>
         ) : (
@@ -33,7 +35,7 @@ export const Navbar = () => {
             <BreadcrumbItem>
               <BreadcrumbLink href="/">
                 <Home size={16} strokeWidth={2} aria-hidden="true" />
-                <span className="sr-only">Home</span>
+                <span className="sr-only">{t('home')}</span>
               </BreadcrumbLink>
             </BreadcrumbItem>
             <BreadcrumbSeparator />

src/components/run-code.tsx

@@ -13,6 +13,9 @@ import { Button } from "@/components/ui/button";
 import { useProblem } from "@/hooks/use-problem";
 import { LoaderCircleIcon, PlayIcon } from "lucide-react";
 import { showStatusToast } from "@/hooks/show-status-toast";
+import { useTranslations } from "next-intl";
+
+const t = useTranslations('run-code');
 
 interface RunCodeProps {
   className?: string;
@@ -66,10 +69,10 @@ export function RunCode({
                 aria-hidden="true"
               />
             )}
-            {isLoading ? "Running..." : "Run"}
+            {isLoading ? t('running') : t('run')}
           </Button>
         </TooltipTrigger>
-        <TooltipContent className="px-2 py-1 text-xs">Run Code</TooltipContent>
+        <TooltipContent className="px-2 py-1 text-xs">{t('run-code')}</TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );

src/components/settings-button.tsx

@@ -3,14 +3,16 @@
 import { Settings } from "lucide-react";
 import { useSettingsStore } from "@/stores/useSettingsStore";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { useTranslations } from "next-intl";
 
 export function SettingsButton() {
   const { setDialogOpen } = useSettingsStore();
+  const t = useTranslations('settings');
 
   return (
     <DropdownMenuItem onClick={() => setDialogOpen(true)}>
       <Settings />
-      Settings
+      {t('settings')}
     </DropdownMenuItem>
   );
 }

src/components/settings-dialog.tsx

@@ -29,13 +29,15 @@ import AppearanceSettings from "./appearance-settings";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useSettingsStore } from "@/stores/useSettingsStore";
 import { CodeXml, Globe, Paintbrush, Settings } from "lucide-react";
+import { useTranslations } from "next-intl";
 
+const t = useTranslations('settings');
 const data = {
   nav: [
-    { name: "Appearance", icon: Paintbrush },
+    { name: t('appearance'), icon: Paintbrush },
-    { name: "Language & region", icon: Globe },
+    { name: t('language-and-region'), icon: Globe },
-    { name: "Code Editor", icon: CodeXml },
+    { name: t('code-editor'), icon: CodeXml },
-    { name: "Advanced", icon: Settings },
+    { name: t('advanced'), icon: Settings },
   ],
 };
 
@@ -45,9 +47,9 @@ export function SettingsDialog() {
   return (
     <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
       <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
-        <DialogTitle className="sr-only">Settings</DialogTitle>
+        <DialogTitle className="sr-only">{t('settings')}</DialogTitle>
         <DialogDescription className="sr-only">
-          Customize your settings here.
+          {t('customize-your-settings-here')}
         </DialogDescription>
         <SidebarProvider className="items-start">
           <Sidebar collapsible="none" className="hidden md:flex">
@@ -80,7 +82,7 @@ export function SettingsDialog() {
                 <Breadcrumb>
                   <BreadcrumbList>
                     <BreadcrumbItem className="hidden md:block">
-                      <BreadcrumbLink href="#">Settings</BreadcrumbLink>
+                      <BreadcrumbLink href="#">{t('settings')}</BreadcrumbLink>
                     </BreadcrumbItem>
                     <BreadcrumbSeparator className="hidden md:block" />
                     <BreadcrumbItem>
@@ -92,7 +94,7 @@ export function SettingsDialog() {
             </header>
             <ScrollArea className="flex-1 overflow-y-auto p-4 pt-0">
               <div className="flex flex-col gap-4">
-                {activeSetting === "Appearance" ? (
+                {activeSetting === t('appearance') ? (
                   <AppearanceSettings />
                 ) : (
                   Array.from({ length: 10 }).map((_, i) => (

src/components/sign-up-form.tsx

@@ -1,26 +1,28 @@
 import { GithubSignInForm } from "@/components/github-sign-in-form";
 import { CredentialsSignUpForm } from "@/components/credentials-sign-up-form";
+import { useTranslations } from 'next-intl';
 
 export function SignUpForm() {
+  const t = useTranslations('sign-up-form');
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-col items-center gap-2 text-center">
-        <h1 className="text-2xl font-bold">Sign up to your account</h1>
+        <h1 className="text-2xl font-bold">{t('sign-up-to-your-account')}</h1>
         <p className="text-balance text-sm text-muted-foreground">
-          Enter your email below to sign up to your account
+          {t('enter-your-email-below-to-sign-up-to-your-account')}
         </p>
       </div>
       <CredentialsSignUpForm />
       <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
         <span className="relative z-10 bg-background px-2 text-muted-foreground">
-          Or
+          {t('or')}
         </span>
       </div>
       <GithubSignInForm />
       <div className="text-center text-sm">
-        Already have an account?{" "}
+        {t('already-have-an-account')}{" "}
         <a href="/sign-in" className="underline underline-offset-4">
-          Sign in
+          {t('sign-in')}
         </a>
       </div>
     </div>

src/components/submissions-table.tsx

@@ -10,7 +10,9 @@ import { Submission } from "@/generated/client";
 import { getStatusColorClass } from "@/lib/status";
 import { EditorLanguageIcons } from "@/config/editor-language-icons";
 import { formatDistanceToNow, isBefore, subDays, format } from "date-fns";
+import { useTranslations } from "next-intl";
 
+const t = useTranslations('submissions');
 interface SubmissionsTableProps {
   submissions: Submission[]
 }
@@ -24,12 +26,12 @@ export default function SubmissionsTable({ submissions }: SubmissionsTableProps)
     <Table>
       <TableHeader className="bg-transparent">
         <TableRow className="hover:bg-transparent">
-          <TableHead className="w-[100px]">Index</TableHead>
+          <TableHead className="w-[100px]">t('index')</TableHead>
-          <TableHead>Status</TableHead>
+          <TableHead>t('status')</TableHead>
-          <TableHead>Language</TableHead>
+          <TableHead>t('language')</TableHead>
-          <TableHead>Time</TableHead>
+          <TableHead>t('time')</TableHead>
-          <TableHead>Memory</TableHead>
+          <TableHead>t('memory')</TableHead>
-          <TableHead>Submitted</TableHead>
+          <TableHead>t('submitted')</TableHead>
         </TableRow>
       </TableHeader>
       <tbody aria-hidden="true" className="table-row h-2"></tbody>

src/components/team-switcher.tsx

@@ -18,6 +18,9 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar"
+import { useTranslations } from "next-intl"
+
+const t = useTranslations('teams');
 
 export function TeamSwitcher({
   teams,
@@ -63,7 +66,7 @@ export function TeamSwitcher({
             sideOffset={4}
           >
             <DropdownMenuLabel className="text-xs text-muted-foreground">
-              Teams
+              t('teams')
             </DropdownMenuLabel>
             {teams.map((team, index) => (
               <DropdownMenuItem
@@ -83,7 +86,7 @@ export function TeamSwitcher({
               <div className="flex size-6 items-center justify-center rounded-md border bg-background">
                 <Plus className="size-4" />
               </div>
-              <div className="font-medium text-muted-foreground">Add team</div>
+              <div className="font-medium text-muted-foreground">{t('add-team')}</div>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

src/components/testcase-card.tsx

@@ -6,7 +6,9 @@ import {
 } from "@/components/ui/tabs";
 import { TestcaseWithDetails } from "@/types/prisma";
 import TestcaseForm from "@/components/testcase-form";
+import { useTranslations } from "next-intl";
 
+const t = useTranslations('test');
 interface TestcaseCardProps {
   testcases: TestcaseWithDetails;
 }
@@ -21,7 +23,7 @@ export default function TestcaseCard({ testcases }: TestcaseCardProps) {
             value={`case-${index + 1}`}
             className="data-[state=active]:bg-muted data-[state=active]:shadow-none"
           >
-            Case {index + 1}
+            {t('case')} {index + 1}
           </TabsTrigger>
         ))}
       </TabsList>

src/components/testcase-form.tsx

@@ -13,7 +13,9 @@ import { toast } from "sonner";
 import { useForm } from "react-hook-form";
 import { Input } from "@/components/ui/input";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
 
+const t = useTranslations('test');
 const formSchema = z.record(z.string().min(1));
 
 interface TestcaseFormInterface {
@@ -32,7 +34,7 @@ export default function TestcaseForm(props: TestcaseFormInterface) {
       toast.success(JSON.stringify(values, null, 2));
     } catch (error) {
       console.error("Form submission error", error);
-      toast.error("Failed to submit the form. Please try again.");
+      toast.error(t('failed-to-submit-the-form-please-try-again'));
     }
   }
 
@@ -50,7 +52,7 @@ export default function TestcaseForm(props: TestcaseFormInterface) {
                 <FormControl>
                   <Input
                     className="bg-muted border-transparent shadow-none rounded-lg h-10"
-                    placeholder={`Enter ${fieldName}`}
+                    placeholder={`Enter'+' ${fieldName}`}
                     type="text"
                     {...field}
                   />