212 lines
13 KiB
TypeScript
212 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import {
|
|
Locale,
|
|
languages,
|
|
generateLocalizedPath,
|
|
removeLocaleFromPath,
|
|
} from '@/lib/i18n';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { useRouter, usePathname } from 'next/navigation';
|
|
|
|
interface NavigationProps {
|
|
locale: Locale;
|
|
navigation: Array<{ name: string; href: string }>;
|
|
companyName: string;
|
|
}
|
|
|
|
export default function Navigation({ locale, navigation, companyName }: NavigationProps) {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
const handleLanguageChange = (newLocale: Locale) => {
|
|
const currentPath = removeLocaleFromPath(pathname);
|
|
const newPath = generateLocalizedPath(currentPath, newLocale);
|
|
document.cookie = `locale=${newLocale}; path=/; max-age=31536000`;
|
|
router.push(newPath);
|
|
};
|
|
|
|
return (
|
|
<nav className="fixed top-0 w-full bg-white/95 backdrop-blur-sm border-b border-gray-100 z-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
{/* Logo */}
|
|
<div className="flex-shrink-0">
|
|
<Link href={generateLocalizedPath('', locale)} className="flex items-center space-x-3">
|
|
<Image
|
|
src="/images/logo.png"
|
|
alt={companyName ? `${companyName} Logo` : "HaoAWS Logo"}
|
|
width={256}
|
|
height={256}
|
|
className="h-8 w-auto"
|
|
priority
|
|
/>
|
|
<h1 className="text-xl font-light tracking-tight text-gray-900">
|
|
{companyName}
|
|
</h1>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:block">
|
|
<div className="ml-10 flex items-baseline space-x-8">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-light transition-colors"
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contact Icons & Language Switcher */}
|
|
<div className="flex items-center space-x-4">
|
|
{/* Contact Icons */}
|
|
<div className="hidden md:flex items-center space-x-3">
|
|
{/* Telegram */}
|
|
<a
|
|
href="https://t.me/haoaws_official"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-gray-600 hover:text-blue-500 transition-colors"
|
|
title="Telegram"
|
|
>
|
|
<svg
|
|
className="w-5 h-5"
|
|
fill="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.568 8.16l-1.642 7.702c-.123.559-.45.696-.913.433l-2.523-1.858-1.217 1.17c-.135.135-.249.249-.51.249l.182-2.576 4.71-4.253c.205-.182-.045-.283-.318-.1l-5.825 3.668-2.515-.785c-.547-.171-.558-.547.114-.81l9.826-3.784c.456-.171.856.1.706.81z"/>
|
|
</svg>
|
|
</a>
|
|
|
|
{/* WhatsApp */}
|
|
<a
|
|
href="https://wa.me/19174029875"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-gray-600 hover:text-green-500 transition-colors"
|
|
title="WhatsApp"
|
|
>
|
|
<svg
|
|
className="w-5 h-5"
|
|
fill="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
|
|
</svg>
|
|
</a>
|
|
|
|
{/* Placeholder for future social icons - currently disabled */}
|
|
<a
|
|
href="#"
|
|
className="text-gray-300 hover:text-green-500 transition-colors opacity-50 cursor-not-allowed"
|
|
title="WeChat (Coming Soon)"
|
|
>
|
|
<svg
|
|
className="w-5 h-5"
|
|
fill="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.152 4.203 2.943 5.539-.192.64-.576 1.627-.576 1.627s.96-.32 2.304-.8c.48.128.992.256 1.536.256 4.8 0 8.691-3.264 8.691-7.296 0-4.032-3.891-7.296-8.691-7.296z"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
{/* Language Switcher */}
|
|
<div className="relative">
|
|
<select
|
|
value={locale}
|
|
onChange={(e) => handleLanguageChange(e.target.value as Locale)}
|
|
className="appearance-none bg-transparent border border-gray-200 rounded px-3 py-1 text-sm focus:outline-none focus:border-gray-400"
|
|
>
|
|
{languages.map((lang) => (
|
|
<option key={lang.code} value={lang.code}>
|
|
{lang.flag} {lang.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Mobile menu button */}
|
|
<button
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
className="md:hidden p-2"
|
|
>
|
|
<div className="w-6 h-6 flex flex-col justify-center items-center">
|
|
<span
|
|
className={`bg-gray-600 block transition-all duration-300 ease-out h-0.5 w-6 rounded-sm ${
|
|
isMenuOpen
|
|
? 'rotate-45 translate-y-1'
|
|
: '-translate-y-0.5'
|
|
}`}
|
|
></span>
|
|
<span
|
|
className={`bg-gray-600 block transition-all duration-300 ease-out h-0.5 w-6 rounded-sm my-0.5 ${
|
|
isMenuOpen ? 'opacity-0' : 'opacity-100'
|
|
}`}
|
|
></span>
|
|
<span
|
|
className={`bg-gray-600 block transition-all duration-300 ease-out h-0.5 w-6 rounded-sm ${
|
|
isMenuOpen
|
|
? '-rotate-45 -translate-y-1'
|
|
: 'translate-y-0.5'
|
|
}`}
|
|
></span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
{isMenuOpen && (
|
|
<div className="md:hidden">
|
|
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 border-t border-gray-100">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-light"
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
|
|
{/* Mobile Contact Icons */}
|
|
<div className="flex items-center space-x-4 px-3 py-2">
|
|
<a
|
|
href="https://t.me/haoaws_official"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-gray-600 hover:text-blue-500 transition-colors"
|
|
title="Telegram"
|
|
>
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.568 8.16l-1.642 7.702c-.123.559-.45.696-.913.433l-2.523-1.858-1.217 1.17c-.135.135-.249.249-.51.249l.182-2.576 4.71-4.253c.205-.182-.045-.283-.318-.1l-5.825 3.668-2.515-.785c-.547-.171-.558-.547.114-.81l9.826-3.784c.456-.171.856.1.706.81z"/>
|
|
</svg>
|
|
</a>
|
|
<a
|
|
href="https://wa.me/19174029875"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-gray-600 hover:text-green-500 transition-colors"
|
|
title="WhatsApp"
|
|
>
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|