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.
 
 
 
 

65 lines
2.1 KiB

import React from "react";
import Avatar from "@mui/material/Avatar";
import _ from "lodash";
export default function Header(props: any) {
const { headerData, theme } = props;
return (
<header
className={_.join(
[
"home-header",
theme === "light" ? "home-header-light" : "home-header-dark",
],
" "
)}
>
<div id="myCarousel" className="carousel slide" data-ride="carousel">
<div className="carousel-inner">
{headerData.map((item: any, i: any) => (
<div
className={i === 0 ? "item active" : "item"}
style={{
background: `url(${
"https://dnvn.ir/api/v1/file/" + item.fileId
})`,
}}
// dataBackgroundImage={`https://dnvn.ir/api/v1/file/${item.fileId}`}
key={i}
>
<div className="home-header__cover"></div>
<div className="home-header__info d-flex flex-column">
<div className="home-header__info--author d-flex">
{item.authorImage && <Avatar src={item.authorImage} />}
<div className="d-flex flex-column">
<h3>{item.extraText}</h3>
{/* <i>نویسنده</i> */}
</div>
</div>
{/* <h1>{(Number(i) + 1)}</h1> */}
<h1>{item.title}</h1>
<h2>{item.subTitle}</h2>
</div>
</div>
))}
</div>
<div className="carousel-indicators">
{headerData.map((item1: any, i: any) => (
<li
className="d-flex align-items-center"
data-target="#myCarousel"
data-slide-to={i}
key={i}
>
<span className={i === 0 ? "active" : ""}></span>
<div className="d-flex flex-column">
<b>{"."}</b>
<strong>{item1.title}</strong>
</div>
</li>
))}
</div>
</div>
</header>
);
}