From 1bcff7a5f239c4a3d8d4a1637d019bed08fa1648 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rn=20Andre=20Tangen=20=40gorillatron?=
 <jornandretangen@gmail.com>
Date: Fri, 12 Jan 2024 11:22:50 +0100
Subject: [PATCH] comment out heroslider for now since we dont use it, but
 might want later

---
 components/hero-slider/HeroSlide.tsx  | 113 ++++++++++++++------------
 components/hero-slider/HeroSlider.tsx | 103 +++++++++++------------
 2 files changed, 112 insertions(+), 104 deletions(-)

diff --git a/components/hero-slider/HeroSlide.tsx b/components/hero-slider/HeroSlide.tsx
index e95dfdc4e..caa90c1b1 100644
--- a/components/hero-slider/HeroSlide.tsx
+++ b/components/hero-slider/HeroSlide.tsx
@@ -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>
+  // );
 };
diff --git a/components/hero-slider/HeroSlider.tsx b/components/hero-slider/HeroSlider.tsx
index 82c3d0219..6702f5e56 100644
--- a/components/hero-slider/HeroSlider.tsx
+++ b/components/hero-slider/HeroSlider.tsx
@@ -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;