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.
69 lines
2.0 KiB
69 lines
2.0 KiB
import React, { Component } from "react"; |
|
import { Link } from "react-router-dom"; |
|
|
|
import "./index.scss"; |
|
export default class Header extends Component { |
|
render() { |
|
const { height, data } = this.props; |
|
return ( |
|
<> |
|
{window.innerWidth > 1000 ? ( |
|
<div |
|
style={{ |
|
minWidth: `${data.width}`, |
|
height: height, |
|
}} |
|
className="slider-header d-flex" |
|
> |
|
<div |
|
className="slider-header__right d-flex" |
|
style={{ backgroundColor: data.backgroundColor }} |
|
> |
|
<img |
|
src={`https://dnvn.ir/api/v1/file/${data.fileId}`} |
|
alt={data.title} |
|
/> |
|
</div> |
|
<div |
|
style={{ backgroundColor: data.backgroundColor }} |
|
className="slider-header__left d-flex flex-column" |
|
> |
|
<h1>{data.title}</h1> |
|
<h2>{data.subTitle}</h2> |
|
{data.buttonText && ( |
|
<Link to={data.link || "/"}>{data.buttonText}</Link> |
|
)} |
|
</div> |
|
</div> |
|
) : null} |
|
{window.innerWidth < 1000 ? ( |
|
<div |
|
style={{ |
|
minWidth: `${data.width}`, |
|
height: height, |
|
}} |
|
className="mobile-slider-header d-flex" |
|
> |
|
<div |
|
className="mobile-slider-header__right d-flex" |
|
style={{ backgroundColor: data.backgroundColor }} |
|
> |
|
<img |
|
src={`https://dnvn.ir/api/v1/file/${data.fileId}`} |
|
alt={data.title} |
|
/> |
|
</div> |
|
<div |
|
style={{ backgroundColor: data.backgroundColor }} |
|
className="mobile-slider-header__left d-flex flex-column" |
|
> |
|
<h1>{data.title}</h1> |
|
<h2>{data.subTitle}</h2> |
|
<Link to={data.link || "/"}>{data.buttonText}</Link> |
|
</div> |
|
</div> |
|
) : null} |
|
</> |
|
); |
|
} |
|
}
|
|
|