mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
master
mahdi 3 years ago
parent a515ba66cb
commit d7c826d1e9
2 changed files with 86 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/assets/icons/dark-crimson-hamburger-menu.svg
  2. 107
      src/components/Header/desgin1/HeaderDesign1.js

10
src/assets/icons/dark-crimson-hamburger-menu.svg
Unescape View File

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="42.098" height="52.867" viewBox="0 0 42.098 52.867">
<g id="vuesax_linear_textalign-justifycenter" data-name="vuesax/linear/textalign-justifycenter" transform="translate(-364 -188)">
<g id="textalign-justifycenter" transform="translate(364 188)">
<path id="Vector" d="M0,0H28.881" transform="translate(6.608 9.913)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M0,0H28.881" transform="translate(6.608 20.926)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M0,0H28.881" transform="translate(6.608 31.94)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-4" data-name="Vector" d="M0,0H42.1V52.867H0Z" transform="translate(42.098 52.867) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1020 B

107
src/components/Header/desgin1/HeaderDesign1.js
Unescape View File

@ -4,6 +4,7 @@ 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 darkCrimsonHamburgerMenu from "../../../assets/icons/dark-crimson-hamburger-menu.svg";
import verticalLineIcon from "../../../assets/icons/dark-crimson-vertical-line.svg";
const HeaderDesign1 = ({
@ -24,26 +25,32 @@ const HeaderDesign1 = ({
menuItems,
category,
searchBox,
topHeader,
bottomHeader,
}) => {
return (
<header className="container mx-auto py-2 px-8 w-full bg-white rounded shadow-sm">
<div className="flex justify-between items-center mb-7">
<div className="">
<span className="text-xs font-light ml-4 text-productPrice">
انتخاب کشور
</span>
<span className="text-xs font-light text-productPrice">
پیگیری سفارش
</span>
</div>
<div className="">
<span className="text-xs font-light text-productPrice">شکایات</span>
<span className="text-xs font-light mr-4 text-productPrice">
ورود و ثبت نام
</span>
{topHeader && (
<div className="flex justify-between items-center mb-2">
<div className="">
<span className="text-xs font-light ml-4 text-productPrice">
انتخاب کشور
</span>
<span className="text-xs font-light text-productPrice">
پیگیری سفارش
</span>
</div>
<div className="">
<span className="text-xs font-light text-productPrice ml-2 ">
شکایات{" "}
</span>
<span className="text-xs font-light text-productPrice">
ورود و ثبت نام
</span>
</div>
</div>
</div>
<div className="flex justify-between items-center">
)}
<div className="flex justify-between items-center relative">
<div className="ml-10">
<span className="text-sm font-bold text-productPrice ml-4">
Design System
@ -56,7 +63,7 @@ const HeaderDesign1 = ({
</div>
{menuItems && (
<div
className="hidden lg:flex items-center justify-around flex-1"
className="hidden lg:flex items-center w-3/5 justify-around flex-1 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
style={{ maxWidth: 700 }}
>
<a href="#" className="text-productPrice text-xs">
@ -81,19 +88,21 @@ const HeaderDesign1 = ({
)}
{searchBox && (
<div
className="flex flex-row-reverse flex-1 items-center relative"
style={{ maxWidth: 800 }}
className="flex flex-1 w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
style={{ maxWidth: 700 }}
>
<img
src={lightGraySearchIcon}
alt=""
className="w-4 h-4 absolute left-3"
/>
<input
type="text"
placeholder="نام کالا را جستجو کنید..."
className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400"
/>
<div className="flex flex-row-reverse items-center relative w-full">
<img
src={lightGraySearchIcon}
alt=""
className="w-4 h-4 absolute left-3"
/>
<input
type="text"
placeholder="نام کالا را جستجو کنید..."
className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400"
/>
</div>
</div>
)}
{loginBtn && (
@ -129,6 +138,39 @@ const HeaderDesign1 = ({
</div>
)}
</div>
{bottomHeader && (
<div className="flex items-center mt-4 relative w-full ">
<div className="ml-10 flex items-center">
<img src={darkCrimsonHamburgerMenu} alt="" className="w-5 h-5" />
<span className="text-xs text-productPrice mr-2">
دسته بندی ها کالاها
</span>
</div>
<div
className="hidden lg:flex items-center justify-around w-3/5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
style={{ maxWidth: 700 }}
>
<a href="#" className="text-productPrice text-xs">
محصولات
</a>
<a href="#" className="text-productPrice text-xs">
دسته بندی
</a>
<a href="#" className="text-productPrice text-xs">
تماس با ما
</a>
<a href="#" className="text-productPrice text-xs">
درباره ما
</a>
<a href="#" className="text-productPrice text-xs">
پیگیری
</a>
<a href="#" className="text-productPrice text-xs">
وبلاگ
</a>
</div>
</div>
)}
</header>
);
};
@ -148,9 +190,12 @@ HeaderDesign1.defaultProps = {
btnPY: "py-2",
btnPX: "px-8",
menuItems: true,
topHeader: true,
bottomHeader: true,
menuItems: false,
category: false,
searchBox: false,
searchBox: true,
// icons
loginBtn: false,

Write Preview
Loading…
Cancel
Save