feat: improve banner

asyncapi · Dec 5, 2023 · cd907ee · cd907ee
1 parent 8111f6f
commit cd907ee
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 47 deletions.
diff --git a/components/campaigns/AnnoucementHero.js b/components/campaigns/AnnoucementHero.js
@@ -109,49 +109,50 @@ export default function AnnouncementHero({ className = '', small = false, hideVi
     };
   }, [activeIndex]);
 
-  return (
-    <Container as="section" padding='' className={`text-center`}>
-      <div className="relative flex flex-row justify-center items-center md:gap-4 overflow-x-hidden">
-        <div className="h-8 w-8 rounded-full bg-primary-500 hover:bg-primary-600 cursor-pointer mb-2 absolute left-0 z-10 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100 flex justify-center items-center" onClick={goToPrevious}>
-          <ArrowLeft className='w-4 text-white' />
-        </div>
-        <div className='relative w-5/6 pr-3 flex flex-col gap-2 justify-center items-center'>
-          <div className='relative w-full h-[18rem] lg:w-[38rem] lg:h-[17rem] overflow-hidden'>
-          {banners.map((banner, index) => (
-            banner.show && (
-              <Banner
-                key={index}
-                title={banner.title}
-                dateLocation={banner.dateLocation}
-                cfaText={banner.cfaText}
-                eventName={banner.eventName}
-                cfpDeadline={banner.cfpDeadline}
-                link={banner.link}
-                city={banner.city}
-                activeBanner={index === activeIndex % len}
-              />
-            )
-          ))}
-          </div>
-          <div className="flex justify-center m-auto">
-            {banners.map((banner, index) => (
-              <div
-                key={index}
-                className={`h-2 w-2 rounded-full mx-1 cursor-pointer ${
-                  activeIndex % len === index ? 'bg-primary-500' : 'bg-gray-300'
-                }`}
-                onClick={() => goToIndex(index)}
-              />
-            ))}
-      </div>
-        </div>
-        <div
-          className="h-8 w-8 rounded-full bg-primary-500 hover:bg-primary-600 cursor-pointer mb-2 z-10 absolute right-0 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100"
-          onClick={goToNext}
-        >
-          <ArrowRight className='text-white' />
-        </div>
-      </div>
-    </Container>
-  );
+  return ''
+  // return (
+  //   <Container as="section" padding='' className={`text-center`}>
+  //     <div className="relative flex flex-row justify-center items-center md:gap-4 overflow-x-hidden">
+  //       <div className="h-8 w-8 rounded-full bg-primary-500 hover:bg-primary-600 cursor-pointer mb-2 absolute left-0 z-10 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100 flex justify-center items-center" onClick={goToPrevious}>
+  //         <ArrowLeft className='w-4 text-white' />
+  //       </div>
+  //       <div className='relative w-5/6 pr-3 flex flex-col gap-2 justify-center items-center'>
+  //         <div className='relative w-full h-[18rem] lg:w-[38rem] lg:h-[17rem] overflow-hidden'>
+  //         {banners.map((banner, index) => (
+  //           banner.show && (
+  //             <Banner
+  //               key={index}
+  //               title={banner.title}
+  //               dateLocation={banner.dateLocation}
+  //               cfaText={banner.cfaText}
+  //               eventName={banner.eventName}
+  //               cfpDeadline={banner.cfpDeadline}
+  //               link={banner.link}
+  //               city={banner.city}
+  //               activeBanner={index === activeIndex % len}
+  //             />
+  //           )
+  //         ))}
+  //         </div>
+  //         <div className="flex justify-center m-auto">
+  //           {banners.map((banner, index) => (
+  //             <div
+  //               key={index}
+  //               className={`h-2 w-2 rounded-full mx-1 cursor-pointer ${
+  //                 activeIndex % len === index ? 'bg-primary-500' : 'bg-gray-300'
+  //               }`}
+  //               onClick={() => goToIndex(index)}
+  //             />
+  //           ))}
+  //     </div>
+  //       </div>
+  //       <div
+  //         className="h-8 w-8 rounded-full bg-primary-500 hover:bg-primary-600 cursor-pointer mb-2 z-10 absolute right-0 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100"
+  //         onClick={goToNext}
+  //       >
+  //         <ArrowRight className='text-white' />
+  //       </div>
+  //     </div>
+  //   </Container>
+  // );
 }
diff --git a/components/campaigns/Banner.js b/components/campaigns/Banner.js
@@ -12,7 +12,7 @@ export default function Banner({}) {
   const day = new Date().getUTCDate();
   const month = new Date().getUTCMonth();
   const year = new Date().getUTCFullYear();
-  // month=11 is December. Show only between 6-30 November.
+  // month=11 is December. Show only between 6-31 December.
   if (year > 2023 || month > 11 || day < 6) {
     return null;
   }
@@ -21,7 +21,7 @@ export default function Banner({}) {
     <div className="bg-gray-100" data-testid="Banner-main-div">
       <div className="mx-auto max-w-screen-xl py-1 px-3 sm:px-6 lg:px-8" >
         <div className="flex items-center justify-between flex-wrap">
-          <div className="hidden md:flex w-0 flex-1 flex items-center text-xs">
+          <div className="md:flex w-0 flex-1 flex items-center text-xs">
             <p className="font-medium text-gray-700">
               <span className="md:inline">
                 AsyncAPI v3 has landed! ⭐️
@@ -36,6 +36,13 @@ export default function Banner({}) {
             >
               Release notes
             </a>
+            <a
+              href="https://v2.asyncapi.com/"
+              className="flex items-center justify-center ml-2 px-4 py-1 border border-transparent rounded-md shadow-sm text-xs font-medium text-indigo-400 focus:text-indigo-600 bg-white hover:bg-indigo-50"
+              target="_blank" rel="noopener noreferrer"
+            >
+              Old v2 docs
+            </a>
           </div>
         </div>
       </div>