49 lines
3.1 KiB
JavaScript
49 lines
3.1 KiB
JavaScript
|
||
import React from 'react';
|
||
import Link from 'next/link';
|
||
import Image from 'next/image';
|
||
import { IoIosArrowDown } from "react-icons/io";
|
||
|
||
export default function Header({ className = "" }) {
|
||
return (
|
||
<>
|
||
<header className={`flex justify-between items-center sticky top-0 left-0 right-0 px-4 md:px-8 lg:px-16 z-50 bg-white-500 shadow-md h-16 md:h-20 transition-all ${className}`}>
|
||
{/* لوگو و منوی دراپ داون */}
|
||
<div className="flex justify-center items-center gap-4 md:gap-8 shrink-0">
|
||
<Image
|
||
src="/KafehJoo.svg"
|
||
alt="KafehJoo Logo Default"
|
||
width={50}
|
||
height={45}
|
||
className="hover:scale-110 transition-transform" />
|
||
<div className="hidden md:block relative">
|
||
<select className="h-9 md:h-10 w-24 pr-2 bg-white border-2 border-primary-300 rounded-lg appearance-none text-sm cursor-pointer hover:border-primary-500 focus:border-primary-500 focus:outline-none transition-colors">
|
||
<option value="شهر">شهر</option>
|
||
<option value="کشور">کشور</option>
|
||
<option value="استان">استان</option>
|
||
</select>
|
||
<IoIosArrowDown className="absolute left-2 top-1/2 transform -translate-y-1/2 text-primary-500 pointer-events-none" />
|
||
</div>
|
||
</div>
|
||
{/* لیست آیتمها */}
|
||
<nav aria-label="main menu" className="hidden lg:flex items-center justify-between px-4 py-2">
|
||
<div className="flex items-center gap-8 text-black-500 font-semibold text-sm lg:text-base">
|
||
<Link href="/" className="hover:text-primary-500 transition-colors pb-1 border-b-2 border-transparent hover:border-primary-500">خانه</Link>
|
||
<Link href="/categories" className="hover:text-primary-500 transition-colors pb-1 border-b-2 border-transparent hover:border-primary-500">دستهبندی</Link>
|
||
<Link href="/contact_us" className="hover:text-primary-500 transition-colors pb-1 border-b-2 border-transparent hover:border-primary-500">تماس با ما</Link>
|
||
<Link href="/about_us" className="hover:text-primary-500 transition-colors pb-1 border-b-2 border-transparent hover:border-primary-500">درباره ما</Link>
|
||
</div>
|
||
</nav>
|
||
{/* دکمه ثبت نام */}
|
||
<Link href="/register"
|
||
className="flex justify-center items-center text-xs md:text-sm
|
||
font-bold h-9 md:h-10 px-4 md:px-6 text-white-100 bg-primary-500
|
||
hover:bg-primary-600 rounded-lg md:rounded-xl transition-all hover:shadow-lg
|
||
hover:-translate-y-0.5 active:translate-y-0 active:shadow-none shrink-0">
|
||
ثبت نام
|
||
</Link>
|
||
</header>
|
||
</>
|
||
)
|
||
}
|