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

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

259
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 && (
<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,

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

19
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
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>
); );
}; };

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