You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

183 lines
5.1 KiB

import React, { Component } from "react";
import { Link } from "react-router-dom";
import Carousel from "react-elastic-carousel";
import Simple from "./Simple/index";
import Header from "./Header/index";
import Blog from "./Blog/index";
import dropdown from "../../../assets/icons/dropdown.png";
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75,
},
};
const SimpleHeader = (props) => {
return (
<>
{window.innerWidth > 1000 ? (
<div className="home-scroll__header d-flex">
<div className="home-scroll__header--right d-flex">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{props.title}</h1>
<span></span>
</div>
{props.more ? (
<Link
to={props.link}
className="home-scroll__header--more d-flex align-items-center"
>
<span style={{ fontSize: fontSize.desktop.h1 }}>بیشتر</span>
<img src={dropdown} alt="فلش" />
</Link>
) : null}
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-home-scroll__header d-flex">
<div className="mobile-home-scroll__header--right d-flex">
<h1>{props.title}</h1>
<span></span>
</div>
<Link
to={props.link}
className="mobile-home-scroll__header--more d-flex align-items-center"
>
<span>بیشتر</span>
<img src={dropdown} alt="فلش" />
</Link>
</div>
) : null}
</>
);
};
const TabHeader = (props) => {
return (
<>
{window.innerWidth > 1000 ? (
<div className="home-scroll__header d-flex">
<div className="home-scroll__header--right d-flex">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{props.title}</h1>
<span></span>
</div>
<Link
to={props.link}
className="home-scroll__header--more d-flex align-items-center"
>
<span style={{ fontSize: fontSize.desktop.h1 }}>بیشتر</span>
<img src={dropdown} alt="فلش" />
</Link>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-home-scroll__header d-flex">
<div className="mobile-home-scroll__header--right d-flex">
<h1>{props.title}</h1>
<span></span>
</div>
<div className="mobile-home-scroll__header--more d-flex align-items-center">
<span>بیشتر</span>
<img src={dropdown} alt="فلش" />
</div>
</div>
) : null}
</>
);
};
export default class HomeSlider extends Component {
render() {
const { data, title, height, designType, number, link } = this.props;
let header;
if (title) {
if (designType === "simple" || designType === "blog") {
header = (
<SimpleHeader title={title} link={link} more={data.length > number} />
);
} else if (designType === "tab") {
header = <TabHeader title={title} link={link} />;
}
}
return (
<>
{window.innerWidth > 1000 ? (
<div
className={
title ? "home-slider d-flex flex-column" : "home-slider d-flex"
}
>
{header}
<Carousel
itemsToShow={number}
isRTL={true}
enableTilt={false}
showArrows={true}
pagination={false}
>
{data.map((item, i) => (
<Item
height={height}
designType={designType}
data={item}
key={i}
/>
))}
</Carousel>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div
className={
title
? "mobile-home-slider d-flex flex-column"
: "mobile-home-slider d-flex"
}
>
{header}
<Carousel
itemsToShow={number}
isRTL={true}
enableTilt={false}
showArrows={false}
pagination={false}
>
{data.map((item, i) => (
<Item
height={height}
designType={designType}
data={item}
key={i}
/>
))}
</Carousel>
</div>
) : null}
</>
);
}
}
const Item = (props) => {
return (
<>
{props.designType === "header" ? (
<Header height={props.height} data={props.data} />
) : null}
{props.designType === "simple" || props.designType === "tab" ? (
<Simple height={props.height} data={props.data} />
) : null}
{props.designType === "blog" ? (
<Blog height={props.height} data={props.data} />
) : null}
</>
//
);
};