76 lines
3.3 KiB
TypeScript
76 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { Menu, X, User } from "lucide-react";
|
|
|
|
export default function Header() {
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100">
|
|
<div className="w-full max-w-6xl mx-auto">
|
|
<div className="flex justify-between items-center px-4 sm:px-6 lg:px-8 py-4">
|
|
{/* Логотип */}
|
|
<Link href="/" className="flex-shrink-0">
|
|
<Image
|
|
src="/images/logo.svg"
|
|
alt="Marine Travel"
|
|
width={150}
|
|
height={45}
|
|
className="h-10 w-auto"
|
|
/>
|
|
</Link>
|
|
|
|
{/* Контакты и кнопка */}
|
|
<div className="flex items-center space-x-4">
|
|
{/* Номер телефона - скрыт на маленьких экранах */}
|
|
<div className="hidden sm:flex items-center space-x-2 text-gray-700">
|
|
<span className="text-sm sm:text-base">
|
|
+7 (978) 744-89-00
|
|
</span>
|
|
</div>
|
|
|
|
{/* Кнопка мобильного меню */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() =>
|
|
setIsMobileMenuOpen(!isMobileMenuOpen)
|
|
}
|
|
className="text-gray-700 w-[100px] h-[48px] border"
|
|
>
|
|
{isMobileMenuOpen ? (
|
|
<X className="!h-[24px] !w-[24px]" />
|
|
) : (
|
|
<Menu className="!h-[24px] !w-[24px]" />
|
|
)}
|
|
<User className="!h-[24px] !w-[24px] text-brand" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Мобильное меню */}
|
|
{/* {isMobileMenuOpen && (
|
|
<div className="lg:hidden mt-4 pb-4 border-t border-gray-100">
|
|
<nav className="flex flex-col space-y-4 pt-4">
|
|
<div className="pt-4 border-t border-gray-100">
|
|
<div className="flex items-center space-x-2 text-gray-700 mb-4">
|
|
<span className="font-semibold">
|
|
+7 (123) 456-78-90
|
|
</span>
|
|
</div>
|
|
<Button className="w-full bg-primary hover:bg-primary/90 text-white">
|
|
Заказать звонок
|
|
</Button>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
)} */}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|