feat: add basic modules translation

2025-05-18 07:16:34 +00:00 · 2025-04-14 05:12:05 +08:00 · 2025-04-14 05:12:05 +08:00 · 3bd2b5f075
commit 3bd2b5f075
parent 9364f273eb
20 changed files with 231 additions and 58 deletions
--- a/messages/en.json
+++ b/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."
  }
-}
+}
--- a/messages/zh.json
+++ b/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": "提交失败。请重试。"
  }
-}
+}
--- a/src/components/appearance-settings.tsx
+++ b/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) => (
--- a/src/components/avatar-button.tsx
+++ b/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>
          </>
        )}
--- a/src/components/credentials-sign-in-form.tsx
+++ b/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
--- a/src/components/credentials-sign-up-form.tsx
+++ b/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
--- a/src/components/github-sign-in-form.tsx
+++ b/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>
  );
--- a/src/components/mode-toggle.tsx
+++ b/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>
--- a/src/components/nav-main.tsx
+++ b/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 ? (
--- a/src/components/nav-projects.tsx
+++ b/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>
--- a/src/components/nav-user.tsx
+++ b/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>
--- a/src/components/navbar.tsx
+++ b/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 />
--- a/src/components/run-code.tsx
+++ b/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>
  );
--- a/src/components/settings-button.tsx
+++ b/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>
  );
 }
--- a/src/components/settings-dialog.tsx
+++ b/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: "Language & region", icon: Globe },
-    { name: "Code Editor", icon: CodeXml },
-    { name: "Advanced", icon: Settings },
+    { name: t('appearance'), icon: Paintbrush },
+    { name: t('language-and-region'), icon: Globe },
+    { name: t('code-editor'), icon: CodeXml },
+    { 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) => (
--- a/src/components/sign-up-form.tsx
+++ b/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>
--- a/src/components/submissions-table.tsx
+++ b/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>Status</TableHead>
-          <TableHead>Language</TableHead>
-          <TableHead>Time</TableHead>
-          <TableHead>Memory</TableHead>
-          <TableHead>Submitted</TableHead>
+          <TableHead className="w-[100px]">t('index')</TableHead>
+          <TableHead>t('status')</TableHead>
+          <TableHead>t('language')</TableHead>
+          <TableHead>t('time')</TableHead>
+          <TableHead>t('memory')</TableHead>
+          <TableHead>t('submitted')</TableHead>
        </TableRow>
      </TableHeader>
      <tbody aria-hidden="true" className="table-row h-2"></tbody>
--- a/src/components/team-switcher.tsx
+++ b/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>
--- a/src/components/testcase-card.tsx
+++ b/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>
--- a/src/components/testcase-form.tsx
+++ b/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}
                  />