master
mahdi 3 years ago
parent fe32090716
commit ed09fae1f4
  1. 7
      src/assets/icons/light-gray-search-box.svg
  2. 52
      src/components/Header/desgin1/HeaderDesign1.js

@ -0,0 +1,7 @@
<svg id="vuesax_linear_search-normal" data-name="vuesax/linear/search-normal" xmlns="http://www.w3.org/2000/svg" width="38.895" height="38.895" viewBox="0 0 38.895 38.895">
<g id="search-normal">
<path id="Vector" d="M30.792,15.4A15.4,15.4,0,1,1,15.4,0,15.4,15.4,0,0,1,30.792,15.4Z" transform="translate(3.241 3.241)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M3.241,3.241,0,0" transform="translate(32.412 32.412)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H38.895V38.895H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 728 B

@ -3,6 +3,7 @@ import React from "react";
import cartIcon from "../../../assets/icons/dark-crimson-cart-icon.svg";
import profileIcon from "../../../assets/icons/dark-crimson-profile-icon.svg";
import searchIcon from "../../../assets/icons/dark-crimson-search-box.svg";
import lightGraySearchIcon from "../../../assets/icons/light-gray-search-box.svg";
import verticalLineIcon from "../../../assets/icons/dark-crimson-vertical-line.svg";
const HeaderDesign1 = ({
@ -11,14 +12,29 @@ const HeaderDesign1 = ({
iconProfile,
iconCart,
iconSearch,
border,
btnRounded,
btnPY,
btnPX,
loginBtnBgColor,
loginBorderColor,
registerBtnBgColor,
loginTextColor,
registerTextColor,
menuItems,
category,
}) => {
return (
<header className="p-4">
<div class="container flex justify-between items-center mx-auto py-2 px-8 md:px-14 lg:px-24 w-full bg-white rounded shadow-sm">
<div class="text-lg font-bold text-productPrice w-1/5 ">
<div className="container flex justify-evenly items-center mx-auto py-2 px-8 md:px-14 lg:px-24 w-full bg-white rounded shadow-sm">
<div className="text-lg font-bold text-productPrice w-1/5 ">
Design System
</div>
<div class="hidden lg:flex items-center justify-around w-3/5">
{category && (
<div className="text-md text-productPrice">دسته بندی ها</div>
)}
{menuItems && (
<div className="hidden lg:flex items-center justify-around w-3/5">
<a href="#" className="text-productPrice">
محصولات
</a>
@ -38,13 +54,26 @@ const HeaderDesign1 = ({
وبلاگ
</a>
</div>
)}
<div className="bg-yellow-400">
<img src={lightGraySearchIcon} alt="" className="w-4 h-4" />
<input
type="text"
placeholder="نام کالا را جستجو کنید..."
className="bg-red-100 text-xs rounded px-8 py-2"
/>
</div>
{loginBtn && (
<div className="w-1/5 flex justify-end">
<button className="ml-2 py-2 px-8 text-productPrice text-sm font-light rounded border border-darkCrimsonBorderColor">
<button
className={`ml-2 text-sm font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${loginBtnBgColor} ${loginBorderColor} ${loginTextColor}`}
>
ورود
</button>
{/* <img src={verticalLineIcon} alt="" className="" /> */}
<button className="py-2 px-8 text-white text-sm font-light rounded bg-darkCrimsonBgColor">
<button
className={`ml-2 text-sm font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${registerBtnBgColor} ${registerTextColor}`}
>
ثبت نام
</button>
</div>
@ -72,6 +101,19 @@ export default HeaderDesign1;
// یک تگ دیو در نظر گرفتم برای 3 تا ایکن سرچ/پروفایل/اضافه کردن به سبد خرید که اینارو انداختم داخل دیو ایکن هولدر
HeaderDesign1.defaultProps = {
border: "border",
loginBorderColor: "border-darkCrimsonBorderColor",
btnRounded: "rounded-sm",
loginBtnBgColor: "bg-white",
loginTextColor: "text-productPrice",
registerBtnBgColor: "bg-darkCrimsonBgColor",
registerTextColor: "text-white",
btnPY: "py-2",
btnPX: "px-8",
menuItems: false,
category: true,
// icons
loginBtn: true,
iconHolder: false,

Loading…
Cancel
Save