Count testimonials to fix grid layout (why was this hardcoded??)

httptoolkit · Dec 5, 2024 · f4752cc · f4752cc
1 parent a53347c
commit f4752cc
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/src/components/common-sections/testimonials/components/marquee.tsx b/src/components/common-sections/testimonials/components/marquee.tsx
@@ -13,9 +13,13 @@ const Marquee = dynamic(() => import('react-fast-marquee').then(e => e.default),
 
 interface MarqueeWrapperProps {
   children: ReactNode;
+  columnsCount: number;
 }
 
-export const MarqueeWrapper = ({ children }: MarqueeWrapperProps) => {
+export const MarqueeWrapper = ({
+  children,
+  columnsCount
+}: MarqueeWrapperProps) => {
   const isMobile = useIsMobile();
   const [isRunning, setIsRunning] = useState(true);
 
@@ -29,7 +33,11 @@ export const MarqueeWrapper = ({ children }: MarqueeWrapperProps) => {
 
   return (
     <Marquee pauseOnHover={!isMobile} play={isRunning}>
-      <StyledTestimonialGrid onTouchStart={pause} onTouchEnd={play}>
+      <StyledTestimonialGrid
+        $columnsCount={columnsCount}
+        onTouchStart={pause}
+        onTouchEnd={play}
+      >
         {children}
       </StyledTestimonialGrid>
     </Marquee>

diff --git a/src/components/common-sections/testimonials/components/testimonials.tsx b/src/components/common-sections/testimonials/components/testimonials.tsx
@@ -10,7 +10,12 @@ import { getGithubDownloadStats } from '@/lib/services/get-github-download-stats
 export const TestimonialsGrid = async () => {
   const userDownloads = await getGithubDownloadStats();
   const testimonalsData = allTestimonials.concat(allTestimonials);
-  const testimonialsChunkedData = Array.from({ length: Math.ceil(testimonalsData.length / 3) }, (_, index) =>
+
+  const chunkCount = Math.ceil(testimonalsData.length / 3);
+
+  const testimonialsChunkedData = Array.from({
+    length: Math.ceil(testimonalsData.length / 3)
+  }, (_, index) =>
     testimonalsData.slice(index * 3, index * 3 + 3),
   );
 
@@ -24,7 +29,7 @@ export const TestimonialsGrid = async () => {
         $align="center"
       />
 
-      <MarqueeWrapper>
+      <MarqueeWrapper columnsCount={chunkCount}>
         {testimonialsChunkedData.map((testimonialChunk, rowIndex) => (
           <div key={rowIndex}>
             {testimonialChunk.map((testimonial, colIndex) => {

diff --git a/src/components/common-sections/testimonials/testimonials.styles.ts b/src/components/common-sections/testimonials/testimonials.styles.ts
@@ -57,8 +57,10 @@ export const StyledAuthorDetails = styled.cite`
   }
 `;
 
-export const StyledTestimonialGrid = styled.div`
-  --grid-items: 36;
+export const StyledTestimonialGrid = styled.div<{
+  $columnsCount: number;
+}>`
+  --grid-items: ${({ $columnsCount }) => $columnsCount};
   display: grid;
   grid-template-columns: repeat(var(--grid-items), 343px);
   gap: 16px;