From f7e04a75ef33be16d4f787892b6ddbb53f09f495 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 21:29:29 +0000
Subject: [PATCH] Update src/components/cardStack/CardList.tsx

---
 src/components/cardStack/CardList.tsx | 151 +++++++-------------------
 1 file changed, 42 insertions(+), 109 deletions(-)

diff --git a/src/components/cardStack/CardList.tsx b/src/components/cardStack/CardList.tsx
index 15a4d59..63c6fc2 100644
--- a/src/components/cardStack/CardList.tsx
+++ b/src/components/cardStack/CardList.tsx
@@ -1,123 +1,56 @@
-"use client";
+'use client';
 
-import { memo, Children } from "react";
-import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
-import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
-import { cls } from "@/lib/utils";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+import React, { useRef, useEffect } from 'react';
+import { useCardAnimation } from '@/hooks/useCardAnimation';
+import { cn } from '@/lib/utils';
 
-interface CardListProps {
-  children: React.ReactNode;
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+
+export interface CardListProps {
+  children: React.ReactNode[];
   animationType: CardAnimationType;
-  useUncappedRounding?: boolean;
-  title?: string;
-  titleSegments?: TitleSegment[];
-  description?: string;
-  tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  textboxLayout: TextboxLayout;
-  useInvertedBackground?: InvertedBackground;
-  disableCardWrapper?: boolean;
-  ariaLabel?: string;
+  itemCount: number;
+  useIndividualTriggers?: boolean;
   className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  textBoxClassName?: string;
-  titleClassName?: string;
-  titleImageWrapperClassName?: string;
-  titleImageClassName?: string;
-  descriptionClassName?: string;
-  tagClassName?: string;
-  buttonContainerClassName?: string;
-  buttonClassName?: string;
-  buttonTextClassName?: string;
 }
 
-const CardList = ({
+export const CardList: React.FC<CardListProps> = ({
   children,
   animationType,
-  useUncappedRounding = false,
-  title,
-  titleSegments,
-  description,
-  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout,
-  useInvertedBackground,
-  disableCardWrapper = false,
-  ariaLabel = "Card list",
-  className = "",
-  containerClassName = "",
-  cardClassName = "",
-  textBoxClassName = "",
-  titleClassName = "",
-  titleImageWrapperClassName = "",
-  titleImageClassName = "",
-  descriptionClassName = "",
-  tagClassName = "",
-  buttonContainerClassName = "",
-  buttonClassName = "",
-  buttonTextClassName = "",
-}: CardListProps) => {
-  const childrenArray = Children.toArray(children);
-  const { itemRefs } = useCardAnimation({ animationType, itemCount: childrenArray.length, useIndividualTriggers: true });
+  itemCount,
+  useIndividualTriggers = false,
+  className,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  const { itemRefs } = useCardAnimation({
+    animationType,
+    itemCount,
+    useIndividualTriggers,
+  });
+
+  useEffect(() => {
+    // Synchronize refs if needed
+    cardRefs.current = cardRefs.current.slice(0, itemCount);
+  }, [itemCount]);
 
   return (
-    <section
-      aria-label={ariaLabel}
-      className={cls(
-        "relative py-20 w-full",
-        useInvertedBackground && "bg-foreground",
-        className
-      )}
-    >
-      <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
-        <CardStackTextBox
-          title={title}
-          titleSegments={titleSegments}
-          description={description}
-          tag={tag}
-          tagIcon={tagIcon}
-          tagAnimation={tagAnimation}
-          buttons={buttons}
-          buttonAnimation={buttonAnimation}
-          textboxLayout={textboxLayout}
-          useInvertedBackground={useInvertedBackground}
-          textBoxClassName={textBoxClassName}
-          titleClassName={titleClassName}
-          titleImageWrapperClassName={titleImageWrapperClassName}
-          titleImageClassName={titleImageClassName}
-          descriptionClassName={descriptionClassName}
-          tagClassName={tagClassName}
-          buttonContainerClassName={buttonContainerClassName}
-          buttonClassName={buttonClassName}
-          buttonTextClassName={buttonTextClassName}
-        />
-
-        <div className="flex flex-col gap-6">
-          {childrenArray.map((child, index) => (
-            <div
-              key={index}
-              ref={(el) => { itemRefs.current[index] = el; }}
-              className={cls(!disableCardWrapper && "card", !disableCardWrapper && (useUncappedRounding ? "rounded-theme" : "rounded-theme-capped"), cardClassName)}
-            >
-              {child}
-            </div>
-          ))}
+    <div ref={containerRef} className={cn('card-list', className)}>
+      {React.Children.map(children, (child, index) => (
+        <div
+          key={index}
+          ref={(el) => {
+            if (el) cardRefs.current[index] = el;
+            if (itemRefs && itemRefs[index]) itemRefs[index].current = el;
+          }}
+          className="card-item"
+        >
+          {child}
         </div>
-      </div>
-    </section>
+      ))}
+    </div>
   );
 };
 
-CardList.displayName = "CardList";
-
-export default memo(CardList);
+export default CardList;