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 (
<Provider store={store}>
<div className="App">
<ProductDesign />
{/* <ProductDesign /> */}
{/* <VodProductDesign /> */}
{/* <VodProduct /> */}
{/* <VodProductNew /> */}

@ -1,4 +1,5 @@
import React from "react";
import "./index";
import leftArrow from "./white-left-arrow.svg";
import General from "./General.png";
@ -17,7 +18,7 @@ const Offer = ({ products }) => {
>
<div className="flex flex-row items-center p-2">
{/* 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">
پیـــــشنهاد
<br />
@ -32,9 +33,39 @@ const Offer = ({ products }) => {
</button>
</div>
{/* 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) => (
<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" />
<div className="flex flex-row justify-between items-center mt-4">
{/* right */}
@ -55,8 +86,17 @@ const Offer = ({ products }) => {
className="text-left text-xs line-through my-2 ml-3"
style={{ color: "#c0c2c5" }}
>
559000
{product.discountPrice}
</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>
@ -69,9 +109,117 @@ export default Offer;
Offer.defaultProps = {
products: [
{ image: o2, price: 20900000, discount: 7, rangeWidht: 33 },
{ image: o3, price: 11000000, discount: 2, rangeWidht: 75 },
{ image: r1, price: 3205000, discount: 70, rangeWidht: 72 },
{ image: r2, price: 30000, discount: 75, rangeWidht: 96 },
{
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,
},
{
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>
</div>
</div>
{/* <Tabbar /> */}
<Tabbar />
<BasicTable />
</div>
);

Loading…
Cancel
Save