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