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.
 
 
 

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