/**
 * Use the custom RSC Params type which gives you the global `[lng]` param.
 */
import { Params } from "@/types";
/**
 * Import the SSR translations hook from a local `i18n` folder.
 * NOTE: the SSR hook is awaited!
 */
import { useTranslation } from "@/i18n";

export default async function Page({ params: { lng } }: Params) {
  // Specify the feature name as your namespace.
  // Use the "global" namespace for reusable components like Button.
  const { t } = await useTranslation("feature", lng);

  return <h1>{t("title")}</h1>;
}

import { useTranslation } from "react-i18next";

export function CreateUserForm() {
  const { t } = useTranslation("onboarding");
}

"use client";
/**
 * Import useLngPathname instead of the usePathname
 */
import { useLngPathname } from "@/i18n";
/**
 * Get the type for prop which will be passed from the server component params.
 */
import { type LanguageParam } from "@/i18n";

export function Navbar({ lng }: LanguageParam) {
  // pathname no longer contains the lng prefix!
  const pathname = useLngPathname(lng);
  const { t } = useTranslation("global");

  // we can check if the path is active without worrying about the language:
  return (
    <nav>
      <NavbarLink href="/dashboard" active={pathname.startsWith("/dashboard")}>
        {t("dashboard")}
      </NavbarLink>
    </nav>
  );
}

/**
 * The local "t" function is necessary for the i18next-parser to extract the translation key properly.
 */
import { t } from "@/i18n";

const customError = z.string().refine((val) => val, {
  // The "zodError" namespace here is mandatory & typechecked
  // The actual key, will be passed down to the zod-i18n-map which will do the translation.
  params: { i18n: t("zodError:passwordsMustMatch") },
});