Update Konten & bahasa

resources/js/components/site/site-header.tsx

@@ -4,12 +4,16 @@ import Brand from '@/components/site/brand';
 import { ButtonLink } from '@/components/site/button';
 import Container from '@/components/site/container';
 import Icon from '@/components/site/icon';
+import LanguageToggle from '@/components/site/language-toggle';
 import ThemeToggle from '@/components/site/theme-toggle';
+import { common } from '@/content/common';
 import { company, consultationUrl, navigation, offices } from '@/data/site';
 import { useCurrentUrl } from '@/hooks/use-current-url';
+import { useContent } from '@/hooks/use-locale';
 import { cn } from '@/lib/utils';
 
 export default function SiteHeader() {
+    const t = useContent(common);
     const { isCurrentUrl } = useCurrentUrl();
     const [menuOpen, setMenuOpen] = useState(false);
     const closeMenu = () => setMenuOpen(false);
@@ -20,12 +24,12 @@ export default function SiteHeader() {
                 <Brand />
 
                 <nav
-                    aria-label="Navigasi utama"
+                    aria-label={t.header.mainNav}
                     className="hidden items-center gap-8 lg:flex"
                 >
                     {navigation.map((item) => (
                         <Link
-                            key={item.label}
+                            key={item.key}
                             href={item.href}
                             className={cn(
                                 'hover:border-primary hover:text-on-surface border-b-2 pb-1 text-sm font-medium transition-all',
@@ -34,12 +38,12 @@ export default function SiteHeader() {
                                     : 'text-on-surface-variant border-transparent',
                             )}
                         >
-                            {item.label}
+                            {t.nav[item.key]}
                         </Link>
                     ))}
                 </nav>
 
-                <div className="flex items-center gap-3">
+                <div className="flex items-center gap-2 sm:gap-3">
                     <div className="text-on-surface-variant hidden flex-col text-right font-mono text-[11px] 2xl:flex">
                         <a
                             href={offices[0].phone.href}
@@ -58,18 +62,21 @@ export default function SiteHeader() {
                             {company.email.busdev}
                         </a>
                     </div>
+                    <LanguageToggle />
                     <ThemeToggle />
                     <ButtonLink
                         href={consultationUrl}
                         size="sm"
                         icon="support_agent"
-                        className="hidden sm:inline-flex"
+                        className="hidden md:inline-flex"
                     >
-                        Konsultasi IT
+                        {t.header.consult}
                     </ButtonLink>
                     <button
                         type="button"
-                        aria-label={menuOpen ? 'Tutup menu' : 'Buka menu'}
+                        aria-label={
+                            menuOpen ? t.header.closeMenu : t.header.openMenu
+                        }
                         aria-expanded={menuOpen}
                         onClick={() => setMenuOpen((open) => !open)}
                         className="border-outline-variant/50 bg-surface-container-low text-on-surface inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-xl border lg:hidden"
@@ -84,13 +91,13 @@ export default function SiteHeader() {
 
             {menuOpen && (
                 <nav
-                    aria-label="Navigasi utama"
+                    aria-label={t.header.mainNav}
                     className="border-outline-variant/40 bg-surface border-t lg:hidden"
                 >
                     <Container className="flex flex-col gap-1 py-4">
                         {navigation.map((item) => (
                             <Link
-                                key={item.label}
+                                key={item.key}
                                 href={item.href}
                                 onClick={closeMenu}
                                 className={cn(
@@ -100,7 +107,7 @@ export default function SiteHeader() {
                                         : 'text-on-surface-variant hover:bg-surface-container hover:text-on-surface',
                                 )}
                             >
-                                {item.label}
+                                {t.nav[item.key]}
                             </Link>
                         ))}
                         <ButtonLink
@@ -108,9 +115,9 @@ export default function SiteHeader() {
                             size="sm"
                             icon="support_agent"
                             onClick={closeMenu}
-                            className="mt-2 sm:hidden"
+                            className="mt-2 md:hidden"
                         >
-                            Konsultasi IT
+                            {t.header.consult}
                         </ButtonLink>
                     </Container>
                 </nav>