diff --git a/src/Views/Home/Main/index.js b/src/Views/Home/Main/index.js index dc66e46..6faca8d 100644 --- a/src/Views/Home/Main/index.js +++ b/src/Views/Home/Main/index.js @@ -7,9 +7,12 @@ function Main({ activeComponent }) {
-

+

{activeComponent?.content?.name}

+ + {activeComponent?.name && `Designed by: ${activeComponent?.author}`} + {activeComponent?.content?.component} {activeComponent?.content?.code && ( diff --git a/src/Views/Home/Sidebar/index.js b/src/Views/Home/Sidebar/index.js index 45432fb..e9359f4 100644 --- a/src/Views/Home/Sidebar/index.js +++ b/src/Views/Home/Sidebar/index.js @@ -12,7 +12,7 @@ function Sidebar({ list, setActive }) { className="w-full" /> -
    +
      {list.map((material, index) => (
    • + + + + + + diff --git a/src/components/Navbar/dark-crimson-hamburger-menu.svg b/src/components/Navbar/dark-crimson-hamburger-menu.svg new file mode 100644 index 0000000..8d6c858 --- /dev/null +++ b/src/components/Navbar/dark-crimson-hamburger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Navbar/dark-crimson-profile-icon.svg b/src/components/Navbar/dark-crimson-profile-icon.svg new file mode 100644 index 0000000..3879312 --- /dev/null +++ b/src/components/Navbar/dark-crimson-profile-icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Navbar/dark-crimson-search-box.svg b/src/components/Navbar/dark-crimson-search-box.svg new file mode 100644 index 0000000..ab021fe --- /dev/null +++ b/src/components/Navbar/dark-crimson-search-box.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js new file mode 100644 index 0000000..283aacf --- /dev/null +++ b/src/components/Navbar/index.js @@ -0,0 +1,143 @@ +import React from "react"; + +import Search from "../Search"; + +import cartIcon from "./dark-crimson-cart-icon.svg"; +import whiteCartIcon from "./white-cart-icon.svg"; +import profileIcon from "./dark-crimson-profile-icon.svg"; +import searchIcon from "./dark-crimson-search-box.svg"; +import lightGraySearchIcon from "./light-gray-search-box.svg"; +import darkCrimsonHamburgerMenu from "./dark-crimson-hamburger-menu.svg"; +import whiteHamburgerMenu from "./white-hamburger-menu-icon.svg"; + +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/light-gray-search-box.svg b/src/components/Navbar/light-gray-search-box.svg new file mode 100644 index 0000000..85194ac --- /dev/null +++ b/src/components/Navbar/light-gray-search-box.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Navbar/white-cart-icon.svg b/src/components/Navbar/white-cart-icon.svg new file mode 100644 index 0000000..4e94683 --- /dev/null +++ b/src/components/Navbar/white-cart-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Navbar/white-hamburger-menu-icon.svg b/src/components/Navbar/white-hamburger-menu-icon.svg new file mode 100644 index 0000000..9206922 --- /dev/null +++ b/src/components/Navbar/white-hamburger-menu-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/SidebarCategoryHover/list.js b/src/components/SidebarCategoryHover/list.js index 21077ee..df435fb 100644 --- a/src/components/SidebarCategoryHover/list.js +++ b/src/components/SidebarCategoryHover/list.js @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react"; import _, { set } from "lodash"; -import Col from "./Col"; +import Col from "./col"; export default function List({ activeItem, item, setActiveItem, colLength }) { const [cols, setCols] = useState(null); diff --git a/src/redux/data.js b/src/redux/data.js index 3e3263d..e32c647 100644 --- a/src/redux/data.js +++ b/src/redux/data.js @@ -20,11 +20,12 @@ import Chart from "../components/Recharts"; import CircularProgressbar from "../components/CircularProgressbar"; import Stepper from "../components/Stepper"; import Product from "../components/Product"; +import Navbar from "../components/Navbar"; import Calender from '../components/Calender'; - const components = [ { name : "Button", + author : 'Andalib', props : [ ], @@ -36,6 +37,7 @@ const components = [ }, { name : "Tag", + author : 'Andalib', props : [ ], @@ -47,6 +49,7 @@ const components = [ }, { name: "Input", + author : "Ashrafi", props: [ { name: "maxLength", @@ -255,6 +258,7 @@ const components = [ }, { name: "Search", + author: "Ashrafi", props: [], content: { name: "Search", @@ -264,6 +268,7 @@ const components = [ }, { name: "Search with suggestion", + author : "Ashrafi", props: [], content: { name: "Search with suggestion", @@ -273,6 +278,7 @@ const components = [ }, { name : "Radio", + author : "Ashrafi", props : [ ], @@ -284,6 +290,7 @@ const components = [ }, { name : "Checkbox", + author: "Ashrafi", props : [ ], @@ -295,6 +302,7 @@ const components = [ }, { name : "Select box - Radio", + author: "Ashrafi", props : [ ], @@ -306,6 +314,7 @@ const components = [ }, { name : "Select box - Checkbox", + author: "Ashrafi", props : [ ], @@ -317,6 +326,7 @@ const components = [ }, { name : "Switch", + author: "Ashrafi", props : [ ], @@ -328,6 +338,7 @@ const components = [ }, { name : "Expandable products filter", + author: "Ashrafi", props : [ ], @@ -339,6 +350,7 @@ const components = [ }, { name : "Sidebar catergory", + author: "Ashrafi", props : [ ], @@ -350,6 +362,7 @@ const components = [ }, { name : "Slider", + author: "Ashrafi", props : [ ], @@ -361,6 +374,7 @@ const components = [ }, { name : "Range", + author: "Ashrafi", props : [ ], @@ -372,6 +386,7 @@ const components = [ }, { name : "Counter", + author: "Andalib", props : [ ], @@ -383,6 +398,7 @@ const components = [ }, { name : "Alert", + author: "Andalib", props : [ ], @@ -394,6 +410,7 @@ const components = [ }, { name : "Toast", + author: "Andalib", props : [ ], @@ -405,6 +422,7 @@ const components = [ }, { name : "Star rating", + author: "Ashrafi", props : [ ], @@ -416,6 +434,7 @@ const components = [ }, { name : "Chart", + author: "Ashrafi", props : [ ], @@ -427,6 +446,7 @@ const components = [ }, { name : "Circular progressbar", + author: "Ashrafi", props : [ ], @@ -438,6 +458,7 @@ const components = [ }, { name : "Stepper", + author: "Ashrafi", props : [ ], @@ -449,6 +470,7 @@ const components = [ }, { name : "Product", + author: "Andalib", props : [ ], @@ -469,6 +491,18 @@ const components = [ code : null, } }, + { + name : "Navbar", + author: "Andalib", + props : [ + + ], + content : { + name : "Navbar", + component : , + code : null, + } + }, ]; export default components;