slide added

master
mahdi andalib 3 years ago
parent c87ab6c529
commit a2c2404ba4
  1. 2
      src/App.js
  2. 164
      src/components/Digikala/Offer.js
  3. 11
      src/components/Digikala/index.scss
  4. 2
      src/components/ReactTable4/index.js

@ -53,7 +53,7 @@ function App() {
return ( return (
<Provider store={store}> <Provider store={store}>
<div className="App"> <div className="App">
<ProductDesign /> {/* <ProductDesign /> */}
{/* <VodProductDesign /> */} {/* <VodProductDesign /> */}
{/* <VodProduct /> */} {/* <VodProduct /> */}
{/* <VodProductNew /> */} {/* <VodProductNew /> */}

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import "./index";
import leftArrow from "./white-left-arrow.svg"; import leftArrow from "./white-left-arrow.svg";
import General from "./General.png"; import General from "./General.png";
@ -17,7 +18,7 @@ const Offer = ({ products }) => {
> >
<div className="flex flex-row items-center p-2"> <div className="flex flex-row items-center p-2">
{/* right */} {/* right */}
<div className="flex flex-col items-center justify-between bg-blue-400 w-2/12"> <div className="flex flex-col items-center justify-between w-2/12">
<span className="text-base text-center text-white font-bold leading-8"> <span className="text-base text-center text-white font-bold leading-8">
پیـــــشنهاد پیـــــشنهاد
<br /> <br />
@ -32,9 +33,39 @@ const Offer = ({ products }) => {
</button> </button>
</div> </div>
{/* left */} {/* left */}
<div className="flex-1 w-10/12 flex flex-row items-center rounded-lg bg-white"> {/* no-scrollbar */}
<div
className="tabbar overflow-x-scroll scrolling-touch w-10/12 flex flex-row items-center rounded-lg bg-white"
onMouseDown={(e) => {
const slider = window.document.querySelector(".tabbar");
window.isDown = true;
window.startX = e.pageX - slider.offsetLeft;
window.scrollLeft = slider.scrollLeft;
}}
onMouseLeave={(e) => {
window.isDown = false;
}}
onMouseUp={(e) => {
window.isDown = false;
}}
onMouseMove={(e) => {
const slider = window.document.querySelector(".tabbar");
if (!window.isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - window.startX) * 1;
slider.scrollLeft = window.scrollLeft - walk;
}}
>
{products.map((product, index) => ( {products.map((product, index) => (
<div className="flex flex-col p-2"> <div
className="flex flex-col p-2"
aria-current="page"
onClick={(e) => {
if (window.isDown) return e.preventDefault();
///do here
}}
>
<img src={product.image} className="rounded w-40" /> <img src={product.image} className="rounded w-40" />
<div className="flex flex-row justify-between items-center mt-4"> <div className="flex flex-row justify-between items-center mt-4">
{/* right */} {/* right */}
@ -55,8 +86,17 @@ const Offer = ({ products }) => {
className="text-left text-xs line-through my-2 ml-3" className="text-left text-xs line-through my-2 ml-3"
style={{ color: "#c0c2c5" }} style={{ color: "#c0c2c5" }}
> >
559000 {product.discountPrice}
</p> </p>
<div className="bg-gray-200 h-1.5 mx-auto rounded mt-2 flex flex-row-reverse w-10/12">
<div
className={`h-1.5 rounded duration-500`}
style={{
width: product.rangeWidth,
backgroundColor: "#ef3a4f",
}}
></div>
</div>
</div> </div>
))} ))}
</div> </div>
@ -69,9 +109,117 @@ export default Offer;
Offer.defaultProps = { Offer.defaultProps = {
products: [ products: [
{ image: o2, price: 20900000, discount: 7, rangeWidht: 33 }, {
{ image: o3, price: 11000000, discount: 2, rangeWidht: 75 }, image: o2,
{ image: r1, price: 3205000, discount: 70, rangeWidht: 72 }, price: 20900000,
{ image: r2, price: 30000, discount: 75, rangeWidht: 96 }, discount: 7,
rangeWidth: "33%",
discountPrice: 75000,
},
{
image: o3,
price: 11000000,
discount: 2,
rangeWidth: "75%",
discountPrice: 75000,
},
{
image: r1,
price: 3205000,
discount: 70,
rangeWidth: "72%",
discountPrice: 75000,
},
{
image: r2,
price: 30000,
discount: 75,
rangeWidth: "44%",
discountPrice: 75000,
},
{
image: o2,
price: 20900000,
discount: 7,
rangeWidth: "33%",
discountPrice: 75000,
},
{
image: o3,
price: 11000000,
discount: 2,
rangeWidth: "75%",
discountPrice: 75000,
},
{
image: r1,
price: 3205000,
discount: 70,
rangeWidth: "72%",
discountPrice: 75000,
},
{
image: r2,
price: 30000,
discount: 75,
rangeWidth: "44%",
discountPrice: 75000,
},
{
image: o2,
price: 20900000,
discount: 7,
rangeWidth: "33%",
discountPrice: 75000,
},
{
image: o3,
price: 11000000,
discount: 2,
rangeWidth: "75%",
discountPrice: 75000,
},
{
image: r1,
price: 3205000,
discount: 70,
rangeWidth: "72%",
discountPrice: 75000,
},
{
image: r2,
price: 30000,
discount: 75,
rangeWidth: "44%",
discountPrice: 75000,
},
{
image: o2,
price: 20900000,
discount: 7,
rangeWidth: "33%",
discountPrice: 75000,
},
{
image: o3,
price: 11000000,
discount: 2,
rangeWidth: "75%",
discountPrice: 75000,
},
{
image: r1,
price: 3205000,
discount: 70,
rangeWidth: "72%",
discountPrice: 75000,
},
{
image: r2,
price: 30000,
discount: 75,
rangeWidth: "44%",
discountPrice: 75000,
},
], ],
}; };

@ -0,0 +1,11 @@
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.tabbar {
cursor: pointer;
}
.active2,
.active2 li a {
cursor: move !important;
}

@ -42,7 +42,7 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
<h2 className="text-sm">{subTitle}</h2> <h2 className="text-sm">{subTitle}</h2>
</div> </div>
</div> </div>
{/* <Tabbar /> */} <Tabbar />
<BasicTable /> <BasicTable />
</div> </div>
); );

Loading…
Cancel
Save