-
+
diff --git a/src/components/drive/components/LinkTo.tsx b/src/components/drive/components/LinkTo.tsx
index 8ebc80bd0..d55c52f65 100644
--- a/src/components/drive/components/LinkTo.tsx
+++ b/src/components/drive/components/LinkTo.tsx
@@ -8,9 +8,9 @@ interface LinkTo {
export const LinkTo = ({ text, linkToRedirect }: LinkTo) => {
return (
-
-
{text}
-
+
+
{text}
+
);
};
diff --git a/src/components/shared/sections/RelationalLinks.tsx b/src/components/shared/sections/RelationalLinks.tsx
index dd3461449..5fb97f850 100644
--- a/src/components/shared/sections/RelationalLinks.tsx
+++ b/src/components/shared/sections/RelationalLinks.tsx
@@ -1,5 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
+import { useRouter } from 'next/router';
import { LinkTo } from '../../drive/components/LinkTo';
+import { CaretLeft, CaretRight } from '@phosphor-icons/react';
interface Card {
cta: string;
@@ -24,30 +26,142 @@ const shuffleData = (data: Card[]): Card[] => {
const RelationalLinks = ({ textContent }: RelationalLinksProps) => {
const [cards, setCards] = useState
([]);
+ const router = useRouter();
+
+ const scrollContainerRef = useRef(null);
+ const [scrollState, setScrollState] = useState({
+ canGoLeft: false,
+ canGoRight: true,
+ });
+ const [isMobile, setIsMobile] = useState(false);
+
+ useEffect(() => {
+ const checkIsMobile = () => {
+ setIsMobile(window.innerWidth < 1024);
+ };
+ checkIsMobile();
+ window.addEventListener('resize', checkIsMobile);
+ return () => window.removeEventListener('resize', checkIsMobile);
+ }, []);
useEffect(() => {
if (textContent?.links) {
- const shuffledLinks = shuffleData(textContent.links);
- setCards(shuffledLinks.slice(0, 3));
+ const filteredLinks = textContent.links.filter((link) => link.link !== router.asPath);
+ const shuffledLinks = shuffleData(filteredLinks);
+ setCards(shuffledLinks.slice(0, 9));
}
- }, [textContent]);
+ }, [textContent, router.asPath]);
+
+ const updateScrollButtons = () => {
+ if (scrollContainerRef.current === null) return;
+ const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+
+ const maxScrollLeft = scrollWidth - clientWidth;
+
+ setScrollState({
+ canGoLeft: scrollLeft > 2,
+ canGoRight: scrollLeft < maxScrollLeft - 2,
+ });
+ };
+
+ const getScrollAmount = () => {
+ const cardWidth = isMobile ? 300 : 350;
+ const gap = 24; // gap-6 refers to 1.5rem which is 24px
+ return cardWidth + gap;
+ };
+
+ const scrollLeft = () => {
+ if (scrollContainerRef.current === null) return;
+ scrollContainerRef.current.scrollBy({
+ left: -getScrollAmount(),
+ behavior: 'smooth',
+ });
+ };
+
+ const scrollRight = () => {
+ if (scrollContainerRef.current === null) return;
+ scrollContainerRef.current.scrollBy({
+ left: getScrollAmount(),
+ behavior: 'smooth',
+ });
+ };
+
+ useEffect(() => {
+ const scrollContainer = scrollContainerRef.current;
+ if (scrollContainer === null) return;
+
+ updateScrollButtons();
+ scrollContainer.addEventListener('scroll', updateScrollButtons);
+
+ const resizeObserver = new ResizeObserver(updateScrollButtons);
+ resizeObserver.observe(scrollContainer);
+
+ return () => {
+ scrollContainer.removeEventListener('scroll', updateScrollButtons);
+ resizeObserver.disconnect();
+ };
+ }, [isMobile, cards]);
if (cards.length === 0) return null;
return (
-
-
- {textContent.title}
-
-
- {cards.map((card) => (
-
-
+
+
+
+ {textContent.title}
+
+
+
+ {cards.map((card) => (
+
+ ))}
+
+
+
);