@ -1,57 +0,0 @@ |
||||
import React from "react"; |
||||
|
||||
import pic2 from "./pic2.jpg"; |
||||
import danovin from "./danovin.jpg"; |
||||
import greeeeen from "./greeeeen.jpg"; |
||||
|
||||
const Banners = ({ mainBanner, leftBanner, midTopBanner, midBottomBanner }) => { |
||||
return ( |
||||
<div |
||||
className="flex justify-between w-10/12 mx-auto my-10" |
||||
style={{ |
||||
height: "400px", |
||||
}} |
||||
> |
||||
<div |
||||
className={`h-full w-1/2 rounded-xl flex items-center`} |
||||
style={{ |
||||
background: mainBanner ? "" : "rgba(134,160,185,0.16)", |
||||
}} |
||||
> |
||||
<img src={danovin} className="rounded-xl h-full" /> |
||||
</div> |
||||
<div className="flex h-full w-1/2 "> |
||||
<div className="flex flex-col w-1/2 h-full px-6 justify-center items-between"> |
||||
<div |
||||
className={`${midTopBanner ? "" : "h-1/2 "} w-full rounded-xl mb-2`} |
||||
style={{ |
||||
background: midTopBanner ? "" : "rgba(134,160,185,0.16)", |
||||
}} |
||||
> |
||||
<img src={pic2} className="rounded-xl" /> |
||||
</div> |
||||
<div |
||||
className={`${ |
||||
midBottomBanner ? "" : "h-1/2 " |
||||
} w-full rounded-xl mt-2`}
|
||||
style={{ |
||||
background: midBottomBanner ? "" : "rgba(134,160,185,0.16)", |
||||
}} |
||||
> |
||||
<img src={pic2} className="rounded-xl" /> |
||||
</div> |
||||
</div> |
||||
<div |
||||
className=" h-full w-1/2 rounded-xl" |
||||
style={{ |
||||
background: leftBanner ? "" : "rgba(134,160,185,0.16)", |
||||
}} |
||||
> |
||||
<img src={greeeeen} className="rounded-xl h-full" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Banners; |
||||
@ -1,75 +0,0 @@ |
||||
import React from "react"; |
||||
|
||||
import jet from "./jet.png"; |
||||
import style from "./style.png"; |
||||
import pay from "./pay.png"; |
||||
import pindo from "./pindo.png"; |
||||
import mamoriat from "./mamoriat.png"; |
||||
import plus from "./plus.png"; |
||||
import club from "./club.png"; |
||||
import more from "./more2.svg"; |
||||
|
||||
const Categories = ({ items }) => { |
||||
return ( |
||||
<section className="my-10 w-7/12 mx-auto"> |
||||
<div className="flex flex-row items-center justify-between"> |
||||
{items.slice(0, 7).map((item, index) => ( |
||||
<div |
||||
className="flex flex-col items-center justify-center cursor-pointer" |
||||
key={index} |
||||
> |
||||
<img src={item.image} className="w-14" /> |
||||
<span className="text-xs mt-3">{item.title}</span> |
||||
</div> |
||||
))} |
||||
<div |
||||
// className={`${items.length > 9 ? "bg-blue-600" : "bg-red-600"}`}
|
||||
className="flex flex-col items-center justify-center " |
||||
> |
||||
<div |
||||
style={{ background: "#f0f0f1" }} |
||||
className="cursor-pointer rounded-full w-14 h-14 p-2 flex flex-col items-center justify-center" |
||||
> |
||||
<img src={more} className="w-8 rotate-90" /> |
||||
</div> |
||||
<span className="text-xs mt-3">بیشتر</span>{" "} |
||||
</div> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default Categories; |
||||
|
||||
Categories.defaultProps = { |
||||
items: [ |
||||
{ |
||||
image: jet, |
||||
title: "دیجی کالا جت", |
||||
}, |
||||
{ |
||||
image: style, |
||||
title: "دیجی استایل", |
||||
}, |
||||
{ |
||||
image: pay, |
||||
title: "دیجی پی", |
||||
}, |
||||
{ |
||||
image: pindo, |
||||
title: "پیندو", |
||||
}, |
||||
{ |
||||
image: mamoriat, |
||||
title: "ماموریت ها", |
||||
}, |
||||
{ |
||||
image: plus, |
||||
title: "دیجی پلاس", |
||||
}, |
||||
{ |
||||
image: club, |
||||
title: "دیجی کلاب", |
||||
}, |
||||
], |
||||
}; |
||||
|
Before Width: | Height: | Size: 143 KiB |
@ -1,76 +0,0 @@ |
||||
import React, { useState } from "react"; |
||||
|
||||
import rightArrow from "./black-right-arrow.svg"; |
||||
import leftArrow from "./black-left-arrow.svg"; |
||||
|
||||
const ImageSlider = ({ slides }) => { |
||||
const [current, setCurrent] = useState(0); |
||||
const length = slides.length; |
||||
|
||||
const nextSlide = () => { |
||||
setCurrent(current === length - 1 ? 0 : current + 1); |
||||
}; |
||||
|
||||
const prevSlide = () => { |
||||
setCurrent(current === 0 ? length - 1 : current - 1); |
||||
}; |
||||
|
||||
console.log(current); |
||||
|
||||
if (!Array.isArray(slides) || slides.length <= 0) { |
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<section className="bg-red-100"> |
||||
<div className="relative bg-pink-400"> |
||||
{slides.map((slide, index) => { |
||||
return ( |
||||
<div |
||||
className={index === current ? "slide active" : "slide"} |
||||
key={index} |
||||
> |
||||
{index === current && ( |
||||
<img |
||||
src={slide.image} |
||||
alt="mahdi" |
||||
className="w-full" |
||||
style={{ height: "100%" }} |
||||
/> |
||||
)} |
||||
</div> |
||||
); |
||||
})} |
||||
<Tabbar nextSlide={nextSlide} prevSlide={prevSlide} /> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default ImageSlider; |
||||
|
||||
function Tabbar({ nextSlide, prevSlide }) { |
||||
const tabs = [ |
||||
{ |
||||
icon: rightArrow, |
||||
click: nextSlide, |
||||
}, |
||||
{ |
||||
icon: leftArrow, |
||||
click: prevSlide, |
||||
}, |
||||
]; |
||||
return ( |
||||
<div className="flex flex-row items-center absolute bottom-7 right-10"> |
||||
{tabs.map((tab, index) => ( |
||||
<button |
||||
onClick={tab.click} |
||||
key={index} |
||||
className="bg-white border border-gray-300 rounded-full mx-1 p-2" |
||||
> |
||||
<img src={tab.icon} className="w-4" /> |
||||
</button> |
||||
))} |
||||
</div> |
||||
); |
||||
} |
||||
@ -1,212 +0,0 @@ |
||||
import React from "react"; |
||||
import { Swiper, SwiperSlide } from "swiper/react"; |
||||
// Import Swiper styles
|
||||
import "swiper/css"; |
||||
import "swiper/css/navigation"; |
||||
import "swiper/css/pagination"; |
||||
|
||||
|
||||
import leftArrow from "./white-left-arrow.svg"; |
||||
import General from "./General.png"; |
||||
|
||||
import o2 from "./o2.jpg"; |
||||
import o3 from "./o3.jpg"; |
||||
import r1 from "./r1.jpg"; |
||||
import r2 from "./r2.jpg"; |
||||
|
||||
const Offer = ({ products }) => { |
||||
return ( |
||||
<section |
||||
className="my-10 w-8/12 mx-auto rounded-2xl p-5" |
||||
style={{ backgroundColor: "#ef3a4f" }} |
||||
> |
||||
<div className="flex flex-row items-center p-2"> |
||||
{/* right */} |
||||
<div className="flex flex-col items-center justify-between w-2/12"> |
||||
<span className="text-base text-center text-white font-sansbold leading-8"> |
||||
پیـــــشنهاد |
||||
<br /> |
||||
شگــــفت |
||||
<br /> |
||||
انـــگیز |
||||
</span> |
||||
<img src={General} className="w-28 my-2" /> |
||||
<button className="text-sm text-white flex flex-row items-center"> |
||||
مشاهده همه |
||||
<img src={leftArrow} className="w-3 mr-1" /> |
||||
</button> |
||||
</div> |
||||
{/* left */} |
||||
<div className="w-10/12 flex flex-row items-center rounded-lg bg-white cursor-pointer"> |
||||
<Swiper |
||||
// spaceBetween={0}
|
||||
slidesPerView={5} |
||||
// navigation
|
||||
pagination={{ clickable: true }} |
||||
scrollbar={{ draggable: true }} |
||||
onSlideChange={() => console.log("slide change")} |
||||
onSwiper={(swiper) => console.log(swiper)} |
||||
> |
||||
{/* */} |
||||
{products.map((product, index) => ( |
||||
<SwiperSlide> |
||||
<div className="flex flex-col p-2"> |
||||
<img src={product.image} className="rounded" /> |
||||
<div className="flex flex-row justify-between items-center mt-4"> |
||||
<p className="text-xs text-white bg-red-600 px-2 py-0.5 rounded-lg mr-1"> |
||||
{product.discount} |
||||
<span className="">%</span> |
||||
</p> |
||||
<div className="flex flex-row items-center"> |
||||
<p className="text-sm ml-1">{product.price}</p> |
||||
<div className="relative"> |
||||
<span className="text-xs">توما</span> |
||||
<span className="text-xs absolute left-0.5 -top-2"> |
||||
ن |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<p |
||||
className="text-left text-xs line-through my-2 ml-3" |
||||
style={{ color: "#c0c2c5" }} |
||||
> |
||||
{product.discountPrice} |
||||
</p> |
||||
<div className="bg-gray-200 h-1.5 mx-auto rounded mt-2 flex flex-row-reverse w-11/12"> |
||||
<div |
||||
className={`h-1.5 rounded duration-500`} |
||||
style={{ |
||||
width: product.rangeWidth, |
||||
backgroundColor: "#ef3a4f", |
||||
}} |
||||
></div> |
||||
</div> |
||||
</div> |
||||
</SwiperSlide> |
||||
))} |
||||
</Swiper> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default Offer; |
||||
|
||||
Offer.defaultProps = { |
||||
products: [ |
||||
{ |
||||
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, |
||||
}, |
||||
], |
||||
}; |
||||
@ -1,19 +0,0 @@ |
||||
import pic4 from "./pic4.jpg"; |
||||
import pic6 from "./pic6.jpg"; |
||||
import pic5 from "./pic5.jpg"; |
||||
import pic3 from "./pic3.jpg"; |
||||
|
||||
export const SliderData = [ |
||||
{ |
||||
image: pic4, |
||||
}, |
||||
{ |
||||
image: pic6, |
||||
}, |
||||
{ |
||||
image: pic5, |
||||
}, |
||||
{ |
||||
image: pic3, |
||||
}, |
||||
]; |
||||
|
Before Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 642 B |
|
Before Width: | Height: | Size: 658 B |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 39 MiB |
|
Before Width: | Height: | Size: 4.2 MiB |
|
Before Width: | Height: | Size: 4.2 MiB |
@ -1,19 +0,0 @@ |
||||
import React from "react"; |
||||
import ImageSlider from "./ImageSlider"; |
||||
import { SliderData } from "./SliderData"; |
||||
import Categories from "./Categories"; |
||||
import Offer from "./Offer"; |
||||
import Banners from "./Banners"; |
||||
|
||||
const Digikala = () => { |
||||
return ( |
||||
<div> |
||||
<ImageSlider slides={SliderData} /> |
||||
<Banners /> |
||||
<Categories /> |
||||
<Offer /> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Digikala; |
||||
|
Before Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 749 B |
|
Before Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 39 MiB |
|
Before Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 235 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 315 KiB |
|
Before Width: | Height: | Size: 732 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 9.9 KiB |
|
Before Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 587 B |
|
Before Width: | Height: | Size: 655 B |