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
Split 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 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() {
{/* <BlogDesign4 /> */}
{/* <BlogDesign5 /> */}
{/* <BlogDesign6 /> */}
{/* <HeaderDesign1 /> */}
{/* <ContactInfoSection /> */}
{/* <FooterDesign1 /> */}
{/* <Testttt /> */}
{/* <Design2D /> */}
{/* <Features /> */}
@ -83,7 +82,7 @@ function App() {
{/* <AdvertisementDesign3 /> */}
{/* <CourseChapter /> */}
{/* <SidebarMenu /> */}
{/* <SidebarDesign2 /> */}
{/* <SimpleBarChart /> */}
{/* <SpecifiedDomainRadarChart /> */}
{/* <Design1 /> */}
@ -91,7 +90,14 @@ function App() {
{/* <TableDesign1 /> */}
{/* <ReactTable2 /> */}
{/* <ReactTable3 /> */}
<HeaderDesign1 />
<div className="flex">
<SidebarDesign2 className="w-1/5" />
<span className="w-4/5 ">
<ReactTable4 />
<FooterDesign1 />
</span>
</div>
</div>
</Provider>
);

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

@ -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 (
<header
className={`container mx-auto py-2 px-8 rounded-b-md w-full shadow-sm mb-20 ${headerBgColor}`}
>
{topHeader && (
<div className="flex justify-between items-center mb-2">
<div
className="divide-x flex flex-row-reverse transform translate-x-2"
style={{}}
className={`mx-auto py-3 px-4 rounded-b-md w-full shadow-sm bg-white`}
>
<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 && (
{/* {headerDivider && (
<div className="border-b border-lightGrayBorderColor mb-5"></div>
)}
)} */}
<div className="flex justify-between items-center relative">
<div className="ml-10">
<span className={`text-sm font-bold ml-4 ${siteNameTextColor}`}>
Design System
<div className="flex w-1/5">
<span className={`text-sm font-bold ml-4 pt-1 text-productPrice`}>
دانوین
</span>
{category && (
<span className={`text-sm font-bold ${productCategoryTextColor}`}>
دسته بندی ها
</span>
)}
</div>
{menuItems && (
<div
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"
style={{ maxWidth: 700 }}
>
<a href="#" className="text-productPrice text-xs">
<div className="flex items-center relative justify-self-start flex-1">
<div className="hidden lg:flex items-start justify-start flex-1 ">
<a href="#" className={`text-xs text-productPrice mx-3`}>
محصولات
</a>
<a href="#" className="text-productPrice text-xs">
<a href="#" className={`text-xs text-productPrice mx-3`}>
دسته بندی
</a>
<a href="#" className="text-productPrice text-xs">
<a href="#" className={`text-xs text-productPrice mx-3`}>
تماس با ما
</a>
<a href="#" className="text-productPrice text-xs">
<a href="#" className={`text-xs text-productPrice mx-3`}>
درباره ما
</a>
<a href="#" className="text-productPrice text-xs">
<a href="#" className={`text-xs text-productPrice mx-3`}>
پیگیری
</a>
<a href="#" className="text-productPrice text-xs">
<a href="#" className={`text-xs text-productPrice mx-3`}>
وبلاگ
</a>
</div>
)}
{searchBox && (
<div
className="flex flex-1 w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
style={{ maxWidth: 700 }}
>
<div className="flex flex-row-reverse items-center relative w-full">
</div>
<div className="flex justify-end items-center ">
<Switch />
<div className="flex flex-row-reverse items-center relative w-60 ml-3">
<img
src={lightGraySearchIcon}
src={search}
alt=""
className="w-4 h-4 absolute left-3"
className="w-5 h-5 absolute left-3 cursor-pointer"
/>
<input
type="text"
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"
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
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>
)}
{loginBtn && (
<div className="flex justify-end mr-7">
<button
className={`ml-2 text-xs font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${loginBtnBgColor} ${loginBorderColor} ${loginTextColor}`}
</div> */}
{/* <p className={`text-xs ml-2 text-product>Price`}>
140,000
<span className={`text-xs font-light text-productPrice`}>
تومان
</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>
{/* <img src={verticalLineIcon} alt="" className="" /> */}
<button
className={`ml-2 text-xs font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${registerBtnBgColor} ${loginBorderColor} ${registerTextColor}`}
>
ثبت نام
</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>
)}
</button> */}
<div className="flex flex-row items-center">
<div className=" flex-col flex-1 mr-3">
<p className="text-blue-900 text-sm">{username}</p>
<p className="text-blue-700 text-xs">{userJob}</p>
</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>
<img src={downwardArrow} alt="" className="w-4 cursor-pointer" />
<img src={profilePic} alt="" className="w-10 rounded-full" />
</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>
)}
</header>
);
};
@ -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,

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 useDraggableScroll from "use-draggable-scroll";
const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
return (
<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 */}
<div className="flex flex-row items-center">
{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 = [
"تست۱",
"تست۱",

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

@ -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 (
<div className="my-10 w-11/12 mx-auto">
<div className={`${className} my-10 px-10 mx-auto`}>
{/* breadCrumb */}
<div className="flex flex-row items-center">
@ -39,19 +39,17 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
{/* page Title */}
<div className="flex flex-row items-center mt-4">
<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>
{/* <Tabbar /> */}
<Tabbar />
<BasicTable />
</div>
);
};
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: "صفحه اصلی",

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

@ -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 (
<section>
<div
style={{ width: "20%" }}
className="mr-10 bg-white p-5 h-screen shadow-sm border border-gray-300 overflow-y-scroll no-scrollbar relative"
className={`${className} bg-white p-5 shadow-sm border border-gray-300 overflow-y-scroll no-scrollbar relative`}
>
{/* profile */}
<div className="flex flex-row items-center">
{/* <div className="flex flex-row items-center">
<img src={profilePic} alt="" className="w-12 rounded-full" />
<div className="flex flex-col flex-1 mr-3">
<p className="text-blue-900 text-sm">{username}</p>
<p className="text-blue-700 text-xs">{userJob}</p>
</div>
<img src={downwardArrow} alt="" className="w-5 cursor-pointer" />
</div>
</div> */}
{/* 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
src={search}
alt=""
@ -47,7 +45,7 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
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> */}
{/* items */}
{items.map((item, i) => (
<div className="flex flex-col item-center" key={i}>
@ -93,9 +91,7 @@ const SidebarMenu = ({ items, buttons, username, userJob }) => {
src={menuItem.leftIcon}
alt=""
className={`${
activeDropdown === menuItem
? "rotate-60"
: "rotate-90"
activeDropdown === menuItem ? "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"
></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 }) => {
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">
{array.map((item, index) => (
<ul className="mr-10" key={index}>

Write Preview
Loading…
Cancel
Save