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