From e2e6869efb4461deb6b00fbb8b073e92eadd4e95 Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Wed, 11 May 2022 13:12:27 +0430 Subject: [PATCH] update data.js --- public/images/dark-crimson-cart-icon.svg | 7 + public/images/dark-crimson-hamburger-menu.svg | 10 ++ public/images/dark-crimson-profile-icon.svg | 8 + public/images/dark-crimson-search-box.svg | 5 + public/images/light-gray-search-box.svg | 7 + public/images/search1.png | Bin 0 -> 857 bytes public/images/white-cart-icon.svg | 7 + public/images/white-hamburger-menu-icon.svg | 9 + src/components/Navbar/HeaderDesign1/index.js | 154 ++++++++++++++++++ src/components/Navbar/index.js | 25 +++ src/components/SearchDesign/Search/index.js | 41 +++++ src/components/SearchDesign/index.js | 25 +++ src/redux/data.js | 22 +++ 13 files changed, 320 insertions(+) create mode 100644 public/images/dark-crimson-cart-icon.svg create mode 100644 public/images/dark-crimson-hamburger-menu.svg create mode 100644 public/images/dark-crimson-profile-icon.svg create mode 100644 public/images/dark-crimson-search-box.svg create mode 100644 public/images/light-gray-search-box.svg create mode 100644 public/images/search1.png create mode 100644 public/images/white-cart-icon.svg create mode 100644 public/images/white-hamburger-menu-icon.svg create mode 100644 src/components/Navbar/HeaderDesign1/index.js create mode 100644 src/components/Navbar/index.js create mode 100644 src/components/SearchDesign/Search/index.js create mode 100644 src/components/SearchDesign/index.js diff --git a/public/images/dark-crimson-cart-icon.svg b/public/images/dark-crimson-cart-icon.svg new file mode 100644 index 0000000..151d5e0 --- /dev/null +++ b/public/images/dark-crimson-cart-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/dark-crimson-hamburger-menu.svg b/public/images/dark-crimson-hamburger-menu.svg new file mode 100644 index 0000000..8d6c858 --- /dev/null +++ b/public/images/dark-crimson-hamburger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/images/dark-crimson-profile-icon.svg b/public/images/dark-crimson-profile-icon.svg new file mode 100644 index 0000000..3879312 --- /dev/null +++ b/public/images/dark-crimson-profile-icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/images/dark-crimson-search-box.svg b/public/images/dark-crimson-search-box.svg new file mode 100644 index 0000000..ab021fe --- /dev/null +++ b/public/images/dark-crimson-search-box.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/light-gray-search-box.svg b/public/images/light-gray-search-box.svg new file mode 100644 index 0000000..85194ac --- /dev/null +++ b/public/images/light-gray-search-box.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/search1.png b/public/images/search1.png new file mode 100644 index 0000000000000000000000000000000000000000..81d586c7fa7862e5d51c832c1c1a94814283778a GIT binary patch literal 857 zcmV-f1E&0mP)(+L_Ts5c;; zpmc)L3DW=bJ>?Wfw(L0WrFZD=9SN57KK*)6eoAt3#4R~uwv$0{v)SyUEpD=2uix`I zNs^WRyz2Xp`F#F5WbwV>1av3Ishr-(Dxj9O6l|&fU-tp+43}jYK!t1~`y*SLq0Y)V zS3jNu4LoB$prj!4q9`8wC>e#5GaLammHm?C0$Fr*Vz6`dCj{8?dyVIBw6($+*mqNF zrb%(KS2N{Ndo8=wRAp?UMmPiesR`(F(`B-lGtGIfJ^-@S0P?x91>ro!E;KUjx(zWn zp4;50b|$-Oo4X0_iv~_@a8&*-P<|f+e9`}Y%PyNTc?Zs7gE$)$V=-V$lxOw(EVw+> zKLp2sQw<q-}kpQEs<|s_P zYxz8l!4aTOp;e3}p|@Kk#@6Ay*;X$RqUX;cK`nC;WhXI0aGX8mApv4@36Qr&D_o`y zg}|ck+nBSy&jnYBA>XM#)>kgqgHLa8HEFvjNB#9pwv#n|x2bP`!I2OYq=eR{{Wl3g zQOOD(>nrH1M4$dr&F$FE5mtYFQD2=2?y`@AA$h`<^-bYj15hmuEvBgw<^@a{&9Q=#2XBI- zpe42^O+K37xOo8<555OTzfzGoNLUJfo&G%6}St{b6;1#6Pz1l7m{4x+3t7VWTp3+Wa7MZ z4Ji2z7qH$9YzMFxoWC;LZg;Au-ZK&iHCIjBRadA9aBsM}gQ4F&z)b;gG;kK%Q{vgh j@lnAIN{FFb*LVD1*@<&E6n{BQ00000NkvXXu0mjfUL%A| literal 0 HcmV?d00001 diff --git a/public/images/white-cart-icon.svg b/public/images/white-cart-icon.svg new file mode 100644 index 0000000..4e94683 --- /dev/null +++ b/public/images/white-cart-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/white-hamburger-menu-icon.svg b/public/images/white-hamburger-menu-icon.svg new file mode 100644 index 0000000..9206922 --- /dev/null +++ b/public/images/white-hamburger-menu-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Navbar/HeaderDesign1/index.js b/src/components/Navbar/HeaderDesign1/index.js new file mode 100644 index 0000000..0360492 --- /dev/null +++ b/src/components/Navbar/HeaderDesign1/index.js @@ -0,0 +1,154 @@ +import React from "react"; + +import Search from "../../SearchDesign/Search"; + +const HeaderDesign1 = ({ + loginBtn, + menuItems, + category, + searchBox, + topHeader, + bottomHeader, + productCategoryTextColor, + menuItemsColor, +}) => { + return ( +
+ <> + {topHeader && ( +
+
+ + انتخاب کشور + + + پیگیری سفارش + +
+
+ + شکایات  + + + ورود و ثبت نام + +
+
+ )} +
+ +
+
+ + Design System + + {category && ( + + دسته بندی ها + + )} +
+
+ {menuItems?.map((item, index) => ( + + {item} + + ))} +
+ {searchBox && ( +
+ +
+ )} + {loginBtn && ( +
+ + +
+ )} +
+ + + +
+
+ {bottomHeader && ( + <> +
+
+
+ + + + دسته بندی کالاها + +
+
+ {menuItems.map((item, index) => ( + + {item} + + ))} +
+
+ + )} +
+ ); +}; + +export default HeaderDesign1; + +HeaderDesign1.defaultProps = { + productCategoryTextColor: "text-productPrice", + menuItemsColor: "text-productPrice", + border: "border", + topHeader: true, + bottomHeader: true, + + menuItems: [ + "محصولات", + "دسته بندی", + "تماس با ما", + "درباره ما", + "پیگیری", + "وبلاگ", + ], + + category: true, + searchBox: true, + // icons + loginBtn: true, +}; diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js new file mode 100644 index 0000000..7bd050c --- /dev/null +++ b/src/components/Navbar/index.js @@ -0,0 +1,25 @@ +import React, { useState } from "react"; + +import HeaderDesign1 from "./HeaderDesign1"; + +function Navbar() { + const list = { + 1: , + }; + const [type, setType] = useState(1); + return ( +
+ + {list[type]} +
+ ); +} + +export default Navbar; diff --git a/src/components/SearchDesign/Search/index.js b/src/components/SearchDesign/Search/index.js new file mode 100644 index 0000000..1e1f2a0 --- /dev/null +++ b/src/components/SearchDesign/Search/index.js @@ -0,0 +1,41 @@ +import React from "react"; +import _ from "lodash"; + +const langDetector = (lang = "fa", option1, option2) => { + return lang === "fa" ? option1 : option2; +}; + +export default function Search(props) { + return ( +
+
+ + + + +
+
+ ); +} diff --git a/src/components/SearchDesign/index.js b/src/components/SearchDesign/index.js new file mode 100644 index 0000000..e51d620 --- /dev/null +++ b/src/components/SearchDesign/index.js @@ -0,0 +1,25 @@ +import React, { useState } from "react"; + +import Search from "./Search"; + +function SearchDesign() { + const list = { + 1: , + }; + const [type, setType] = useState(1); + return ( +
+ + {list[type]} +
+ ); +} + +export default SearchDesign; diff --git a/src/redux/data.js b/src/redux/data.js index 4878387..ede3c20 100644 --- a/src/redux/data.js +++ b/src/redux/data.js @@ -18,6 +18,8 @@ import Features from "../components/Features"; import Feedback from "../components/Feedback"; import FooterDesign from "../components/FooterDesign"; import Input from "../components/Input"; +import Navbar from "../components/Navbar"; +import SearchDesign from "../components/SearchDesign"; // mini components import MiniComponents from "../components/MiniComponents"; @@ -511,6 +513,26 @@ const components = [ }`, }, }, + { + name: "Navbar", + author: "Andalib", + props: [], + content: { + name: "Navbar", + component: , + code: null, + }, + }, + { + name: "Search Design", + author: "Andalib/Ashrafi", + props: [], + content: { + name: "Search Design", + component: , + code: null, + }, + }, // mini components { name: "Mini Components",