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.
 
 
 
 

53 lines
1.7 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: Number) => (
<div
className={item.id === 0 ? "item active" : "item"}
style={{
background: `url(${item.imageUrl})`,
}}
>
<div className="home-header__cover"></div>
<div className="home-header__info d-flex flex-column">
<div className="home-header__info--author d-flex">
<Avatar src={item.authorImage} />
<div className="d-flex flex-column">
<h3>{item.author}</h3>
<i>نویسنده</i>
</div>
</div>
<h1>{'0' + (item.id + 1)}</h1>
<h1>{item.name}</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={item1.id}
key={i}
>
<span className={i === 0 ? "active" : ""}></span>
<div className="d-flex flex-column">
<b>0{item1.id + 1}</b>
<strong>{item1.name}</strong>
</div>
</li>
))}
</div>
</div>
</header>
);
}