first commit

2026-09-28 13:52:25 +07:00
commit 566275348c
262 changed files with 37008 additions and 0 deletions
@@ -0,0 +1,120 @@
+import { Link } from '@inertiajs/react';
+import { useState } from 'react';
+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 ThemeToggle from '@/components/site/theme-toggle';
+import { company, consultationUrl, navigation, offices } from '@/data/site';
+import { useCurrentUrl } from '@/hooks/use-current-url';
+import { cn } from '@/lib/utils';
+
+export default function SiteHeader() {
+    const { isCurrentUrl } = useCurrentUrl();
+    const [menuOpen, setMenuOpen] = useState(false);
+    const closeMenu = () => setMenuOpen(false);
+
+    return (
+        <header className="border-outline-variant/40 bg-surface/85 fixed inset-x-0 top-0 z-50 border-b backdrop-blur-md">
+            <Container className="flex h-20 items-center justify-between gap-4">
+                <Brand />
+
+                <nav
+                    aria-label="Navigasi utama"
+                    className="hidden items-center gap-8 lg:flex"
+                >
+                    {navigation.map((item) => (
+                        <Link
+                            key={item.label}
+                            href={item.href}
+                            className={cn(
+                                'hover:border-primary hover:text-on-surface border-b-2 pb-1 text-sm font-medium transition-all',
+                                isCurrentUrl(item.href)
+                                    ? 'border-primary text-on-surface font-semibold'
+                                    : 'text-on-surface-variant border-transparent',
+                            )}
+                        >
+                            {item.label}
+                        </Link>
+                    ))}
+                </nav>
+
+                <div className="flex items-center 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}
+                            className="text-on-surface hover:text-primary flex items-center justify-end gap-1 font-semibold"
+                        >
+                            <Icon
+                                name="call"
+                                className="text-primary text-xs"
+                            />
+                            {offices[0].phone.label}
+                        </a>
+                        <a
+                            href={`mailto:${company.email.busdev}`}
+                            className="hover:text-primary"
+                        >
+                            {company.email.busdev}
+                        </a>
+                    </div>
+                    <ThemeToggle />
+                    <ButtonLink
+                        href={consultationUrl}
+                        size="sm"
+                        icon="support_agent"
+                        className="hidden sm:inline-flex"
+                    >
+                        Konsultasi IT
+                    </ButtonLink>
+                    <button
+                        type="button"
+                        aria-label={menuOpen ? 'Tutup menu' : 'Buka menu'}
+                        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"
+                    >
+                        <Icon
+                            name={menuOpen ? 'close' : 'menu'}
+                            className="text-2xl"
+                        />
+                    </button>
+                </div>
+            </Container>
+
+            {menuOpen && (
+                <nav
+                    aria-label="Navigasi utama"
+                    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}
+                                href={item.href}
+                                onClick={closeMenu}
+                                className={cn(
+                                    'rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
+                                    isCurrentUrl(item.href)
+                                        ? 'bg-surface-container-high text-on-surface'
+                                        : 'text-on-surface-variant hover:bg-surface-container hover:text-on-surface',
+                                )}
+                            >
+                                {item.label}
+                            </Link>
+                        ))}
+                        <ButtonLink
+                            href={consultationUrl}
+                            size="sm"
+                            icon="support_agent"
+                            onClick={closeMenu}
+                            className="mt-2 sm:hidden"
+                        >
+                            Konsultasi IT
+                        </ButtonLink>
+                    </Container>
+                </nav>
+            )}
+        </header>
+    );
+}