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