Skip to content

Commit

Permalink
comment out heroslider for now since we dont use it, but might want l…
Browse files Browse the repository at this point in the history 
…ater
  • Loading branch information
@yornaath
yornaath committed Jan 12, 2024
1 parent 20341fe commit 1bcff7a
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 104 deletions.
113 changes: 60 additions & 53 deletions components/hero-slider/HeroSlide.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,58 +10,65 @@ export interface HeroSlideProps {
}

export const HeroSlide: FC<HeroSlideProps> = ({ banner, style, className }) => {
const isExternalLink = banner.ctaLink
? !isCurrentOrigin(banner.ctaLink)
: false;
const linkProps = {
style: {
backgroundColor: `${banner.buttonColor}`,
borderColor: `${banner.buttonColor}`,
color: banner.buttonTextColor,
},
className:
"leading-[42px] w-full sm:w-fit text-center sm:text-start border rounded px-5 mb-5 mr-5 font-bold",
href: banner.ctaLink,
};
return <></>;
// const link = banner.link?.isMarket
// ? `/markets/${news.link?.market?.marketId}`
// : news.link?.url;

return (
<div
className={`flex h-full w-full items-center ${className}`}
style={style}
>
<div className="w-full pb-8">
<h2
className={`mb-4 text-center font-sans text-5xl font-extrabold text-white sm:text-left sm:text-7xl md:whitespace-pre lg:text-8xl`}
>
{banner.title}
</h2>
<p
className={
"mb-6 whitespace-pre text-center font-sans text-3xl font-extrabold text-white sm:text-start md:text-4xl"
}
>
{banner.subtitle}
</p>
<div className="flex flex-col sm:flex-row">
{isExternalLink ? (
<a {...linkProps} target="_blank">
{banner.ctaText}
</a>
) : (
<>
{linkProps.href && (
<Link
href={linkProps.href}
className={linkProps.className}
style={linkProps.style}
>
{banner.ctaText}
</Link>
)}
</>
)}
</div>
</div>
</div>
);
// const isExternalLink = link ? !isCurrentOrigin(link) : false;

// const isExternalLink = banner.ctaLink
// ? !isCurrentOrigin(banner.ctaLink)
// : false;
// const linkProps = {
// style: {
// backgroundColor: `${banner.buttonColor}`,
// borderColor: `${banner.buttonColor}`,
// color: banner.buttonTextColor,
// },
// className:
// "leading-[42px] w-full sm:w-fit text-center sm:text-start border rounded px-5 mb-5 mr-5 font-bold",
// href: banner.ctaLink,
// };

// return (
// <div
// className={`flex h-full w-full items-center ${className}`}
// style={style}
// >
// <div className="w-full pb-8">
// <h2
// className={`mb-4 text-center font-sans text-5xl font-extrabold text-white sm:text-left sm:text-7xl md:whitespace-pre lg:text-8xl`}
// >
// {banner.title}
// </h2>
// <p
// className={
// "mb-6 whitespace-pre text-center font-sans text-3xl font-extrabold text-white sm:text-start md:text-4xl"
// }
// >
// {banner.subtitle}
// </p>
// <div className="flex flex-col sm:flex-row">
// {isExternalLink ? (
// <a {...linkProps} target="_blank">
// {banner.ctaText}
// </a>
// ) : (
// <>
// {linkProps.href && (
// <Link
// href={linkProps.href}
// className={linkProps.className}
// style={linkProps.style}
// >
// {banner.ctaText}
// </Link>
// )}
// </>
// )}
// </div>
// </div>
// </div>
// );
};
103 changes: 52 additions & 51 deletions components/hero-slider/HeroSlider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,57 +12,58 @@ const HeroSlider = ({
banners: CmsNews[];
bannerPlaceHolders: string[];
}) => {
const slider = useSliderControls({
count: banners.length,
autoplay: 15 * 1000,
pauseOnUserInteraction: 45 * 1000,
});
return <></>;
// const slider = useSliderControls({
// count: banners.length,
// autoplay: 15 * 1000,
// pauseOnUserInteraction: 45 * 1000,
// });

return (
<section
className={`relative mx-auto h-[527px] w-full`}
data-testid="HeroSlider__container"
>
{banners.map((banner, index) => (
<Image
key={index}
priority
src={banner.imageUrl ?? ""}
alt={`Image depicting ${banner.title}`}
placeholder="blur"
blurDataURL={bannerPlaceHolders[index]}
sizes="100vw"
fill
className="object-cover"
style={{
objectFit: "cover",
transitionDuration: index == slider.currentSlide ? "0.5s" : "1s",
opacity: index == slider.currentSlide ? "1" : "0.001",
objectPosition: `${banner.imageAlignment} 50%`,
}}
/>
))}
<div className="container-fluid relative h-full">
{banners.map((banner, index) => (
<Transition
className="container-fluid absolute left-0 h-full w-full"
show={index == slider.currentSlide}
enter="transition-all duration-1000"
enterFrom="opacity-0 blur-md"
enterTo="opacity-100 blur-none"
leave="transition-all duration-1000"
leaveFrom="opacity-100 blur-none"
leaveTo="opacity-0 blur-md"
key={index}
>
<HeroSlide banner={banner} />
</Transition>
))}
{banners.length > 1 && (
<HeroControls slides={banners} slider={slider} />
)}
</div>
</section>
);
// return (
// <section
// className={`relative mx-auto h-[527px] w-full`}
// data-testid="HeroSlider__container"
// >
// {banners.map((banner, index) => (
// <Image
// key={index}
// priority
// src={banner.imageUrl ?? ""}
// alt={`Image depicting ${banner.title}`}
// placeholder="blur"
// blurDataURL={bannerPlaceHolders[index]}
// sizes="100vw"
// fill
// className="object-cover"
// style={{
// objectFit: "cover",
// transitionDuration: index == slider.currentSlide ? "0.5s" : "1s",
// opacity: index == slider.currentSlide ? "1" : "0.001",
// objectPosition: `${banner.imageAlignment} 50%`,
// }}
// />
// ))}
// <div className="container-fluid relative h-full">
// {banners.map((banner, index) => (
// <Transition
// className="container-fluid absolute left-0 h-full w-full"
// show={index == slider.currentSlide}
// enter="transition-all duration-1000"
// enterFrom="opacity-0 blur-md"
// enterTo="opacity-100 blur-none"
// leave="transition-all duration-1000"
// leaveFrom="opacity-100 blur-none"
// leaveTo="opacity-0 blur-md"
// key={index}
// >
// <HeroSlide banner={banner} />
// </Transition>
// ))}
// {banners.length > 1 && (
// <HeroControls slides={banners} slider={slider} />
// )}
// </div>
// </section>
// );
};
export default HeroSlider;

0 comments on commit 1bcff7a

Please sign in to comment.