From 622c655e345f1a7ae4225b91dc07ad20224ddeaa Mon Sep 17 00:00:00 2001 From: Ashutosh Date: Tue, 23 May 2023 17:34:41 +0530 Subject: [PATCH 01/10] feat: add testimonial carousel --- components/Testimonial.js | 133 +++++++++++++++++++++++++++++--------- pages/index.js | 31 +-------- 2 files changed, 102 insertions(+), 62 deletions(-) diff --git a/components/Testimonial.js b/components/Testimonial.js index cdc3717418d..8ff4e8e476b 100644 --- a/components/Testimonial.js +++ b/components/Testimonial.js @@ -1,35 +1,104 @@ -import Paragraph from "./typography/Paragraph"; - -export default function Testimonial({ - className = '', - text, - authorName, - authorDescription, - authorAvatar, -}) { +const testimonials = [ + { + imgUrl: '/img/testimonials/matt-mclarty.jpg', + name: 'Matt McLarty', + salutation: 'Global Leader of API Strategy at MuleSoft', + text: 'Microservices underline the need for event-based communication in distributed architectures. AsyncAPI brings the richness of the REST API ecosystem to asynchronous APIs.', + }, + { + imgUrl: '/img/testimonials/bill-doerrfeld.jpg', + name: 'Bill Doerrfeld', + salutation: 'Editor in Chief at Nordic APIs', + text: 'Microservices underline the need for event-based communication in distributed architectures. AsyncAPI brings the richness of the REST API ecosystem to asynchronous APIs.', + }, + { + imgUrl: '/img/testimonials/jonathan-schabowsky.jpg', + name: 'Jonathan Schabowsky', + salutation: 'Sr. Architect, Office of the CTO at Solace', + text: "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.", + }, + { + imgUrl: '/img/testimonials/eric-horesnyi.jpg', + name: 'Eric Horesnyi', + salutation: 'CEO at Streamdata.io', + text: 'We’ve been focusing on event-driven APIs since 2014 and thank the AsyncAPI contributors everyday for driving the community towards common standards.', + }, +]; +import React, { useState } from 'react'; + +const Testimonial = () => { + const len = testimonials.length; + const [activeIndex, setActive] = useState(0); + + const getStyle = (idx) => { + const distanceLeft = idx - activeIndex; + const distanceRight = + distanceLeft > 0 ? distanceLeft - len : distanceLeft + len; + const distance = + Math.abs(distanceLeft) > Math.abs(distanceRight) + ? distanceRight + : distanceLeft; + + const styleObj = {}; + + if (distance === 0) { + styleObj.left = '33.3%'; + styleObj.zIndex = 1; + styleObj.opacity = 1; + styleObj.transform = 'scale(1)'; + } else { + styleObj.left = + distance > 0 ? `${12.7 + distance * 40}%` : `${54 + distance * 40}%`; + } + + if (Math.abs(distance) >= 2) { + styleObj.opacity = 0; + styleObj.transform = 'scale(0)'; + } + + return styleObj; + }; + return ( -
  • -
    -
    - - - - - {text} - -
    -
    -
    -
    - {authorName}/ -
    -
    -

    {authorName}

    -

    {authorDescription}

    +
    +
    + {testimonials.map(({ imgUrl, name, salutation, text }, index) => ( +
    setActive(index)} + style={getStyle(index)} + > +
    + {name}
    +

    + {name} +

    +

    + {salutation} +

    +

    + {text} +

    -
    -
    -
    • - ) -} + ))} + +
    + {testimonials.map((value, index) => ( +
    setActive(index)} + /> + ))} +
    +
    + ); +}; + +export default Testimonial; diff --git a/pages/index.js b/pages/index.js index 30e7afa45ab..fc7f97fdc58 100644 --- a/pages/index.js +++ b/pages/index.js @@ -221,36 +221,7 @@ function HomePage() { What the experts are saying - + From 43a69d4494ad4f9269fe30de46a026d01d2110a4 Mon Sep 17 00:00:00 2001 From: Ashutosh Date: Thu, 25 May 2023 12:00:51 +0530 Subject: [PATCH 02/10] fix: add arrows for navigation --- components/Testimonial.js | 50 +++++++++++++++++++++++++++++---------- package-lock.json | 15 ++++++++++++ package.json | 5 ++-- pages/index.js | 2 +- 4 files changed, 56 insertions(+), 16 deletions(-) diff --git a/components/Testimonial.js b/components/Testimonial.js index 8ff4e8e476b..05524983727 100644 --- a/components/Testimonial.js +++ b/components/Testimonial.js @@ -1,3 +1,5 @@ +import { FaArrowLeft, FaArrowRight } from 'react-icons/fa' + const testimonials = [ { imgUrl: '/img/testimonials/matt-mclarty.jpg', @@ -42,13 +44,14 @@ const Testimonial = () => { const styleObj = {}; if (distance === 0) { - styleObj.left = '33.3%'; + styleObj.left = '30%'; styleObj.zIndex = 1; styleObj.opacity = 1; styleObj.transform = 'scale(1)'; } else { styleObj.left = - distance > 0 ? `${12.7 + distance * 40}%` : `${54 + distance * 40}%`; + distance > 0 ? `${12 + distance * 35}%` : `${48 + distance * 35}%`; + styleObj.filter = 'blur(2px)'; } if (Math.abs(distance) >= 2) { @@ -59,18 +62,30 @@ const Testimonial = () => { return styleObj; }; + const goToPrevious = () => { + setActive((prevIndex) => (prevIndex === 0 ? len - 1 : prevIndex - 1)); + }; + + const goToNext = () => { + setActive((prevIndex) => (prevIndex === len - 1 ? 0 : prevIndex + 1)); + }; + return ( -
    -
    - {testimonials.map(({ imgUrl, name, salutation, text }, index) => ( -
    setActive(index)} - style={getStyle(index)} +
    +
    + +
    +
    +
    + {testimonials.map(({ imgUrl, name, salutation, text }, index) => ( +
    setActive(index)} + style={getStyle(index)} > -
    - {name} +
    + {name}

    {name} @@ -82,9 +97,11 @@ const Testimonial = () => { {text}

    - ))} + ))} +
    + {testimonials.map((value, index) => (
    { /> ))}
    +
    +
    + +
    ); }; diff --git a/package-lock.json b/package-lock.json index 592915f329c..1e4a5a09111 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50,6 +50,7 @@ "react-dom": "^17.0.2", "react-ga": "^3.1.2", "react-gtm-module": "^2.0.11", + "react-icons": "^4.8.0", "react-scrollspy": "^3.4.2", "react-syntax-highlighter": "12.2.1", "react-text-truncate": "^0.16.0", @@ -6938,6 +6939,14 @@ "resolved": "https://registry.npmjs.org/react-gtm-module/-/react-gtm-module-2.0.11.tgz", "integrity": "sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw==" }, + "node_modules/react-icons": { + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz", + "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-proptype-conditional-require": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz", @@ -14312,6 +14321,12 @@ "resolved": "https://registry.npmjs.org/react-gtm-module/-/react-gtm-module-2.0.11.tgz", "integrity": "sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw==" }, + "react-icons": { + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz", + "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==", + "requires": {} + }, "react-proptype-conditional-require": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz", diff --git a/package.json b/package.json index 9b946c3a644..c83b727f352 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "@monaco-editor/react": "^3.3.0", "@next/mdx": "^9.4.2", "@octokit/graphql": "^4.6.0", + "@slack/web-api": "^6.5.1", "@tailwindcss/aspect-ratio": "^0.4.0", "@tailwindcss/forms": "^0.5.2", "@tailwindcss/line-clamp": "^0.4.0", @@ -75,6 +76,7 @@ "react-dom": "^17.0.2", "react-ga": "^3.1.2", "react-gtm-module": "^2.0.11", + "react-icons": "^4.8.0", "react-scrollspy": "^3.4.2", "react-syntax-highlighter": "12.2.1", "react-text-truncate": "^0.16.0", @@ -90,8 +92,7 @@ "swiper": "^8.3.2", "tailwind-merge": "^1.3.0", "tailwindcss": "^3.1.4", - "yaml": "^2.2.2", - "@slack/web-api": "^6.5.1" + "yaml": "^2.2.2" }, "devDependencies": { "@netlify/functions": "^1.4.0", diff --git a/pages/index.js b/pages/index.js index fc7f97fdc58..f1c97c032c2 100644 --- a/pages/index.js +++ b/pages/index.js @@ -218,7 +218,7 @@ function HomePage() { - + What the experts are saying From db3beea1a484985c268c51dc7a9e44067c8e8c88 Mon Sep 17 00:00:00 2001 From: Lucif3r-in Date: Sun, 28 May 2023 17:47:10 +0530 Subject: [PATCH 03/10] fix: fix nav arrow && chore: add content to config --- components/Testimonial.js | 37 ++++++----------------------------- config/content/Testimonial.js | 28 ++++++++++++++++++++++++++ 2 files changed, 34 insertions(+), 31 deletions(-) create mode 100644 config/content/Testimonial.js diff --git a/components/Testimonial.js b/components/Testimonial.js index 05524983727..fcc0f930659 100644 --- a/components/Testimonial.js +++ b/components/Testimonial.js @@ -1,35 +1,10 @@ import { FaArrowLeft, FaArrowRight } from 'react-icons/fa' -const testimonials = [ - { - imgUrl: '/img/testimonials/matt-mclarty.jpg', - name: 'Matt McLarty', - salutation: 'Global Leader of API Strategy at MuleSoft', - text: 'Microservices underline the need for event-based communication in distributed architectures. AsyncAPI brings the richness of the REST API ecosystem to asynchronous APIs.', - }, - { - imgUrl: '/img/testimonials/bill-doerrfeld.jpg', - name: 'Bill Doerrfeld', - salutation: 'Editor in Chief at Nordic APIs', - text: 'Microservices underline the need for event-based communication in distributed architectures. AsyncAPI brings the richness of the REST API ecosystem to asynchronous APIs.', - }, - { - imgUrl: '/img/testimonials/jonathan-schabowsky.jpg', - name: 'Jonathan Schabowsky', - salutation: 'Sr. Architect, Office of the CTO at Solace', - text: "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.", - }, - { - imgUrl: '/img/testimonials/eric-horesnyi.jpg', - name: 'Eric Horesnyi', - salutation: 'CEO at Streamdata.io', - text: 'We’ve been focusing on event-driven APIs since 2014 and thank the AsyncAPI contributors everyday for driving the community towards common standards.', - }, -]; +import TestimonialData from '../config/content/Testimonial'; import React, { useState } from 'react'; const Testimonial = () => { - const len = testimonials.length; + const len = TestimonialData.length; const [activeIndex, setActive] = useState(0); const getStyle = (idx) => { @@ -72,12 +47,12 @@ const Testimonial = () => { return (
    -
    +
    - {testimonials.map(({ imgUrl, name, salutation, text }, index) => ( + {TestimonialData.map(({ imgUrl, name, salutation, text }, index) => (
    {
    - {testimonials.map((value, index) => ( + {TestimonialData.map((value, index) => (
    {
    diff --git a/config/content/Testimonial.js b/config/content/Testimonial.js new file mode 100644 index 00000000000..dfc22aa71aa --- /dev/null +++ b/config/content/Testimonial.js @@ -0,0 +1,28 @@ +const TestimonialData = [ + { + imgUrl: '/img/testimonials/matt-mclarty.jpg', + name: 'Matt McLarty', + salutation: 'Global Leader of API Strategy at MuleSoft', + text: 'Microservices underline the need for event-based communication in distributed architectures. AsyncAPI brings the richness of the REST API ecosystem to asynchronous APIs.', + }, + { + imgUrl: '/img/testimonials/bill-doerrfeld.jpg', + name: 'Bill Doerrfeld', + salutation: 'Editor in Chief at Nordic APIs', + text: 'Microservices underline the need for event-based communication in distributed architectures. AsyncAPI brings the richness of the REST API ecosystem to asynchronous APIs.', + }, + { + imgUrl: '/img/testimonials/jonathan-schabowsky.jpg', + name: 'Jonathan Schabowsky', + salutation: 'Sr. Architect, Office of the CTO at Solace', + text: "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.", + }, + { + imgUrl: '/img/testimonials/eric-horesnyi.jpg', + name: 'Eric Horesnyi', + salutation: 'CEO at Streamdata.io', + text: 'We’ve been focusing on event-driven APIs since 2014 and thank the AsyncAPI contributors everyday for driving the community towards common standards.', + }, + ]; + + export default TestimonialData \ No newline at end of file From ef4e468917586f939d62bd054f9c2a2bb49c5ff2 Mon Sep 17 00:00:00 2001 From: Lucif3r-in Date: Sun, 28 May 2023 18:03:03 +0530 Subject: [PATCH 04/10] fix: added comments explaining the logic --- components/Testimonial.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/components/Testimonial.js b/components/Testimonial.js index fcc0f930659..72131f69e9c 100644 --- a/components/Testimonial.js +++ b/components/Testimonial.js @@ -7,6 +7,9 @@ const Testimonial = () => { const len = TestimonialData.length; const [activeIndex, setActive] = useState(0); + //The "distanceLeft" variable represents the distance of a testimonial from the active index when moving to the left (previous + //testimonials). + // Similarly distanceRight is also checked. const getStyle = (idx) => { const distanceLeft = idx - activeIndex; const distanceRight = @@ -17,18 +20,27 @@ const Testimonial = () => { : distanceLeft; const styleObj = {}; - + // If the distance is 0 (testimonial is the active one): Set left to '30%' to position the testimonial in the center.Set zIndex to 1 + //to ensure the active testimonial is displayed above others.Set opacity to 1 to make it fully visible. + // Set transform to 'scale(1)' to maintain the original scale. if (distance === 0) { styleObj.left = '30%'; styleObj.zIndex = 1; styleObj.opacity = 1; styleObj.transform = 'scale(1)'; - } else { + } else + // If the distance is not 0 (testimonial is not the active one): + // Set left dynamically based on the distance to create a sliding effect. Testimonials to the right will have increasing left values, + // while testimonials to the left will have decreasing left values. + // Set filter to 'blur(2px)' to apply a blur effect to non-active testimonials. + { styleObj.left = distance > 0 ? `${12 + distance * 35}%` : `${48 + distance * 35}%`; styleObj.filter = 'blur(2px)'; } - + // If the absolute value of the distance is greater than or equal to 2: + // Set opacity to 0 to make the testimonial fully transparent. + // Set transform to 'scale(0)' to scale the testimonial down to 0, making it invisible. if (Math.abs(distance) >= 2) { styleObj.opacity = 0; styleObj.transform = 'scale(0)'; From a531ff0da431d841560b1fc6de4dfe8c24ae6c32 Mon Sep 17 00:00:00 2001 From: Lucif3r-in Date: Thu, 1 Jun 2023 12:06:10 +0530 Subject: [PATCH 05/10] fix: change card structure --- components/Testimonial.js | 135 +++++++++++++------------------------- 1 file changed, 46 insertions(+), 89 deletions(-) diff --git a/components/Testimonial.js b/components/Testimonial.js index 72131f69e9c..8615de90c94 100644 --- a/components/Testimonial.js +++ b/components/Testimonial.js @@ -1,109 +1,66 @@ -import { FaArrowLeft, FaArrowRight } from 'react-icons/fa' +import { FaArrowLeft, FaArrowRight } from 'react-icons/fa'; +import { useState } from 'react'; +import testimonials from '../config/content/Testimonial'; -import TestimonialData from '../config/content/Testimonial'; -import React, { useState } from 'react'; - -const Testimonial = () => { - const len = TestimonialData.length; - const [activeIndex, setActive] = useState(0); - - //The "distanceLeft" variable represents the distance of a testimonial from the active index when moving to the left (previous - //testimonials). - // Similarly distanceRight is also checked. - const getStyle = (idx) => { - const distanceLeft = idx - activeIndex; - const distanceRight = - distanceLeft > 0 ? distanceLeft - len : distanceLeft + len; - const distance = - Math.abs(distanceLeft) > Math.abs(distanceRight) - ? distanceRight - : distanceLeft; - - const styleObj = {}; - // If the distance is 0 (testimonial is the active one): Set left to '30%' to position the testimonial in the center.Set zIndex to 1 - //to ensure the active testimonial is displayed above others.Set opacity to 1 to make it fully visible. - // Set transform to 'scale(1)' to maintain the original scale. - if (distance === 0) { - styleObj.left = '30%'; - styleObj.zIndex = 1; - styleObj.opacity = 1; - styleObj.transform = 'scale(1)'; - } else - // If the distance is not 0 (testimonial is not the active one): - // Set left dynamically based on the distance to create a sliding effect. Testimonials to the right will have increasing left values, - // while testimonials to the left will have decreasing left values. - // Set filter to 'blur(2px)' to apply a blur effect to non-active testimonials. - { - styleObj.left = - distance > 0 ? `${12 + distance * 35}%` : `${48 + distance * 35}%`; - styleObj.filter = 'blur(2px)'; - } - // If the absolute value of the distance is greater than or equal to 2: - // Set opacity to 0 to make the testimonial fully transparent. - // Set transform to 'scale(0)' to scale the testimonial down to 0, making it invisible. - if (Math.abs(distance) >= 2) { - styleObj.opacity = 0; - styleObj.transform = 'scale(0)'; - } - - return styleObj; - }; +const TestimonialCarousel = () => { + const [activeIndex, setActiveIndex] = useState(0); + const len = testimonials.length; const goToPrevious = () => { - setActive((prevIndex) => (prevIndex === 0 ? len - 1 : prevIndex - 1)); + setActiveIndex((prevIndex) => (prevIndex === 0 ? len - 1 : prevIndex - 1)); }; const goToNext = () => { - setActive((prevIndex) => (prevIndex === len - 1 ? 0 : prevIndex + 1)); + setActiveIndex((prevIndex) => (prevIndex === len - 1 ? 0 : prevIndex + 1)); + }; + + const goToIndex = (index) => { + setActiveIndex(index); }; return ( -
    -
    +
    +
    -
    -
    - {TestimonialData.map(({ imgUrl, name, salutation, text }, index) => ( -
    setActive(index)} - style={getStyle(index)} - > -
    - {name} +
    +
    + {testimonials.map((testimonial, index) => ( +
    +
    + {testimonial.name} +
    +

    + {testimonial.name} +

    +

    + {testimonial.salutation} +

    +

    + {testimonial.text} +

    -

    - {name} -

    -

    - {salutation} -

    -

    - {text} -

    -
    - ))} - -
    -
    - - {TestimonialData.map((value, index) => ( + ))} +
    +
    + {testimonials.map((testimonial, index) => (
    setActive(index)} + className={`h-2 w-2 rounded-full mx-1 cursor-pointer ${ + activeIndex === index ? 'bg-primary-500' : 'bg-gray-300' + }`} + onClick={() => goToIndex(index)} /> ))}
    -
    @@ -112,4 +69,4 @@ const Testimonial = () => { ); }; -export default Testimonial; +export default TestimonialCarousel; From fafd00e77f8341f2be185096e63e136420510a78 Mon Sep 17 00:00:00 2001 From: Lucif3r-in Date: Sun, 4 Jun 2023 14:30:28 +0530 Subject: [PATCH 06/10] fix: change arrow styles && chore: store TestimonialData --- components/Testimonial.js | 13 +++++++------ .../Testimonial.js => components/TestimonialData.js | 2 +- 2 files changed, 8 insertions(+), 7 deletions(-) rename config/content/Testimonial.js => components/TestimonialData.js (88%) diff --git a/components/Testimonial.js b/components/Testimonial.js index 8615de90c94..8fd27cf65d1 100644 --- a/components/Testimonial.js +++ b/components/Testimonial.js @@ -1,6 +1,7 @@ -import { FaArrowLeft, FaArrowRight } from 'react-icons/fa'; +import ArrowLeft from '../components/icons/ArrowLeft' +import ArrowRight from '../components/icons/ArrowRight' import { useState } from 'react'; -import testimonials from '../config/content/Testimonial'; +import testimonials from './TestimonialData'; const TestimonialCarousel = () => { const [activeIndex, setActiveIndex] = useState(0); @@ -20,8 +21,8 @@ const TestimonialCarousel = () => { return (
    -
    - +
    +
    @@ -41,7 +42,7 @@ const TestimonialCarousel = () => {

    {testimonial.salutation}

    -

    +

    {testimonial.text}

    @@ -63,7 +64,7 @@ const TestimonialCarousel = () => { className="h-8 w-8 rounded-full bg-[#ddd] cursor-pointer mb-2 z-10 absolute right-0 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100" onClick={goToNext} > - +
    ); diff --git a/config/content/Testimonial.js b/components/TestimonialData.js similarity index 88% rename from config/content/Testimonial.js rename to components/TestimonialData.js index dfc22aa71aa..ce62e891848 100644 --- a/config/content/Testimonial.js +++ b/components/TestimonialData.js @@ -9,7 +9,7 @@ const TestimonialData = [ imgUrl: '/img/testimonials/bill-doerrfeld.jpg', name: 'Bill Doerrfeld', salutation: 'Editor in Chief at Nordic APIs', - text: 'Microservices underline the need for event-based communication in distributed architectures. AsyncAPI brings the richness of the REST API ecosystem to asynchronous APIs.', + text: 'Event-driven APIs need love too! AsyncAPI brings the many benefits of a machine/human readable specification to these nuanced approaches.', }, { imgUrl: '/img/testimonials/jonathan-schabowsky.jpg', From 00af294a20da2faa6acc09ba36ab19fd4168fe7e Mon Sep 17 00:00:00 2001 From: Lucif3r-in Date: Sun, 4 Jun 2023 14:38:43 +0530 Subject: [PATCH 07/10] feat: add auto scroll to carousels --- components/Testimonial.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/components/Testimonial.js b/components/Testimonial.js index 8fd27cf65d1..77e44a49d5a 100644 --- a/components/Testimonial.js +++ b/components/Testimonial.js @@ -1,6 +1,6 @@ import ArrowLeft from '../components/icons/ArrowLeft' import ArrowRight from '../components/icons/ArrowRight' -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import testimonials from './TestimonialData'; const TestimonialCarousel = () => { @@ -19,6 +19,13 @@ const TestimonialCarousel = () => { setActiveIndex(index); }; + useEffect(() => { + const interval = setInterval(goToNext, 3000); + return () => { + clearInterval(interval); + }; + }, []); + return (
    From f7e677cb6d1c2356b47833278adfe5881b6bb07c Mon Sep 17 00:00:00 2001 From: Lucif3r-in Date: Sun, 1 Oct 2023 15:28:03 +0530 Subject: [PATCH 08/10] fix: suggested changes --- components/Testimonial.js | 48 +++--- package-lock.json | 353 ++++++++++++++++++++++++++------------ 2 files changed, 271 insertions(+), 130 deletions(-) diff --git a/components/Testimonial.js b/components/Testimonial.js index 77e44a49d5a..de3e7b9a065 100644 --- a/components/Testimonial.js +++ b/components/Testimonial.js @@ -20,11 +20,11 @@ const TestimonialCarousel = () => { }; useEffect(() => { - const interval = setInterval(goToNext, 3000); + const interval = setInterval(goToNext, 10000); return () => { clearInterval(interval); }; - }, []); + }, [activeIndex]); return (
    @@ -32,29 +32,29 @@ const TestimonialCarousel = () => {
    -
    - {testimonials.map((testimonial, index) => ( -
    -
    - {testimonial.name} +
    + {testimonials.map((testimonial, index) => ( +
    +
    + {testimonial.name} +
    +

    + {testimonial.name} +

    +

    + {testimonial.salutation} +

    +

    + {testimonial.text} +

    -

    - {testimonial.name} -

    -

    - {testimonial.salutation} -

    -

    - {testimonial.text} -

    -
    - ))} -
    + ))} +
    {testimonials.map((testimonial, index) => (
    Date: Sun, 1 Oct 2023 15:31:25 +0530 Subject: [PATCH 09/10] Revert "fix: suggested changes" This reverts commit f7e677cb6d1c2356b47833278adfe5881b6bb07c. --- components/Testimonial.js | 48 +++--- package-lock.json | 353 ++++++++++++-------------------------- 2 files changed, 130 insertions(+), 271 deletions(-) diff --git a/components/Testimonial.js b/components/Testimonial.js index de3e7b9a065..77e44a49d5a 100644 --- a/components/Testimonial.js +++ b/components/Testimonial.js @@ -20,11 +20,11 @@ const TestimonialCarousel = () => { }; useEffect(() => { - const interval = setInterval(goToNext, 10000); + const interval = setInterval(goToNext, 3000); return () => { clearInterval(interval); }; - }, [activeIndex]); + }, []); return (
    @@ -32,29 +32,29 @@ const TestimonialCarousel = () => {
    -
    - {testimonials.map((testimonial, index) => ( -
    -
    - {testimonial.name} -
    -

    - {testimonial.name} -

    -

    - {testimonial.salutation} -

    -

    - {testimonial.text} -

    +
    + {testimonials.map((testimonial, index) => ( +
    +
    + {testimonial.name}
    - ))} -
    +

    + {testimonial.name} +

    +

    + {testimonial.salutation} +

    +

    + {testimonial.text} +

    +
    + ))} +
    {testimonials.map((testimonial, index) => (
    Date: Sun, 1 Oct 2023 15:34:57 +0530 Subject: [PATCH 10/10] fix: made changes --- components/Testimonial.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Testimonial.js b/components/Testimonial.js index 77e44a49d5a..52b48f2a2ec 100644 --- a/components/Testimonial.js +++ b/components/Testimonial.js @@ -20,11 +20,11 @@ const TestimonialCarousel = () => { }; useEffect(() => { - const interval = setInterval(goToNext, 3000); + const interval = setInterval(goToNext, 10000); return () => { clearInterval(interval); }; - }, []); + }, [activeIndex]); return (