Install framer-motion and create shared layout components with i18n support. Update locale layout to include fixed navbar, flex-col body, and footer. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
import { useRouter, usePathname } from "next/navigation";
|
|
|
|
export function LanguageSwitcher() {
|
|
const locale = useLocale();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const t = useTranslations("footer");
|
|
|
|
function switchLocale(newLocale: string) {
|
|
const segments = pathname.split("/");
|
|
segments[1] = newLocale;
|
|
router.push(segments.join("/"));
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm text-gray-400">{t("language")}:</span>
|
|
<button
|
|
onClick={() => switchLocale("es")}
|
|
className={`text-sm ${locale === "es" ? "text-white font-bold" : "text-gray-400 hover:text-white"}`}
|
|
>
|
|
ES
|
|
</button>
|
|
<span className="text-gray-600">|</span>
|
|
<button
|
|
onClick={() => switchLocale("en")}
|
|
className={`text-sm ${locale === "en" ? "text-white font-bold" : "text-gray-400 hover:text-white"}`}
|
|
>
|
|
EN
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|