56 lines
2.4 KiB
TypeScript
56 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import Image from "next/image"
|
|
|
|
import styles from "./hero.module.css"
|
|
|
|
import type { HeroProps } from "@/types/components/current/hero"
|
|
|
|
export default function Hero({ images }: HeroProps) {
|
|
return (
|
|
<div className="hero-content-overlay hero-content-widget">
|
|
<div className="hero-content-overlay__img-container">
|
|
<div className="hero-fixed hero-fixed--deemphasized" style={{ marginTop: "0px" }}>
|
|
<div className="hero" style={{ top: "113px" }}>
|
|
<div className="hero__img-container">
|
|
<div id="full-width-slider" className="royalSlider royalSlider--hero rsDefault rsHor rsFade rsWithBullets" data-js="hero-slider" tabIndex={0} aria-label="Carousel. Change slides with keyboard left and right arrows." style={{ touchAction: "pan-y" }}>
|
|
<div className="rsOverflow" style={{ width: "1555px", height: "650px" }}>
|
|
<div className="rsContainer">
|
|
<div style={{ zIndex: 0 }} className="rsSlide ">
|
|
<picture style={{ visibility: "visible", opacity: 1, transition: "opacity 400ms ease-in-out 0s" }}>
|
|
{images.map(({ node: image }) => (
|
|
<Image
|
|
alt={image.title}
|
|
className={`rsImg-x slider-plchldr ${styles.heroImage}`}
|
|
data-aspectratio="1.50"
|
|
height={image.dimension.height}
|
|
key={image.title}
|
|
src={image.url}
|
|
unoptimized
|
|
width={image.dimension.width}
|
|
/>
|
|
))}
|
|
</picture>
|
|
</div>
|
|
</div>
|
|
<div className="rsArrow rsArrowLeft" style={{ display: "none" }}>
|
|
<div className="rsArrowIcn" tabIndex={0} />
|
|
</div>
|
|
<div className="rsArrow rsArrowRight" style={{ display: "none" }}>
|
|
<div className="rsArrowIcn" tabIndex={0} />
|
|
</div>
|
|
</div>
|
|
<div className="rsNav rsBullets">
|
|
<div className="rsNavItem rsBullet rsNavSelected">
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|