update src/components/Navbar/HeaderDesign1/index.js and src/components/Navbar/index.js

master
mahdi andalib 2 years ago
parent e2e6869efb
commit a921f6affe
  1. 113
      src/components/Navbar/HeaderDesign1/index.js
  2. 4
      src/components/Navbar/HeaderDesign2/arrow-down.svg
  3. 140
      src/components/Navbar/HeaderDesign2/index.js
  4. 8
      src/components/Navbar/HeaderDesign2/profile-pic.svg
  5. 5
      src/components/Navbar/HeaderDesign2/search-normal.svg
  6. 2
      src/components/Navbar/index.js

@ -1,4 +1,5 @@
import React from "react";
import Button from "../../ButtonDesign/Button";
import Search from "../../SearchDesign/Search";
@ -9,115 +10,96 @@ const HeaderDesign1 = ({
searchBox,
topHeader,
bottomHeader,
productCategoryTextColor,
menuItemsColor,
}) => {
return (
<header className={`rounded-b-md w-full bg-transparent`}>
<header className="rounded-b-md w-full bg-white p-4">
<>
{topHeader && (
<div className="flex justify-between items-center mb-2">
<div
className="divide-x flex flex-row-reverse transform translate-x-2"
style={{}}
>
<span className={`text-xs font-light px-2 text-gray-500`}>
انتخاب کشور
</span>
<span className={`text-xs font-light px-2text-gray-500`}>
پیگیری سفارش
</span>
<div className="flex flex-row-reverse divide-x transform translate-x-2">
<span className="text-xs px-2 text-gray-500">انتخاب کشور</span>
<span className="text-xs px-2 text-gray-500">پیگیری سفارش</span>
</div>
<div className="">
<span className={`text-xs font-light ml-2text-gray-500`}>
<div className="flex flex-row-reverse divide-x ">
<span className="text-xs flex-grow text-gray-500">
شکایات&nbsp;
</span>
<span className={`text-xs font-lighttext-gray-500`}>
<span className="text-xs flex-grow text-gray-500">
ورود و ثبت نام
</span>
</div>
</div>
)}
<div className="border-b border-lightGrayBorderColor mb-5"></div>
<div className="border-b border-[#DBDBDB88] my-7"></div>
</>
<div className="flex justify-between items-center relative">
<div className="ml-10">
<span className={`text-sm font-bold ml-4 text-gray-700`}>
<div className="relative flex justify-between items-center">
<div className="">
<span className="text-sm font-sansbold ml-4 text-gray-700">
Design System
</span>
{category && (
<span className={`text-sm font-bold ${productCategoryTextColor}`}>
<span className="text-sm font-bold text-[#132F52]">
دسته بندی ها
</span>
)}
</div>
<div
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 }}
>
{menuItems?.map((item, index) => (
<a href="#" className="text-productPrice text-xs" key={index}>
{item}
</a>
))}
</div>
{searchBox === false && (
<div className="flex flex-row flex-1 items-center justify-around">
{menuItems?.map((item, index) => (
<a href="#" className="text-[#132F52] text-xs" key={index}>
{item}
</a>
))}
</div>
)}
{searchBox && (
<div
className="flex w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
style={{ maxWidth: 700 }}
>
<div className="w-full max-w-[700px] flex absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
<Search />
</div>
)}
{loginBtn && (
<div className="flex justify-end mr-7">
<button className={`ml-2 text-xs font-light`}>ورود</button>
<button className={`ml-2 text-xs font-light`}>ثبت نام</button>
<div className="flex items-center gap-x-1 ml-4">
<Button
text="ورود"
className="text-xs text-white font-sansbold bg-gray-400 rounded py-0.5 px-1.5"
/>
<Button
text="ثبت نام"
className="text-xs text-gray-600 font-sansbold border border-gray-400 rounded py-0.5 px-1.5"
/>
</div>
)}
<div className="w-1/5 flex justify-end items-center ">
<img
src="images/dark-crimson-cart-icon.svg"
alt=""
className="w-5 h-5 ml-2"
/>
<div className="flex items-center gap-x-2 ">
<img src="images/dark-crimson-cart-icon.svg" alt="" className="w-5" />
<img
src="images/dark-crimson-search-box.svg"
alt=""
className="w-5 h-5 ml-2"
className="w-5"
/>
<img
src="images/dark-crimson-profile-icon.svg"
alt=""
className="w-5 h-5"
className="w-5"
/>
</div>
</div>
{bottomHeader && (
<>
<div className="border-b border-lightGrayBorderColor mt-5"></div>
<div className="flex items-center mt-4 relative w-full ">
<div className="ml-10 flex items-center">
<div className="border-b border-[#DBDBDB88] my-7"></div>
<div className="w-full relative flex items-center">
<div className="flex flex-row items-center">
<img
src="images/dark-crimson-hamburger-menu.svg"
alt=""
className="w-5 h-5"
/>
<img
src="images/white-hamburger-menu-icon.svg"
alt=""
className="w-3 h-3"
className="w-5"
/>
<span className={`text-xs mr-2 ${productCategoryTextColor}`}>
<span className="text-xs mr-2 text-[#132F52]">
دسته بندی کالاها
</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 }}
>
<div className="max-w-[700px] flex flex-row items-center justify-around w-3/5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
{menuItems.map((item, index) => (
<a href="#" className={`text-xs ${menuItemsColor}`} key={index}>
<a href="#" className="text-xs text-[#132F52]" key={index}>
{item}
</a>
))}
@ -132,9 +114,6 @@ const HeaderDesign1 = ({
export default HeaderDesign1;
HeaderDesign1.defaultProps = {
productCategoryTextColor: "text-productPrice",
menuItemsColor: "text-productPrice",
border: "border",
topHeader: true,
bottomHeader: true,
@ -147,8 +126,8 @@ HeaderDesign1.defaultProps = {
"وبلاگ",
],
category: true,
searchBox: true,
category: false,
searchBox: false,
// icons
loginBtn: true,
loginBtn: false,
};

@ -0,0 +1,4 @@
<svg id="arrow-down" xmlns="http://www.w3.org/2000/svg" width="18.5" height="18.5" viewBox="0 0 18.5 18.5">
<path id="Vector" d="M9.958,0H.832A.83.83,0,0,0,.246,1.418L4.239,5.411a1.642,1.642,0,0,0,2.32,0L8.077,3.893l2.474-2.474A.834.834,0,0,0,9.958,0Z" transform="translate(3.855 6.305)" fill="#c8def9"/>
<path id="Vector-2" data-name="Vector" d="M0,0H18.5V18.5H0Z" transform="translate(18.5 18.5) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 448 B

@ -0,0 +1,140 @@
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 profilePic from "./profile-pic.svg";
import downwardArrow from "./arrow-down.svg";
import search from "./search-normal.svg";
import Switch from "../../Switch";
const HeaderDesign2 = ({ username, userJob }) => {
return (
<header
className={`mx-auto py-3 px-4 rounded-b-md w-full shadow-sm bg-white`}
>
{/* {headerDivider && (
<div className="border-b border-lightGrayBorderColor mb-5"></div>
)} */}
<div className="flex justify-between items-center relative">
<div className="flex w-1/5">
<span className={`text-sm font-sansbold ml-4 pt-1 text-productPrice`}>
دانوین
</span>
</div>
<div className="flex items-center relative justify-self-start flex-1">
<div className="hidden lg:flex items-start justify-start flex-1 ">
<a href="#" className={`text-xs text-productPrice mx-3`}>
محصولات
</a>
<a href="#" className={`text-xs text-productPrice mx-3`}>
دسته بندی
</a>
<a href="#" className={`text-xs text-productPrice mx-3`}>
تماس با ما
</a>
<a href="#" className={`text-xs text-productPrice mx-3`}>
درباره ما
</a>
<a href="#" className={`text-xs text-productPrice mx-3`}>
پیگیری
</a>
<a href="#" className={`text-xs text-productPrice mx-3`}>
وبلاگ
</a>
</div>
</div>
<div className="flex justify-end items-center ">
<div className="ml-4">
<Switch />
</div>
<div className="flex flex-row-reverse items-center relative w-60 ml-3">
<img
src={search}
alt=""
className="w-5 h-5 absolute left-3 cursor-pointer"
/>
<input
type="text"
placeholder="جستجو در پنل کاربری..."
className="text-xs rounded pr-4 pl-10 py-2 w-full border border-blue-300 focus:outline-none placeholder:text-blue-300"
/>
</div>
{/* <div class="flex justify- ">
<div class="form-check form-switch">
<input
class="form-check-input appearance-none w-9 -ml-10 rounded-full float-left h-5 align-top bg-white bg-no-repeat bg-contain bg-gray-300 focus:outline-none cursor-pointer shadow-sm"
type="checkbox"
role="switch"
id="flexSwitchCheckChecked"
checked
/>
</div>
</div> */}
{/* <p className={`text-xs ml-2 text-product>Price`}>
140,000
<span className={`text-xs font-light text-productPrice`}>
تومان
</span>
</p> */}
{/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */}
{/* <img src={searchIcon} alt="" className="w-7 h-5 ml-2" /> */}
<img src={cartIcon} alt="" className="w-7 h-5 ml-2" />
{/* <img src={profileIcon} alt="" className="w-5 h-5" /> */}
{/* <button
className={`ml-2 text-xs font-light border rounded-md py-2 px-8 bg-white border-darkCrimsonBorderColor text-productPrice`}
>
ورود
</button> */}
<div className="flex flex-row items-center">
<div className=" flex-col flex-1 mr-3">
<p className="text-blue-900 text-sm">{username}</p>
<p className="text-blue-700 text-xs">{userJob}</p>
</div>
<img
src="images/arrow-down.svg"
alt="arrow"
className="w-4 cursor-pointer"
/>
<img
src="images/profile-pic.svg"
alt="profile-pic"
className="w-10 rounded-full"
/>
</div>
</div>
</div>
</header>
);
};
export default HeaderDesign2;
HeaderDesign2.defaultProps = {
username: "رستم پهلوان زاده",
userJob: "مدیریت سامانه هوشمند",
headerDivider: true,
topHeader: true,
bottomHeader: true,
menuItems: false,
category: false,
searchBox: true,
// icons
loginBtn: true,
whiteIconCart: false,
darkCrimsonIconCart: false,
whiteIconHamburgerMenu: false,
darkIconHamburgerMenu: true,
iconHolder: true,
iconProfile: false,
iconCart: true,
iconSearch: false,
};

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 102 KiB

@ -0,0 +1,5 @@
<svg id="search-normal" xmlns="http://www.w3.org/2000/svg" width="29.902" height="29.902" viewBox="0 0 29.902 29.902">
<path id="Vector" d="M23.672,11.836A11.836,11.836,0,1,1,11.836,0,11.836,11.836,0,0,1,23.672,11.836Z" transform="translate(2.492 2.492)" fill="none" stroke="#e2eafc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M2.492,2.492,0,0" transform="translate(24.918 24.918)" fill="none" stroke="#e2eafc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H29.9V29.9H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 646 B

@ -1,10 +1,12 @@
import React, { useState } from "react";
import HeaderDesign1 from "./HeaderDesign1";
import HeaderDesign2 from "./HeaderDesign2";
function Navbar() {
const list = {
1: <HeaderDesign1 />,
2: <HeaderDesign2 />,
};
const [type, setType] = useState(1);
return (

Loading…
Cancel
Save