hamid zarghami
62 lines
2.4 KiB
TypeScript
62 lines
2.4 KiB
TypeScript
import logo from "@/assets/images/logo.png";
|
||
import { Call, Profile, ShoppingCart, Truck, TruckFast } from "iconsax-reactjs";
|
||
import Image from "next/image";
|
||
import Input from "../components/Input";
|
||
import Seprator from "../components/Seprator";
|
||
|
||
const Header = () => {
|
||
return (
|
||
<div>
|
||
<div className="h-12 bg-secondary flex items-center justify-between px-[120px]">
|
||
<div className="flex gap-2 items-center">
|
||
<span className="text-primary flex items-center gap-2">
|
||
<Truck size={24} color="currentColor" />
|
||
<div className="text-[#3A4147] text-sm font-bold">ارسال رایگان برای خرید بالای ۱۰۰ میلیون تومان</div>
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex text-sm font-bold gap-2 items-center">
|
||
<span className="text-primary">20%</span>
|
||
<span>تخفیف برای اولین سفارش خود دریافت کنید |</span>
|
||
<span>
|
||
کد تخفیف : <span className="text-primary">FIRSTORDER</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex gap-2 items-center">
|
||
<Profile className="text-primary" size={24} color="currentColor" />
|
||
<div>سلام حمید</div>
|
||
</div>
|
||
</div>
|
||
<div className="bg-white h-[120px] flex gap-16 items-center border border-secondary px-[120px]">
|
||
<Image src={logo} alt="logo" width={116} height={72} />
|
||
<div className="flex-1">
|
||
<Input variant="search" placeholder="جستجوی محصول" />
|
||
</div>
|
||
<div className="flex gap-8 items-center">
|
||
<div className="flex gap-2 items-center">
|
||
<TruckFast variant="Bold" color="black" />
|
||
<div className="text-[#6C7680] text-sm">پیگیری سفارش</div>
|
||
</div>
|
||
|
||
<Seprator className="h-5 w-px" />
|
||
|
||
<div className="flex gap-2 items-center">
|
||
<Call variant="Bold" color="black" />
|
||
<div className="text-[#6C7680] text-sm">(30 خط) 02134782000</div>
|
||
</div>
|
||
|
||
<Seprator className="h-5 w-px" />
|
||
|
||
<div className="relative">
|
||
<ShoppingCart variant="Bold" color="black" />
|
||
<div className="absolute -top-1.5 -right-1.5 bg-primary text-white text-xs font-medium rounded-full size-4 flex items-center justify-center">0</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Header;
|