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

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

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

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

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

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

Loading…
Cancel
Save