master
mahdi 3 years ago
parent fe32090716
commit ed09fae1f4
  1. 7
      src/assets/icons/light-gray-search-box.svg
  2. 88
      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 cartIcon from "../../../assets/icons/dark-crimson-cart-icon.svg";
import profileIcon from "../../../assets/icons/dark-crimson-profile-icon.svg"; import profileIcon from "../../../assets/icons/dark-crimson-profile-icon.svg";
import searchIcon from "../../../assets/icons/dark-crimson-search-box.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"; import verticalLineIcon from "../../../assets/icons/dark-crimson-vertical-line.svg";
const HeaderDesign1 = ({ const HeaderDesign1 = ({
@ -11,40 +12,68 @@ const HeaderDesign1 = ({
iconProfile, iconProfile,
iconCart, iconCart,
iconSearch, iconSearch,
border,
btnRounded,
btnPY,
btnPX,
loginBtnBgColor,
loginBorderColor,
registerBtnBgColor,
loginTextColor,
registerTextColor,
menuItems,
category,
}) => { }) => {
return ( return (
<header className="p-4"> <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 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 class="text-lg font-bold text-productPrice w-1/5 "> <div className="text-lg font-bold text-productPrice w-1/5 ">
Design System Design System
</div> </div>
<div class="hidden lg:flex items-center justify-around w-3/5"> {category && (
<a href="#" className="text-productPrice"> <div className="text-md text-productPrice">دسته بندی ها</div>
محصولات )}
</a> {menuItems && (
<a href="#" className="text-productPrice"> <div className="hidden lg:flex items-center justify-around w-3/5">
دسته بندی <a href="#" className="text-productPrice">
</a> محصولات
<a href="#" className="text-productPrice"> </a>
تماس با ما <a href="#" className="text-productPrice">
</a> دسته بندی
<a href="#" className="text-productPrice"> </a>
درباره ما <a href="#" className="text-productPrice">
</a> تماس با ما
<a href="#" className="text-productPrice"> </a>
پیگیری <a href="#" className="text-productPrice">
</a> درباره ما
<a href="#" className="text-productPrice"> </a>
وبلاگ <a href="#" className="text-productPrice">
</a> پیگیری
</a>
<a href="#" className="text-productPrice">
وبلاگ
</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> </div>
{loginBtn && ( {loginBtn && (
<div className="w-1/5 flex justify-end"> <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> </button>
{/* <img src={verticalLineIcon} alt="" className="" /> */} {/* <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> </button>
</div> </div>
@ -72,6 +101,19 @@ export default HeaderDesign1;
// یک تگ دیو در نظر گرفتم برای 3 تا ایکن سرچ/پروفایل/اضافه کردن به سبد خرید که اینارو انداختم داخل دیو ایکن هولدر // یک تگ دیو در نظر گرفتم برای 3 تا ایکن سرچ/پروفایل/اضافه کردن به سبد خرید که اینارو انداختم داخل دیو ایکن هولدر
HeaderDesign1.defaultProps = { 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, loginBtn: true,
iconHolder: false, iconHolder: false,

Loading…
Cancel
Save