From 2e6666768b88b5d6e4f02f477290d6f33650b9b7 Mon Sep 17 00:00:00 2001 From: SumantxD Date: Sat, 20 May 2023 10:08:09 -0500 Subject: [PATCH] fix: improved what the experts are saying section #1696 Signed-off-by: SumantxD --- components/Carousel.js | 215 ++++++++++++++++++++++++++++++++++++++ components/Testimonial.js | 35 ------- pages/index.js | 114 +++++++++++++++----- 3 files changed, 300 insertions(+), 64 deletions(-) create mode 100644 components/Carousel.js delete mode 100644 components/Testimonial.js diff --git a/components/Carousel.js b/components/Carousel.js new file mode 100644 index 00000000000..325745bb894 --- /dev/null +++ b/components/Carousel.js @@ -0,0 +1,215 @@ +import React, { Fragment, useEffect, useState } from "react"; + + +export default function Carousel({ + data, + fullscreen, + timer, + interval, + arrows, + dots, +}) { + const [current, setCurrent] = useState(0); + const [paused, setPaused] = useState(false); + const [isFullscreen, setIsFullscreen] = useState(false); + + function handlePrevious() { + let i = current; + i -= 1; + if (i < 0) i = data.length - 1; + setCurrent(i); + } + + function handleNext() { + let i = current; + i += 1; + if (i > data.length - 1) i = 0; + setCurrent(i); + } + + function handlePause() { + setPaused(!paused); + } + + useEffect(() => { + const INTERVAL = setInterval(() => { + if (timer && !paused) handleNext(); + }, interval || 5000); + + return () => clearInterval(INTERVAL); + }, [current, paused]); + + {/*---------------------------------------------------- Component start here ------------------------------------------------------ */} + + return ( +
+ {data.map((item, index) => ( +
current ? "translate-x-full" : ""} ${ + index !== current && index < current ? "-translate-x-full" : "" + } w-full transition-all duration-700`} + > + {!item.video ? item.element : null} + {index === current && item.video ? item.element : null} +
+ {item.show ? ( +
+

{data.title}

+

{data.description}

+
+ ) : null} +
+
+ ))} +
+ {timer ? ( + + ) : ( +
+ )} + {fullscreen ? ( + + ) : ( +
+ )} +
+ +
+ {arrows ? ( + + + + + ) : null} +
+
+ {dots ? ( +
+ {data.map((item, index) => ( +
+ ) : null} +
+
+ ); +} \ No newline at end of file diff --git a/components/Testimonial.js b/components/Testimonial.js deleted file mode 100644 index cdc3717418d..00000000000 --- a/components/Testimonial.js +++ /dev/null @@ -1,35 +0,0 @@ -import Paragraph from "./typography/Paragraph"; - -export default function Testimonial({ - className = '', - text, - authorName, - authorDescription, - authorAvatar, -}) { - return ( -
  • -
    -
    - - - - - {text} - -
    -
    -
    -
    - {authorName}/ -
    -
    -

    {authorName}

    -

    {authorDescription}

    -
    -
    -
    -
    -
    • - ) -} diff --git a/pages/index.js b/pages/index.js index 30e7afa45ab..e982035ccbb 100644 --- a/pages/index.js +++ b/pages/index.js @@ -12,7 +12,6 @@ import AxwayLogo from '../components/logos/Axway' import SlackLogo from '../components/logos/Slack' import SalesforceLogo from '../components/logos/Salesforce' import SapLogo from '../components/logos/SAP' -import Testimonial from '../components/Testimonial' import Heading from '../components/typography/Heading' import Paragraph from '../components/typography/Paragraph' import TextLink from '../components/typography/TextLink' @@ -24,6 +23,7 @@ import GoogleCalendarButton from '../components/buttons/GoogleCalendarButton'; import ICSFileButton from '../components/buttons/ICSFileButton'; import SubscribeButton from '../components/buttons/SubscribeButton'; import NewsroomSection from '../components/newsroom/NewsroomSection' +import Carousel from '../components/Carousel' function HomePage() { return ( @@ -221,34 +221,90 @@ function HomePage() { What the experts are saying -
      - - - - + +
      +
      +
      +
      + testimonial +

      Microservices underline the need for event-based communication in distributed architectures. AsyncAPI brings the richness of the REST API ecosystem to asynchronous APIs.

      + +

      Matt McLarty

      +

      Global Leader of API Strategy at MuleSoft

      +
      +
      +
      +
      + + ), + }, + { + element: ( +
      +
      +
      +
      +
      + testimonial +

      Event-driven APIs need love too! AsyncAPI brings the many benefits of a machine/human readable specification to these nuanced approaches.

      + +

      Bill Doerrfeld

      +

      Editor in Chief at Nordic APIs

      +
      +
      +
      +
      +
      + ), + }, + { + element: ( +
      +
      +
      +
      +
      + testimonial +

      Developers need to be able to quickly and consistently create event-driven applications that provide business value and react to customer needs in realtime. I can't count how many times I've heard developers ask for OpenAPI/Swagger style tools for the asynchronous and event driven world, and that is exactly what the AsyncAPI initiative is making a reality.

      + +

      Jonathan Schabowsky

      +

      Sr. Architect, Office of the CTO at Solace

      +
      +
      +
      +
      +
      + ), + }, + { + element: ( +
      +
      +
      +
      +
      + testimonial +

      We’ve been focusing on event-driven APIs since 2014 and thank the AsyncAPI contributors everyday for driving the community towards common standards.

      + +

      Eric Horesnyi

      +

      CEO at Streamdata.io

      +
      +
      +
      +
      +
      + ), + }, + ]} />