omswebsite-backups/oms-website-nextjs
1
0
Fork 0
mirror of https://github.com/OwethuManagedServices/oms-website-nextjs.git synced 2025-12-17 18:58:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix : Added a scroller on ClientLogoSection

Browse Source
This commit is contained in:
Lebohang-OMSAfrica
2025-09-17 10:44:00 +02:00
parent 2fade93bf7
commit 4e6d0a5512
1 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/(website)/_components/ClientLogosSection.tsx
View File

@ -23,8 +23,6 @@ const ClientLogosSection = ({
speed = 1, speed = 1,
squareSize = 120, squareSize = 120,
}: ClientLogosSectionProps) => { }: ClientLogosSectionProps) => {
if (clients.length === 0) return null;
const extendedClients = [...clients, ...clients]; const extendedClients = [...clients, ...clients];
const squareDim = `${squareSize}px`; const squareDim = `${squareSize}px`;
const padding = Math.round(squareSize / 6); const padding = Math.round(squareSize / 6);
@ -40,19 +38,16 @@ const ClientLogosSection = ({
setPaused(true); setPaused(true);
// Scroll manually
scrollRef.current.scrollBy({ scrollRef.current.scrollBy({
left: dir === "left" ? -200 : 200, left: dir === "left" ? -200 : 200,
behavior: "smooth", behavior: "smooth",
}); });
// Clear previous timeout and resume after 3 seconds
clearTimeout(resumeTimeout); clearTimeout(resumeTimeout);
resumeTimeout = setTimeout(() => { resumeTimeout = setTimeout(() => {
setPaused(false); setPaused(false);
}, 3000); }, 3000);
// Set the direction for automatic scroll after pause
setDirection(dir === "left" ? "right" : "left"); setDirection(dir === "left" ? "right" : "left");
}; };
@ -66,10 +61,14 @@ const ClientLogosSection = ({
if (!paused) { if (!paused) {
if (direction === "left") { if (direction === "left") {
container.scrollLeft += speed; container.scrollLeft += speed;
if (container.scrollLeft >= container.scrollWidth / 2) container.scrollLeft = 0; if (container.scrollLeft >= container.scrollWidth / 2) {
container.scrollLeft = 0;
}
} else { } else {
container.scrollLeft -= speed; container.scrollLeft -= speed;
if (container.scrollLeft <= 0) container.scrollLeft = container.scrollWidth / 2; if (container.scrollLeft <= 0) {
container.scrollLeft = container.scrollWidth / 2;
}
} }
} }
animationFrame = requestAnimationFrame(step); animationFrame = requestAnimationFrame(step);
@ -80,6 +79,9 @@ const ClientLogosSection = ({
return () => cancelAnimationFrame(animationFrame); return () => cancelAnimationFrame(animationFrame);
}, [direction, paused, speed]); }, [direction, paused, speed]);
// ✅ Safe early return after hooks
if (clients.length === 0) return null;
return ( return (
<section className="py-16 md:py-20 bg-background overflow-hidden"> <section className="py-16 md:py-20 bg-background overflow-hidden">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center"> <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
@ -156,6 +158,8 @@ const ClientLogosSection = ({
); );
}; };
export default ClientLogosSection;
export const defaultClients: Client[] = [ export const defaultClients: Client[] = [
{ name: "ABSA", logoUrl: "/images/absa.png" }, { name: "ABSA", logoUrl: "/images/absa.png" },
{ name: "SYBRIN", logoUrl: "/images/sybrin.svg" }, { name: "SYBRIN", logoUrl: "/images/sybrin.svg" },
@ -166,4 +170,4 @@ export const defaultClients: Client[] = [
{ name: "TOYOTA", logoUrl: "/images/toyota-logo.png" }, { name: "TOYOTA", logoUrl: "/images/toyota-logo.png" },
]; ];
export default ClientLogosSection;