From faa21e7af52b6c7e217c790b6d7f04d0d3846c96 Mon Sep 17 00:00:00 2001 From: amir hosein gorji Date: Sun, 20 Feb 2022 09:56:09 +0330 Subject: [PATCH] update 6 files --- src/App.js | 16 +- .../Header/desgin1/HeaderDesign1.js | 273 +++++------------- src/components/Header/desgin1/arrow-down.svg | 4 + src/components/Header/desgin1/profile-pic.svg | 8 + .../Header/desgin1/search-normal.svg | 5 + src/components/ReactTable3/index.js | 10 +- src/components/ReactTable4/index.js | 16 +- .../Sidebar/SidebarDesign2/index.js | 211 +++++++------- .../footer/design1/FooterDesign1.js | 2 +- 9 files changed, 215 insertions(+), 330 deletions(-) create mode 100644 src/components/Header/desgin1/arrow-down.svg create mode 100644 src/components/Header/desgin1/profile-pic.svg create mode 100644 src/components/Header/desgin1/search-normal.svg diff --git a/src/App.js b/src/App.js index b4e5b6b..b915079 100644 --- a/src/App.js +++ b/src/App.js @@ -42,7 +42,7 @@ import Design1 from "./components/ProductSalesAmount/Design1"; import Design2 from "./components/ProductSalesAmount/Design2"; import TableDesign1 from "./components/Table/Design1"; import ReactTable2 from "./components/ReactTable2"; -// import ReactTable3 from "./components/ReactTable3"; +import ReactTable3 from "./components/ReactTable3"; import ReactTable4 from "./components/ReactTable4"; import Switch from "./components/Switch"; @@ -65,9 +65,8 @@ function App() { {/* */} {/* */} {/* */} - {/* */} + {/* */} - {/* */} {/* */} {/* */} {/* */} @@ -83,7 +82,7 @@ function App() { {/* */} {/* */} {/* */} - {/* */} + {/* */} {/* */} {/* */} @@ -91,7 +90,14 @@ function App() { {/* */} {/* */} {/* */} - + +
+ + + + + +
); diff --git a/src/components/Header/desgin1/HeaderDesign1.js b/src/components/Header/desgin1/HeaderDesign1.js index 0337cf1..44404a4 100644 --- a/src/components/Header/desgin1/HeaderDesign1.js +++ b/src/components/Header/desgin1/HeaderDesign1.js @@ -1,206 +1,105 @@ import React from "react"; import cartIcon from "../../../assets/icons/dark-crimson-cart-icon.svg"; -import whiteCartIcon from "../../../assets/icons/white-cart-icon.svg"; +// import whiteCartIcon from "../../../assets/icons/white-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 whiteHamburgerMenu from "../../../assets/icons/white-hamburger-menu-icon.svg"; - -const HeaderDesign1 = ({ - iconHolder, - loginBtn, - iconProfile, - iconCart, - iconSearch, - border, - btnRounded, - btnPY, - btnPX, - loginBtnBgColor, - loginBorderColor, - registerBtnBgColor, - loginTextColor, - registerTextColor, - menuItems, - category, - searchBox, - topHeader, - bottomHeader, - priceHolder, - tomanColor, - headerBgColor, - siteNameTextColor, - productCategoryTextColor, - menuItemsColor, - topHeaderItemsColor, - whiteIconCart, - whiteIconHamburgerMenu, - darkIconHamburgerMenu, - headerDivider, - headerDividerColor, -}) => { +// 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 whiteHamburgerMenu from "../../../assets/icons/white-hamburger-menu-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 HeaderDesign1 = ({ username, userJob }) => { return (
- {topHeader && ( -
-
- - انتخاب کشور - - - پیگیری سفارش - -
-
- - شکایات - - - ورود و ثبت نام - -
-
- )} - {headerDivider && ( + {/* {headerDivider && (
- )} + )} */}
-
- - Design System +
+ + دانوین - {category && ( - - دسته بندی ها - - )}
- {menuItems && ( -
- + +
+ - )} - {searchBox && ( -
-
- +
+ +
+ +
+ + +
+ {/*
+
-
- )} - {loginBtn && ( -
- - {/* */} - -
- )} - {iconHolder && ( -
-

- 140,000 - تومان -

- {iconCart && } - {whiteIconCart && ( - - )} - {iconSearch && ( - - )} - {iconProfile && ( - - )} -
- )} -
- {headerDivider && ( -
- )} - {bottomHeader && ( -
-
- {darkIconHamburgerMenu && ( - - )} - {whiteIconHamburgerMenu && ( - - )} - - دسته بندی کالاها - -
- - )} +
); }; @@ -220,33 +119,9 @@ export default HeaderDesign1; // border-darkCrimsonBorderColor HeaderDesign1.defaultProps = { - headerBgColor: "bg-white", - - siteNameTextColor: "text-productPrice", - productCategoryTextColor: "text-productPrice", - - menuItemsColor: "text-productPrice", - - topHeaderItemsColor: "text-productPrice", - - border: "border", - btnRounded: "rounded-md", - - loginBorderColor: "border-darkCrimsonBorderColor", - loginBtnBgColor: "bg-white", - loginTextColor: "text-productPrice", - - registerBtnBgColor: "bg-darkCrimsonBgColor", - registerTextColor: "text-white", - - tomanColor: "text-productPrice", - priceHolder: "text-productPrice", - - btnPY: "py-2", - btnPX: "px-8", - + username: "رستم پهلوان زاده", + userJob: "مدیریت سامانه هوشمند", headerDivider: true, - headerDividerColor: "border-lightGrayBorderColor", topHeader: true, bottomHeader: true, @@ -256,7 +131,7 @@ HeaderDesign1.defaultProps = { searchBox: true, // icons - loginBtn: false, + loginBtn: true, whiteIconCart: false, darkCrimsonIconCart: false, diff --git a/src/components/Header/desgin1/arrow-down.svg b/src/components/Header/desgin1/arrow-down.svg new file mode 100644 index 0000000..3247f0c --- /dev/null +++ b/src/components/Header/desgin1/arrow-down.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Header/desgin1/profile-pic.svg b/src/components/Header/desgin1/profile-pic.svg new file mode 100644 index 0000000..0367242 --- /dev/null +++ b/src/components/Header/desgin1/profile-pic.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Header/desgin1/search-normal.svg b/src/components/Header/desgin1/search-normal.svg new file mode 100644 index 0000000..842c907 --- /dev/null +++ b/src/components/Header/desgin1/search-normal.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/ReactTable3/index.js b/src/components/ReactTable3/index.js index 83d6272..6d19c84 100644 --- a/src/components/ReactTable3/index.js +++ b/src/components/ReactTable3/index.js @@ -1,13 +1,10 @@ -import React, { useRef } from "react"; +import React from "react"; import BasicTable from "./BasicTable"; // import useDraggableScroll from "use-draggable-scroll"; const ReactTable3 = ({ breadCrumbs, subTitle, title }) => { return (
-

- search box pop up CLICK ON THE SEARCH ICON AND SEE THE RESULT -

{/* breadCrumb */}
{breadCrumbs.map((breadCrumb, index) => ( @@ -51,10 +48,7 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => { }; window.isDown = false; export default ReactTable3; -function Tabbar({}) { - const ref = useRef(null); - - // const { onMouseDown } = useDraggableScroll(ref); +function Tabbar() { const tabs = [ "تست۱", "تست۱", diff --git a/src/components/ReactTable4/index.js b/src/components/ReactTable4/index.js index b6e5856..a99d842 100644 --- a/src/components/ReactTable4/index.js +++ b/src/components/ReactTable4/index.js @@ -2,9 +2,9 @@ import React, { useRef } from "react"; import BasicTable from "./BasicTable"; // import useDraggableScroll from "use-draggable-scroll"; -const ReactTable3 = ({ breadCrumbs, subTitle, title }) => { +const ReactTable4 = ({ breadCrumbs, subTitle, title, className }) => { return ( -
+
{/* breadCrumb */}
@@ -39,19 +39,17 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => { {/* page Title */}
-

{subTitle}

+

{subTitle}

- {/* */} +
); }; window.isDown = false; -export default ReactTable3; -function Tabbar({}) { - const ref = useRef(null); - +export default ReactTable4; +function Tabbar() { // const { onMouseDown } = useDraggableScroll(ref); const tabs = [ "تست۱", @@ -133,7 +131,7 @@ function Tabbar({}) { ); } -ReactTable3.defaultProps = { +ReactTable4.defaultProps = { breadCrumbs: [ { name: "صفحه اصلی", diff --git a/src/components/Sidebar/SidebarDesign2/index.js b/src/components/Sidebar/SidebarDesign2/index.js index 2451244..829a6e0 100644 --- a/src/components/Sidebar/SidebarDesign2/index.js +++ b/src/components/Sidebar/SidebarDesign2/index.js @@ -17,26 +17,24 @@ import notification from "./notification.svg"; import Switch from "../../Switch"; -const SidebarMenu = ({ items, buttons, username, userJob }) => { +const SidebarMenu = ({ items, buttons, username, userJob, className }) => { const [activeDropdown, setActiveDropdown] = useState(null); return ( -
-
- {/* profile */} -
+
+ {/* profile */} + {/*

{username}

{userJob}

-
- {/* search box */} -
+
*/} + {/* search box */} + {/*
{ placeholder="جستجو در منو کاربری..." className="text-xs rounded pr-4 pl-10 py-2 w-full border border-blue-300 focus:outline-none placeholder:text-blue-300" /> -
- {/* items */} - {items.map((item, i) => ( -
-

{item.title}

- {/* menu items */} - {item.menuItems.map((menuItem, index) => ( -
-
- {/* right active border */} -
- {/* left content */} -
*/} + {/* items */} + {items.map((item, i) => ( +
+

{item.title}

+ {/* menu items */} + {item.menuItems.map((menuItem, index) => ( +
+
+ {/* right active border */} +
+ {/* left content */} +
- setActiveDropdown( - activeDropdown === menuItem ? null : menuItem - ) - } + onClick={() => + setActiveDropdown( + activeDropdown === menuItem ? null : menuItem + ) + } + > + +

+ {menuItem.title} +

+ {menuItem.notification && ( +
+ + {menuItem.notification} + +
+ )} + {menuItem.leftIcon && ( + + )} +
+
+ {/* menuSubItems */} + {activeDropdown === menuItem && + menuItem.menuSubItems.map((menuSubItem, j) => ( +
- -

- {menuItem.title} -

- {menuItem.notification && ( -
- - {menuItem.notification} - -
- )} - {menuItem.leftIcon && ( +
+ - +
+
setActiveDropdown(menuSubItem)} + > +

+ {menuSubItem.title} +

- )} -
-
- {/* menuSubItems */} - {activeDropdown === menuItem && - menuItem.menuSubItems.map((menuSubItem, j) => ( -
-
- - -
-
setActiveDropdown(menuSubItem)} - > -

- {menuSubItem.title} -

- -
- ))} -
- ))} - {Number(i) !== items.length - 1 && ( -
- )} -
- ))} - {/* blue left border */} -
-
-
+
+ ))} +
+ ))} + {Number(i) !== items.length - 1 && ( +
+ )} +
+ ))} + {/* blue left border */} +
+ ); }; diff --git a/src/components/footer/design1/FooterDesign1.js b/src/components/footer/design1/FooterDesign1.js index cade4a7..f3f250d 100644 --- a/src/components/footer/design1/FooterDesign1.js +++ b/src/components/footer/design1/FooterDesign1.js @@ -9,7 +9,7 @@ import lightBlueLine from "../../../assets/icons/light-blue-line.svg"; const FooterDesign1 = ({ footerItems, array }) => { return ( -