Merge branch 'master' into master

asyncapi · Nov 13, 2023 · 1c14846 · 1c14846
2 parents 448dac6 + 7d839e0
commit 1c14846
Show file tree

Hide file tree

Showing 10 changed files with 242 additions and 98 deletions.
diff --git a/components/campaigns/AnnoucementHero.js b/components/campaigns/AnnoucementHero.js
@@ -1,8 +1,11 @@
+import { useState, useEffect } from 'react'
 import Paragraph from '../typography/Paragraph'
 import Button from '../buttons/Button'
 import Heading from '../typography/Heading'
 import Container from '../layout/Container'
-import AnnouncementRemainingDays from './AnnouncementRamainingDays'
+import AnnouncementRemainingDays from './AnnouncementRemainingDays'
+import ArrowLeft from '../icons/ArrowLeft'
+import ArrowRight from '../icons/ArrowRight'
 
 function shouldShowBanner(cfpDeadline) {
   const currentDate = new Date(); // G et the current date
@@ -15,48 +18,140 @@ function shouldShowBanner(cfpDeadline) {
 
   return true;
 }
+
 export default function AnnouncementHero({ className = '', small = false, hideVideo = false }) {
   //return null;
+
+  const [activeIndex, setActiveIndex] = useState(0);
 
-    const cfpDeadline = '2023-11-30T06:00:00Z'
-    const showBanner = shouldShowBanner(cfpDeadline);
-  if (!showBanner) return null;
+  const cfpDeadlineIndia = '2023-11-30T06:00:00Z'
+  const cfpDeadlineFrance = '2023-12-06T06:00:00Z'
+  const showBannerIndia = shouldShowBanner(cfpDeadlineIndia);
+  const showBannerFrance = shouldShowBanner(cfpDeadlineFrance);
 
-
-  return (
-    <Container wide as="section" padding='' className='text-center'>
+  const Banner = ({ title, dateLocation, cfaText, eventName, cfpDeadline, link, city, activeBanner }) => {
+    return (
       <div
-        className={`bg-gray-50 border border-gray-200 py-6 rounded ${className} ${
-          small ? 'mb-4' : 'mx-3 mt-3 p-3 mb-6'
-        }`} data-testid = "AnnouncementHero-main-div"
+        className={`bg-gray-50 w-full h-full border border-gray-200 absolute py-6 rounded transform transition-transform ${className} ${small ? 'mb-4' : 'mx-3 mt-3 p-3 mb-6'
+          } ${activeBanner ? 'opacity-100 scale-100' : 'opacity-0 scale-90'}`} data-testid="AnnouncementHero-main-div"
       >
         <Heading
           className="countdown-text-gradient"
           level="h2"
           typeStyle="heading-lg" >
-          AsyncAPI Conf on Tour 2023
+          {title}
         </Heading>
-
         <Heading
           className="countdown-text-gradient"
-          level="h3"
-          typeStyle="heading-sm"
-        >
-          Bangalore Edition
+          level="h2"
+          typeStyle="heading-md" >
+          {city}
         </Heading>
         <Paragraph typeStyle="body-lg">
-          30th of November, 2023 | Bangalore, India
+          {dateLocation}
         </Paragraph>
-        <AnnouncementRemainingDays dateTime={cfpDeadline} eventName="AACoT'23 Bangalore Edition" />
+        <AnnouncementRemainingDays dateTime={cfpDeadline} eventName={eventName} />
         <div className="mt-6 pb-2 space-x-2">
           <Button
-            href="https://opencollective.com/asyncapi/events/asyncapi-conference-on-tour-6b3c0aa1/contribute/aacot-london-edition-66187"
+            href={link}
             target="_blank"
-            text="Get Your Tickets"
+            text={cfaText}
             data-testid="AnnouncementHero-submit-session"
           />
         </div>
       </div>
+    )
+  }
+
+  const banners = [
+    {
+      title: "AsyncAPI Conf",
+      city: "Bengaluru",
+      dateLocation: "30th of November, 2023 | Bengaluru, India",
+      cfaText: "Grab Free Tickets",
+      eventName: "AACoT'23 Bengaluru Edition",
+      cfpDeadline: cfpDeadlineIndia,
+      link: "https://opencollective.com/asyncapi/events/asyncapi-conference-on-tour-6b3c0aa1/contribute/aacot-london-edition-66187",
+      show: showBannerIndia
+    },
+    {
+      title: "AsyncAPI Conf",
+      city: "Paris",
+      dateLocation: "8th of December, 2023 | Paris, France",
+      cfaText: "Get Free Tickets",
+      eventName: "AACoT'23 Paris Edition",
+      cfpDeadline: cfpDeadlineFrance,
+      link: "https://ticket.apidays.global/event/apidays-paris-2023/8a1f3904-e2be-4c69-a880-37d2ddf1027d/cart?coupon=ASYNCAPICONF23",
+      show: showBannerFrance
+    }
+  ];
+
+  // Calculate the number of banners that should be displayed
+  const numberOfVisibleBanners = banners.filter(banner => banner.show).length;
+  const len = banners.length;
+
+  const goToPrevious = () => {
+    setActiveIndex((prevIndex) => (prevIndex === 0 ? len - 1 : prevIndex - 1));
+  };
+
+  const goToNext = () => {
+    setActiveIndex((prevIndex) => (prevIndex === len - 1 ? 0 : prevIndex + 1));
+  };
+
+  const goToIndex = (index) => {
+    setActiveIndex(index);
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => setActiveIndex(index => index + 1), 5000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [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 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/...ts/campaigns/AnnouncementRamainingDays.js → ...ts/campaigns/AnnouncementRemainingDays.js b/...ts/campaigns/AnnouncementRamainingDays.js → ...ts/campaigns/AnnouncementRemainingDays.js
diff --git a/config/all-tags.json b/config/all-tags.json
@@ -1 +1 @@
-{"languages":[{"name":"Go/Golang","color":"bg-[#8ECFDF]","borderColor":"border-[#00AFD9]"},{"name":"Java","color":"bg-[#ECA2A4]","borderColor":"border-[#EC2125]"},{"name":"JavaScript","color":"bg-[#F2F1C7]","borderColor":"border-[#BFBE86]"},{"name":"HTML","color":"bg-[#E2A291]","borderColor":"border-[#E44D26]"},{"name":"C/C++","color":"bg-[#93CDEF]","borderColor":"border-[#0080CC]"},{"name":"C#","color":"bg-[#E3AFE0]","borderColor":"border-[#9B4F96]"},{"name":"Python","color":"bg-[#A8D0EF]","borderColor":"border-[#3878AB]"},{"name":"TypeScript","color":"bg-[#7DBCFE]","borderColor":"border-[#2C78C7]"},{"name":"Kotlin","color":"bg-[#B1ACDF]","borderColor":"border-[#756BD9]"},{"name":"Scala","color":"bg-[#FFA299]","borderColor":"border-[#DF301F]"},{"name":"Markdown","color":"bg-[#BABEBF]","borderColor":"border-[#445B64]"},{"name":"YAML","color":"bg-[#FFB764]","borderColor":"border-[#F1901F]"},{"name":"R","color":"bg-[#84B5ED]","borderColor":"border-[#246BBE]"},{"name":"Ruby","color":"bg-[#FF8289]","borderColor":"border-[#FF000F]"},{"name":"Rust","color":"bg-[#FFB8AA]","borderColor":"border-[#E43716]"},{"name":"Shell","color":"bg-[#87D4FF]","borderColor":"border-[#389ED7]"},{"name":"Groovy","color":"bg-[#B6D5E5]","borderColor":"border-[#609DBC]"}],"technologies":[{"name":"Node.js","color":"bg-[#BDFF67]","borderColor":"border-[#84CE24]"},{"name":"Hermes","color":"bg-[#8AEEBD]","borderColor":"border-[#2AB672]"},{"name":"React JS","color":"bg-[#9FECFA]","borderColor":"border-[#08D8FE]"},{"name":".NET","color":"bg-[#A184FF]","borderColor":"border-[#5026D4]"},{"name":"ASP.NET","color":"bg-[#71C2FB]","borderColor":"border-[#1577BC]"},{"name":"Springboot","color":"bg-[#98E279]","borderColor":"border-[#68BC44]"},{"name":"AWS","color":"bg-[#FF9F59]","borderColor":"border-[#EF6703]"},{"name":"Docker","color":"bg-[#B8E0FF]","borderColor":"border-[#2596ED]"},{"name":"Node-RED","color":"bg-[#FF7474]","borderColor":"border-[#8F0101]"},{"name":"Maven","color":"bg-[#FF6B80]","borderColor":"border-[#CA1A33]"},{"name":"Saas","color":"bg-[#6AB8EC]","borderColor":"border-[#2275AD]"},{"name":"Kubernetes-native","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Scala","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Azure","color":"bg-[#4B93FF]","borderColor":"border-[#015ADF]"},{"name":"Jenkins","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Flask","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Nest Js","color":"bg-[#E1224E]","borderColor":"border-[#B9012b]"},{"name":"TypeScript","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Socket.IO","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Liquid","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Kotlin","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Gradle","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Spring Cloud Streams","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"JHipster JDL","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Groovy","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Markdown","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Shell","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"WebComponents","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Babel","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Storybook","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"AsyncAPI Generator","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"JetBrains","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"IntelliJ IDEA","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"VSCode","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"SmartPaste","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"HTML","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"}]}
+{"languages":[{"name":"Go/Golang","color":"bg-[#8ECFDF]","borderColor":"border-[#00AFD9]"},{"name":"Java","color":"bg-[#ECA2A4]","borderColor":"border-[#EC2125]"},{"name":"JavaScript","color":"bg-[#F2F1C7]","borderColor":"border-[#BFBE86]"},{"name":"HTML","color":"bg-[#E2A291]","borderColor":"border-[#E44D26]"},{"name":"C/C++","color":"bg-[#93CDEF]","borderColor":"border-[#0080CC]"},{"name":"C#","color":"bg-[#E3AFE0]","borderColor":"border-[#9B4F96]"},{"name":"Python","color":"bg-[#A8D0EF]","borderColor":"border-[#3878AB]"},{"name":"TypeScript","color":"bg-[#7DBCFE]","borderColor":"border-[#2C78C7]"},{"name":"Kotlin","color":"bg-[#B1ACDF]","borderColor":"border-[#756BD9]"},{"name":"Scala","color":"bg-[#FFA299]","borderColor":"border-[#DF301F]"},{"name":"Markdown","color":"bg-[#BABEBF]","borderColor":"border-[#445B64]"},{"name":"YAML","color":"bg-[#FFB764]","borderColor":"border-[#F1901F]"},{"name":"R","color":"bg-[#84B5ED]","borderColor":"border-[#246BBE]"},{"name":"Ruby","color":"bg-[#FF8289]","borderColor":"border-[#FF000F]"},{"name":"Rust","color":"bg-[#FFB8AA]","borderColor":"border-[#E43716]"},{"name":"Shell","color":"bg-[#87D4FF]","borderColor":"border-[#389ED7]"},{"name":"Groovy","color":"bg-[#B6D5E5]","borderColor":"border-[#609DBC]"}],"technologies":[{"name":"Node.js","color":"bg-[#BDFF67]","borderColor":"border-[#84CE24]"},{"name":"Hermes","color":"bg-[#8AEEBD]","borderColor":"border-[#2AB672]"},{"name":"React JS","color":"bg-[#9FECFA]","borderColor":"border-[#08D8FE]"},{"name":".NET","color":"bg-[#A184FF]","borderColor":"border-[#5026D4]"},{"name":"ASP.NET","color":"bg-[#71C2FB]","borderColor":"border-[#1577BC]"},{"name":"Springboot","color":"bg-[#98E279]","borderColor":"border-[#68BC44]"},{"name":"AWS","color":"bg-[#FF9F59]","borderColor":"border-[#EF6703]"},{"name":"Docker","color":"bg-[#B8E0FF]","borderColor":"border-[#2596ED]"},{"name":"Node-RED","color":"bg-[#FF7474]","borderColor":"border-[#8F0101]"},{"name":"Maven","color":"bg-[#FF6B80]","borderColor":"border-[#CA1A33]"},{"name":"Saas","color":"bg-[#6AB8EC]","borderColor":"border-[#2275AD]"},{"name":"Kubernetes-native","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Scala","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Azure","color":"bg-[#4B93FF]","borderColor":"border-[#015ADF]"},{"name":"Jenkins","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Flask","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Nest Js","color":"bg-[#E1224E]","borderColor":"border-[#B9012b]"},{"name":"TypeScript","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Socket.IO","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Liquid","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Kotlin","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Gradle","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Spring Cloud Streams","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"JHipster JDL","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Groovy","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Markdown","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Shell","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"WebComponents","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Babel","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Storybook","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"AsyncAPI Generator","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"VSCode","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"SmartPaste","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"JetBrains","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"IntelliJ IDEA","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"HTML","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"}]}
diff --git a/config/meetings.json b/config/meetings.json
@@ -20,13 +20,6 @@
     "banner": "https://user-images.githubusercontent.com/40604284/256949583-958c34c8-4256-4ac5-852b-e00ec094fad0.png",
     "date": "2023-08-08T16:00:00.000Z"
   },
-  {
-    "title": "Spec 3.0 Meeting",
-    "calLink": "https://www.google.com/calendar/event?eid=NG9lc2RwN3A2djFmNmRxaHZoaWRjMnRhaDAgY19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bn",
-    "url": "https://github.com/asyncapi/community/issues/823",
-    "banner": "",
-    "date": "2023-08-02T16:00:00.000Z"
-  },
   {
     "title": "Community Meeting",
     "calLink": "https://www.google.com/calendar/event?eid=Z3YzNDRwamprYzMwNTluYTdtNG1iaHA5NjggY19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bn",