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.
 
 
 
 

55 lines
1.9 KiB

import React from "react";
import "./index.scss";
import Avatar from '@mui/material/Avatar';
export default function Header(props: any) {
const { headerData } = props;
return (
<header className="home-header">
<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>
);
}