update 6 files

master
amir hosein gorji 3 years ago
parent dd379cf355
commit faa21e7af5
  1. 14
      src/App.js
  2. 259
      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. 19
      src/components/Sidebar/SidebarDesign2/index.js
  9. 2
      src/components/footer/design1/FooterDesign1.js

@ -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 /> */}
<HeaderDesign1 />
<div className="flex">
<SidebarDesign2 className="w-1/5" />
<span className="w-4/5 ">
<ReactTable4 /> <ReactTable4 />
<FooterDesign1 />
</span>
</div>
</div> </div>
</Provider> </Provider>
); );

@ -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 && (
<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}`}> {/* {headerDivider && (
انتخاب کشور
</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">
>
<div className="flex flex-row-reverse items-center relative w-full">
<img <img
src={lightGraySearchIcon} src={search}
alt="" alt=""
className="w-4 h-4 absolute left-3" className="w-5 h-5 absolute left-3 cursor-pointer"
/> />
<input <input
type="text" type="text"
placeholder="نام کالا را جستجو کنید..." placeholder="جستجو در پنل کاربری..."
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" 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>
{/* <div class="flex justify- ">
<div class="form-check form-switch">
<input
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"
type="checkbox"
role="switch"
id="flexSwitchCheckChecked"
checked
/>
</div> </div>
)} </div> */}
{loginBtn && ( {/* <p className={`text-xs ml-2 text-product>Price`}>
<div className="flex justify-end mr-7"> 140,000
<button <span className={`text-xs font-light text-productPrice`}>
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>
ثبت نام
</button>
</div>
)}
{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> </div>
{headerDivider && ( <img src={downwardArrow} alt="" className="w-4 cursor-pointer" />
<div className="border-b border-lightGrayBorderColor mt-5"></div> <img src={profilePic} alt="" className="w-10 rounded-full" />
)}
{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>
<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>
)}
</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,

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

After

Width:  |  Height:  |  Size: 448 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 102 KiB

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

After

Width:  |  Height:  |  Size: 646 B

@ -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 = [
"تست۱", "تست۱",
"تست۱", "تست۱",

@ -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: "صفحه اصلی",

@ -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
style={{ width: "20%" }} className={`${className} bg-white p-5 shadow-sm border border-gray-300 overflow-y-scroll no-scrollbar relative`}
className="mr-10 bg-white p-5 h-screen shadow-sm border border-gray-300 overflow-y-scroll no-scrollbar relative"
> >
{/* profile */} {/* profile */}
<div className="flex flex-row items-center"> {/* <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,7 +45,7 @@ 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}>
@ -93,9 +91,7 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
src={menuItem.leftIcon} src={menuItem.leftIcon}
alt="" alt=""
className={`${ className={`${
activeDropdown === menuItem activeDropdown === menuItem ? "rotate-60" : "rotate-90"
? "rotate-60"
: "rotate-90"
} `} } `}
/> />
)} )}
@ -152,7 +148,6 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
className="absolute left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded" className="absolute left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"
></div> ></div>
</div> </div>
</section>
); );
}; };

@ -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}>

Loading…
Cancel
Save