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 0000000..81d586c Binary files /dev/null and b/public/images/search1.png differ 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",