mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update 6 files

Browse Source
master
amir hosein gorji 3 years ago
parent dd379cf355
commit faa21e7af5
9 changed files with 215 additions and 330 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      src/App.js
  2. 273
      src/components/Header/desgin1/HeaderDesign1.js
  3. 4
      src/components/Header/desgin1/arrow-down.svg
  4. 8
      src/components/Header/desgin1/profile-pic.svg
  5. 5
      src/components/Header/desgin1/search-normal.svg
  6. 10
      src/components/ReactTable3/index.js
  7. 16
      src/components/ReactTable4/index.js
  8. 211
      src/components/Sidebar/SidebarDesign2/index.js
  9. 2
      src/components/footer/design1/FooterDesign1.js

16
src/App.js
Unescape View File

@ -42,7 +42,7 @@ import Design1 from "./components/ProductSalesAmount/Design1";
import Design2 from "./components/ProductSalesAmount/Design2"; import Design2 from "./components/ProductSalesAmount/Design2";
import TableDesign1 from "./components/Table/Design1"; import TableDesign1 from "./components/Table/Design1";
import ReactTable2 from "./components/ReactTable2"; import ReactTable2 from "./components/ReactTable2";
// import ReactTable3 from "./components/ReactTable3"; import ReactTable3 from "./components/ReactTable3";
import ReactTable4 from "./components/ReactTable4"; import ReactTable4 from "./components/ReactTable4";
import Switch from "./components/Switch"; import Switch from "./components/Switch";
@ -65,9 +65,8 @@ function App() {
{/* <BlogDesign4 /> */} {/* <BlogDesign4 /> */}
{/* <BlogDesign5 /> */} {/* <BlogDesign5 /> */}
{/* <BlogDesign6 /> */} {/* <BlogDesign6 /> */}
{/* <HeaderDesign1 /> */}
{/* <ContactInfoSection /> */} {/* <ContactInfoSection /> */}
{/* <FooterDesign1 /> */}
{/* <Testttt /> */} {/* <Testttt /> */}
{/* <Design2D /> */} {/* <Design2D /> */}
{/* <Features /> */} {/* <Features /> */}
@ -83,7 +82,7 @@ function App() {
{/* <AdvertisementDesign3 /> */} {/* <AdvertisementDesign3 /> */}
{/* <CourseChapter /> */} {/* <CourseChapter /> */}
{/* <SidebarMenu /> */} {/* <SidebarMenu /> */}
{/* <SidebarDesign2 /> */}
{/* <SimpleBarChart /> */} {/* <SimpleBarChart /> */}
{/* <SpecifiedDomainRadarChart /> */} {/* <SpecifiedDomainRadarChart /> */}
{/* <Design1 /> */} {/* <Design1 /> */}
@ -91,7 +90,14 @@ function App() {
{/* <TableDesign1 /> */} {/* <TableDesign1 /> */}
{/* <ReactTable2 /> */} {/* <ReactTable2 /> */}
{/* <ReactTable3 /> */} {/* <ReactTable3 /> */}
<ReactTable4 /> <HeaderDesign1 />
<div className="flex">
<SidebarDesign2 className="w-1/5" />
<span className="w-4/5 ">
<ReactTable4 />
<FooterDesign1 />
</span>
</div>
</div> </div>
</Provider> </Provider>
); );

273
src/components/Header/desgin1/HeaderDesign1.js
Unescape View File

@ -1,206 +1,105 @@
import React from "react"; import React from "react";
import cartIcon from "../../../assets/icons/dark-crimson-cart-icon.svg"; 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 profileIcon from "../../../assets/icons/dark-crimson-profile-icon.svg";
import searchIcon from "../../../assets/icons/dark-crimson-search-box.svg"; // import searchIcon from "../../../assets/icons/dark-crimson-search-box.svg";
import lightGraySearchIcon from "../../../assets/icons/light-gray-search-box.svg"; // import lightGraySearchIcon from "../../../assets/icons/light-gray-search-box.svg";
import darkCrimsonHamburgerMenu from "../../../assets/icons/dark-crimson-hamburger-menu.svg"; // import darkCrimsonHamburgerMenu from "../../../assets/icons/dark-crimson-hamburger-menu.svg";
import whiteHamburgerMenu from "../../../assets/icons/white-hamburger-menu-icon.svg"; // import whiteHamburgerMenu from "../../../assets/icons/white-hamburger-menu-icon.svg";
import profilePic from "./profile-pic.svg";
const HeaderDesign1 = ({ import downwardArrow from "./arrow-down.svg";
iconHolder, import search from "./search-normal.svg";
loginBtn, import Switch from "../../Switch";
iconProfile,
iconCart, const HeaderDesign1 = ({ username, userJob }) => {
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,
}) => {
return ( return (
<header <header
className={`container mx-auto py-2 px-8 rounded-b-md w-full shadow-sm mb-20 ${headerBgColor}`} className={`mx-auto py-3 px-4 rounded-b-md w-full shadow-sm bg-white`}
> >
{topHeader && ( {/* {headerDivider && (
<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 ${topHeaderItemsColor}`}>
انتخاب کشور
</span>
<span className={`text-xs font-light px-2 ${topHeaderItemsColor}`}>
پیگیری سفارش
</span>
</div>
<div className="divide-x flex flex-row-reverse">
<span className={`text-xs font-light px-2 ${topHeaderItemsColor}`}>
شکایات
</span>
<span className={`text-xs font-light px-2 ${topHeaderItemsColor}`}>
ورود و ثبت نام
</span>
</div>
</div>
)}
{headerDivider && (
<div className="border-b border-lightGrayBorderColor mb-5"></div> <div className="border-b border-lightGrayBorderColor mb-5"></div>
)} )} */}
<div className="flex justify-between items-center relative"> <div className="flex justify-between items-center relative">
<div className="ml-10"> <div className="flex w-1/5">
<span className={`text-sm font-bold ml-4 ${siteNameTextColor}`}> <span className={`text-sm font-bold ml-4 pt-1 text-productPrice`}>
Design System دانوین
</span> </span>
{category && (
<span className={`text-sm font-bold ${productCategoryTextColor}`}>
دسته بندی ها
</span>
)}
</div> </div>
{menuItems && (
<div <div className="flex items-center relative justify-self-start flex-1">
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" <div className="hidden lg:flex items-start justify-start flex-1 ">
style={{ maxWidth: 700 }} <a href="#" className={`text-xs text-productPrice mx-3`}>
>
<a href="#" className="text-productPrice text-xs">
محصولات محصولات
</a> </a>
<a href="#" className="text-productPrice text-xs"> <a href="#" className={`text-xs text-productPrice mx-3`}>
دسته بندی دسته بندی
</a> </a>
<a href="#" className="text-productPrice text-xs"> <a href="#" className={`text-xs text-productPrice mx-3`}>
تماس با ما تماس با ما
</a> </a>
<a href="#" className="text-productPrice text-xs"> <a href="#" className={`text-xs text-productPrice mx-3`}>
درباره ما درباره ما
</a> </a>
<a href="#" className="text-productPrice text-xs"> <a href="#" className={`text-xs text-productPrice mx-3`}>
پیگیری پیگیری
</a> </a>
<a href="#" className="text-productPrice text-xs"> <a href="#" className={`text-xs text-productPrice mx-3`}>
وبلاگ وبلاگ
</a> </a>
</div> </div>
)} </div>
{searchBox && (
<div <div className="flex justify-end items-center ">
className="flex flex-1 w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" <Switch />
style={{ maxWidth: 700 }} <div className="flex flex-row-reverse items-center relative w-60 ml-3">
> <img
<div className="flex flex-row-reverse items-center relative w-full"> src={search}
<img alt=""
src={lightGraySearchIcon} className="w-5 h-5 absolute left-3 cursor-pointer"
alt="" />
className="w-4 h-4 absolute left-3" <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 <input
type="text" 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"
placeholder="نام کالا را جستجو کنید..." type="checkbox"
className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor placeholder-gray-400 focus:outline-none" role="switch"
id="flexSwitchCheckChecked"
checked
/> />
</div> </div>
</div> </div> */}
)} {/* <p className={`text-xs ml-2 text-product>Price`}>
{loginBtn && ( 140,000
<div className="flex justify-end mr-7"> <span className={`text-xs font-light text-productPrice`}>
<button تومان
className={`ml-2 text-xs font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${loginBtnBgColor} ${loginBorderColor} ${loginTextColor}`} </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> </button> */}
{/* <img src={verticalLineIcon} alt="" className="" /> */} <div className="flex flex-row items-center">
<button <div className=" flex-col flex-1 mr-3">
className={`ml-2 text-xs font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${registerBtnBgColor} ${loginBorderColor} ${registerTextColor}`} <p className="text-blue-900 text-sm">{username}</p>
> <p className="text-blue-700 text-xs">{userJob}</p>
ثبت نام </div>
</button> <img src={downwardArrow} alt="" className="w-4 cursor-pointer" />
</div> <img src={profilePic} alt="" className="w-10 rounded-full" />
)}
{iconHolder && (
<div className="w-1/5 flex justify-end items-center ">
<p className={`text-xs ml-2 ${priceHolder}`}>
140,000
<span className={`text-xs font-light ${tomanColor}`}>تومان</span>
</p>
{iconCart && <img src={cartIcon} alt="" className="w-5 h-5 ml-2" />}
{whiteIconCart && (
<img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" />
)}
{iconSearch && (
<img src={searchIcon} alt="" className="w-5 h-5 ml-2" />
)}
{iconProfile && (
<img src={profileIcon} alt="" className="w-5 h-5" />
)}
</div>
)}
</div>
{headerDivider && (
<div className="border-b border-lightGrayBorderColor mt-5"></div>
)}
{bottomHeader && (
<div className="flex items-center mt-4 relative w-full ">
<div className="ml-10 flex items-center">
{darkIconHamburgerMenu && (
<img src={darkCrimsonHamburgerMenu} alt="" className="w-5 h-5" />
)}
{whiteIconHamburgerMenu && (
<img src={whiteHamburgerMenu} alt="" className="w-3 h-3" />
)}
<span className={`text-xs mr-2 ${productCategoryTextColor}`}>
دسته بندی کالاها
</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 }}
>
<a href="#" className={`text-xs ${menuItemsColor}`}>
محصولات
</a>
<a href="#" className={`text-xs ${menuItemsColor}`}>
دسته بندی
</a>
<a href="#" className={`text-xs ${menuItemsColor}`}>
تماس با ما
</a>
<a href="#" className={`text-xs ${menuItemsColor}`}>
درباره ما
</a>
<a href="#" className={`text-xs ${menuItemsColor}`}>
پیگیری
</a>
<a href="#" className={`text-xs ${menuItemsColor}`}>
وبلاگ
</a>
</div> </div>
</div> </div>
)} </div>
</header> </header>
); );
}; };
@ -220,33 +119,9 @@ export default HeaderDesign1;
// border-darkCrimsonBorderColor // border-darkCrimsonBorderColor
HeaderDesign1.defaultProps = { HeaderDesign1.defaultProps = {
headerBgColor: "bg-white", username: "رستم پهلوان زاده",
userJob: "مدیریت سامانه هوشمند",
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",
headerDivider: true, headerDivider: true,
headerDividerColor: "border-lightGrayBorderColor",
topHeader: true, topHeader: true,
bottomHeader: true, bottomHeader: true,
@ -256,7 +131,7 @@ HeaderDesign1.defaultProps = {
searchBox: true, searchBox: true,
// icons // icons
loginBtn: false, loginBtn: true,
whiteIconCart: false, whiteIconCart: false,
darkCrimsonIconCart: false, darkCrimsonIconCart: false,

4
src/components/Header/desgin1/arrow-down.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 448 B

8
src/components/Header/desgin1/profile-pic.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

5
src/components/Header/desgin1/search-normal.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 646 B

10
src/components/ReactTable3/index.js
Unescape View File

@ -1,13 +1,10 @@
import React, { useRef } from "react"; import React from "react";
import BasicTable from "./BasicTable"; import BasicTable from "./BasicTable";
// import useDraggableScroll from "use-draggable-scroll"; // import useDraggableScroll from "use-draggable-scroll";
const ReactTable3 = ({ breadCrumbs, subTitle, title }) => { const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
return ( return (
<div className="my-10 w-11/12 mx-auto"> <div className="my-10 w-11/12 mx-auto">
<h1 className="text-9xl bg-pink-600 text-whtite rounded shadow-sm p-4 text-center text-white">
search box pop up CLICK ON THE SEARCH ICON AND SEE THE RESULT
</h1>
{/* breadCrumb */} {/* breadCrumb */}
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
{breadCrumbs.map((breadCrumb, index) => ( {breadCrumbs.map((breadCrumb, index) => (
@ -51,10 +48,7 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
}; };
window.isDown = false; window.isDown = false;
export default ReactTable3; export default ReactTable3;
function Tabbar({}) { function Tabbar() {
const ref = useRef(null);
// const { onMouseDown } = useDraggableScroll(ref);
const tabs = [ const tabs = [
"تست۱", "تست۱",
"تست۱", "تست۱",

16
src/components/ReactTable4/index.js
Unescape View File

@ -2,9 +2,9 @@ import React, { useRef } from "react";
import BasicTable from "./BasicTable"; import BasicTable from "./BasicTable";
// import useDraggableScroll from "use-draggable-scroll"; // import useDraggableScroll from "use-draggable-scroll";
const ReactTable3 = ({ breadCrumbs, subTitle, title }) => { const ReactTable4 = ({ breadCrumbs, subTitle, title, className }) => {
return ( return (
<div className="my-10 w-11/12 mx-auto"> <div className={`${className} my-10 px-10 mx-auto`}>
{/* breadCrumb */} {/* breadCrumb */}
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
@ -39,19 +39,17 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
{/* page Title */} {/* page Title */}
<div className="flex flex-row items-center mt-4"> <div className="flex flex-row items-center mt-4">
<div className="w-1 h-5 bg-gray-400 rounded ml-1"></div> <div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
<h2 className="text-sm">{subTitle}</h2> <h2 className="text-xs">{subTitle}</h2>
</div> </div>
</div> </div>
{/* <Tabbar /> */} <Tabbar />
<BasicTable /> <BasicTable />
</div> </div>
); );
}; };
window.isDown = false; window.isDown = false;
export default ReactTable3; export default ReactTable4;
function Tabbar({}) { function Tabbar() {
const ref = useRef(null);
// const { onMouseDown } = useDraggableScroll(ref); // const { onMouseDown } = useDraggableScroll(ref);
const tabs = [ const tabs = [
"تست۱", "تست۱",
@ -133,7 +131,7 @@ function Tabbar({}) {
); );
} }
ReactTable3.defaultProps = { ReactTable4.defaultProps = {
breadCrumbs: [ breadCrumbs: [
{ {
name: "صفحه اصلی", name: "صفحه اصلی",

211
src/components/Sidebar/SidebarDesign2/index.js
Unescape View File

@ -17,26 +17,24 @@ import notification from "./notification.svg";
import Switch from "../../Switch"; import Switch from "../../Switch";
const SidebarMenu = ({ items, buttons, username, userJob }) => { const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
const [activeDropdown, setActiveDropdown] = useState(null); const [activeDropdown, setActiveDropdown] = useState(null);
return ( return (
<section> <div
<div className={`${className} bg-white p-5 shadow-sm border border-gray-300 overflow-y-scroll no-scrollbar relative`}
style={{ width: "20%" }} >
className="mr-10 bg-white p-5 h-screen shadow-sm border border-gray-300 overflow-y-scroll no-scrollbar relative" {/* profile */}
> {/* <div className="flex flex-row items-center">
{/* profile */}
<div className="flex flex-row items-center">
<img src={profilePic} alt="" className="w-12 rounded-full" /> <img src={profilePic} alt="" className="w-12 rounded-full" />
<div className="flex flex-col flex-1 mr-3"> <div className="flex flex-col flex-1 mr-3">
<p className="text-blue-900 text-sm">{username}</p> <p className="text-blue-900 text-sm">{username}</p>
<p className="text-blue-700 text-xs">{userJob}</p> <p className="text-blue-700 text-xs">{userJob}</p>
</div> </div>
<img src={downwardArrow} alt="" className="w-5 cursor-pointer" /> <img src={downwardArrow} alt="" className="w-5 cursor-pointer" />
</div> </div> */}
{/* search box */} {/* search box */}
<div className="flex flex-row-reverse items-center relative w-full my-6"> {/* <div className="flex flex-row-reverse items-center relative w-full my-6">
<img <img
src={search} src={search}
alt="" alt=""
@ -47,112 +45,109 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
placeholder="جستجو در منو کاربری..." placeholder="جستجو در منو کاربری..."
className="text-xs rounded pr-4 pl-10 py-2 w-full border border-blue-300 focus:outline-none placeholder:text-blue-300" 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> */}
{/* items */} {/* items */}
{items.map((item, i) => ( {items.map((item, i) => (
<div className="flex flex-col item-center" key={i}> <div className="flex flex-col item-center" key={i}>
<p className="text-xs text-blue-800 my-2">{item.title}</p> <p className="text-xs text-blue-800 my-2">{item.title}</p>
{/* menu items */} {/* menu items */}
{item.menuItems.map((menuItem, index) => ( {item.menuItems.map((menuItem, index) => (
<div className="flex flex-col justify-center"> <div className="flex flex-col justify-center">
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
{/* right active border */} {/* right active border */}
<div <div
style={{}} style={{}}
className={`absolute right-0 w-1 h-8 rounded transition duration-300 ease-linear ${ className={`absolute right-0 w-1 h-8 rounded transition duration-300 ease-linear ${
activeDropdown === menuItem ? "bg-blue-600" : "" activeDropdown === menuItem ? "bg-blue-600" : ""
}`} }`}
></div> ></div>
{/* left content */} {/* left content */}
<div <div
key={index} key={index}
className={`flex flex-row flex-1 items-center cursor-pointer hover:bg-blue-100 rounded-md p-2 transition duration-300 className={`flex flex-row flex-1 items-center cursor-pointer hover:bg-blue-100 rounded-md p-2 transition duration-300
${activeDropdown === menuItem ? "bg-blue-100" : ""} ${activeDropdown === menuItem ? "bg-blue-100" : ""}
`} `}
onClick={() => onClick={() =>
setActiveDropdown( setActiveDropdown(
activeDropdown === menuItem ? null : menuItem activeDropdown === menuItem ? null : menuItem
) )
} }
>
<img src={menuItem.icon} alt="" className="w-7 h-7" />
<p className="text-blue-800 text-sm flex-1 mx-2">
{menuItem.title}
</p>
{menuItem.notification && (
<div
className={`w-7 h-7 text-center flex flex-col items-center justify-center border-2 ${menuItem.borderRadius} ${menuItem.backgroundColor} ${menuItem.borderColor}`}
>
<span className=" text-blue-400 text-xs">
{menuItem.notification}
</span>
</div>
)}
{menuItem.leftIcon && (
<img
src={menuItem.leftIcon}
alt=""
className={`${
activeDropdown === menuItem ? "rotate-60" : "rotate-90"
} `}
/>
)}
</div>
</div>
{/* menuSubItems */}
{activeDropdown === menuItem &&
menuItem.menuSubItems.map((menuSubItem, j) => (
<div
key={j}
className="flex flex-row items-center w-10/12 transition duration-300 ease-linear"
style={{
transform: "translate(-8%,-10px)",
}}
> >
<img src={menuItem.icon} alt="" className="w-7 h-7" /> <div
<p className="text-blue-800 text-sm flex-1 mx-2"> className=" transition duration-300 ease-linear"
{menuItem.title} style={{
</p> borderRight: "1px solid gray",
{menuItem.notification && ( color: "gray",
<div }}
className={`w-7 h-7 text-center flex flex-col items-center justify-center border-2 ${menuItem.borderRadius} ${menuItem.backgroundColor} ${menuItem.borderColor}`} >
> -
<span className=" text-blue-400 text-xs"> </div>
{menuItem.notification} <div
</span> className="flex flex-row items-center justify-between flex-1 hover:bg-indigo-300 p-1 rounded cursor-pointer transition duration-300 ease-linear"
</div> onClick={() => setActiveDropdown(menuSubItem)}
)} >
{menuItem.leftIcon && ( <p className="text-xs transition duration-300">
{menuSubItem.title}
</p>
<img <img
src={menuItem.leftIcon} src={menuSubItem.leftIcon}
alt="" alt=""
className={`${ className={`w-4 cursor-pointer transition duration-300 ${
activeDropdown === menuItem activeDropdown === menuSubItem
? "rotate-60" ? "rotate-60"
: "rotate-90" : "rotate-90"
} `} }`}
/> />
)}
</div>
</div>
{/* menuSubItems */}
{activeDropdown === menuItem &&
menuItem.menuSubItems.map((menuSubItem, j) => (
<div
key={j}
className="flex flex-row items-center w-10/12 transition duration-300 ease-linear"
style={{
transform: "translate(-8%,-10px)",
}}
>
<div
className=" transition duration-300 ease-linear"
style={{
borderRight: "1px solid gray",
color: "gray",
}}
>
-
</div>
<div
className="flex flex-row items-center justify-between flex-1 hover:bg-indigo-300 p-1 rounded cursor-pointer transition duration-300 ease-linear"
onClick={() => setActiveDropdown(menuSubItem)}
>
<p className="text-xs transition duration-300">
{menuSubItem.title}
</p>
<img
src={menuSubItem.leftIcon}
alt=""
className={`w-4 cursor-pointer transition duration-300 ${
activeDropdown === menuSubItem
? "rotate-60"
: "rotate-90"
}`}
/>
</div>
</div> </div>
))} </div>
</div> ))}
))} </div>
{Number(i) !== items.length - 1 && ( ))}
<div className="border border-gray-100 my-2"></div> {Number(i) !== items.length - 1 && (
)} <div className="border border-gray-100 my-2"></div>
</div> )}
))} </div>
{/* blue left border */} ))}
<div {/* blue left border */}
style={{ bottom: "15%" }} <div
className="absolute left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded" style={{ bottom: "15%" }}
></div> className="absolute left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"
</div> ></div>
</section> </div>
); );
}; };

2
src/components/footer/design1/FooterDesign1.js
Unescape View File

@ -9,7 +9,7 @@ import lightBlueLine from "../../../assets/icons/light-blue-line.svg";
const FooterDesign1 = ({ footerItems, array }) => { const FooterDesign1 = ({ footerItems, array }) => {
return ( return (
<footer className="p-6 flex flex-col md:flex-row justify-around items-start md:items-start relative"> <footer className="p-6 flex flex-col md:flex-row justify-around items-start md:items-start relative bg-white">
<div className="flex items-start"> <div className="flex items-start">
{array.map((item, index) => ( {array.map((item, index) => (
<ul className="mr-10" key={index}> <ul className="mr-10" key={index}>

Write Preview
Loading…
Cancel
Save