Adding Vietnamese version of IPV6, Rewrite content of README.md

app/components/layout/Header/HeaderClient.tsx

@@ -3,6 +3,8 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
+import { useLanguage } from "@/app/context/LanguageContext";
+import { useTranslation } from "@/app/hooks/useTranslation";
 
 type NavItem = { label: string; href: string };
 
@@ -15,9 +17,15 @@ export default function HeaderClient({
 }) {
   const pathname = usePathname();
   const [mobileOpen, setMobileOpen] = useState(false);
+  const { lang, setLang } = useLanguage();
+  const { site } = useTranslation();
 
   const isHome = pathname === "/";
-  const navItems = useMemo(() => nav.filter((x) => x.href !== "/"), [nav]);
+  const navItems = useMemo(() => site.nav.filter((x) => x.href !== "/"), [site.nav]);
+
+  const registerLabel = lang === "vi" ? "Đăng Ký" : "Register";
+  const registerNowLabel = lang === "vi" ? "Đăng Ký Ngay" : "Register Now";
+  const backLabel = lang === "vi" ? "Trang Chủ" : "Home";
 
   useEffect(() => {
     if (!mobileOpen) return;
@@ -45,7 +53,7 @@ export default function HeaderClient({
               } transition-colors duration-300`}
               href="/"
             >
-              Home
+              {backLabel}
             </Link>
             {navItems.map((item) => {
               const active = pathname === item.href;
@@ -63,15 +71,41 @@ export default function HeaderClient({
             })}
           </nav>
 
-          <div className="flex items-center gap-4 lg:gap-10">
-            <span className="hidden sm:block text-on-surface-variant/60 font-[var(--font-label-caps)] text-xs">
-              EN
-            </span>
+          <div className="flex items-center gap-4 lg:gap-6">
+            {/* Language Switcher — Desktop */}
+            <div className="hidden sm:flex items-center gap-1 font-[var(--font-label-caps)] text-xs">
+              <button
+                type="button"
+                onClick={() => setLang("en")}
+                className={`flex items-center gap-1 px-2 py-1 rounded transition-all duration-200 ${
+                  lang === "en"
+                    ? "text-primary border-b-2 border-primary"
+                    : "text-on-surface-variant/60 hover:text-primary"
+                }`}
+                title="English"
+              >
+                <span>EN</span>
+              </button>
+              <span className="text-on-surface-variant/30">|</span>
+              <button
+                type="button"
+                onClick={() => setLang("vi")}
+                className={`flex items-center gap-1 px-2 py-1 rounded transition-all duration-200 ${
+                  lang === "vi"
+                    ? "text-primary border-b-2 border-primary"
+                    : "text-on-surface-variant/60 hover:text-primary"
+                }`}
+                title="Tiếng Việt"
+              >
+                <span>VIE</span>
+              </button>
+            </div>
+
             <Link
               href="/registration"
               className="hidden sm:inline-flex gold-gradient-bg text-on-primary px-4 lg:px-6 py-2 lg:py-2.5 font-[var(--font-body-base)] text-xs lg:text-sm font-bold uppercase tracking-wider rounded-lg active:scale-95 transition-transform shadow-lg shadow-primary/10"
             >
-              Register
+              {registerLabel}
             </Link>
             <button
               type="button"
@@ -120,7 +154,7 @@ export default function HeaderClient({
               href="/"
               onClick={() => setMobileOpen(false)}
             >
-              Home
+              {backLabel}
             </Link>
             {navItems.map((item) => {
               const active = pathname === item.href;
@@ -140,15 +174,38 @@ export default function HeaderClient({
           </nav>
 
           <div className="mt-auto pt-10 border-t border-white/5 flex flex-col gap-6">
-            <div className="text-on-surface-variant/60 font-[var(--font-label-caps)] text-sm uppercase tracking-widest">
-              Language: EN
+            {/* Language Switcher — Mobile */}
+            <div className="flex items-center gap-2 font-[var(--font-label-caps)] text-sm">
+              <button
+                type="button"
+                onClick={() => setLang("en")}
+                className={`flex items-center gap-1.5 px-3 py-2 rounded-lg border transition-all duration-200 ${
+                  lang === "en"
+                    ? "border-primary text-primary bg-primary/10"
+                    : "border-white/10 text-on-surface-variant/60 hover:text-primary hover:border-primary/40"
+                }`}
+              >
+                <span>EN</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => setLang("vi")}
+                className={`flex items-center gap-1.5 px-3 py-2 rounded-lg border transition-all duration-200 ${
+                  lang === "vi"
+                    ? "border-primary text-primary bg-primary/10"
+                    : "border-white/10 text-on-surface-variant/60 hover:text-primary hover:border-primary/40"
+                }`}
+              >
+                <span>VIE</span>
+              </button>
             </div>
+
             <Link
               href="/registration"
               className="gold-gradient-bg text-on-primary w-full py-5 font-[var(--font-body-base)] text-lg font-bold uppercase tracking-widest rounded-xl text-center shadow-2xl"
               onClick={() => setMobileOpen(false)}
             >
-              Register Now
+              {registerNowLabel}
             </Link>
           </div>
         </div>