From c5bd03c0619ace4e8dd376062d74da3f113c570b Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 19:40:41 +0000
Subject: [PATCH] Switch to version 1: modified
 src/components/cardStack/CardList.tsx

---
 src/components/cardStack/CardList.tsx | 125 +++++++++++++++++++++++---
 1 file changed, 111 insertions(+), 14 deletions(-)

diff --git a/src/components/cardStack/CardList.tsx b/src/components/cardStack/CardList.tsx
index eacae23..15a4d59 100644
--- a/src/components/cardStack/CardList.tsx
+++ b/src/components/cardStack/CardList.tsx
@@ -1,26 +1,123 @@
-'use client';
+"use client";
 
-import React, { useRef } from 'react';
-import { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from '@/components/cardStack/types';
+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";
 
 interface CardListProps {
-  items: any[];
+  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;
   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: React.FC<CardListProps> = ({ items, className = '' }) => {
-  const itemRefs = useRef<(HTMLElement | null)[]>([]);
+const CardList = ({
+  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 });
 
   return (
-    <div className={`card-list ${className}`}>
-      {items.map((item, index) => (
-        <div key={item.id || index} ref={(el) => { if (el) itemRefs.current[index] = el; }} className="card-list-item">
-          {item.title && <h3>{item.title}</h3>}
-          {item.description && <p>{item.description}</p>}
+    <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>
-      ))}
-    </div>
+      </div>
+    </section>
   );
 };
 
-export default CardList;
+CardList.displayName = "CardList";
+
+export default memo(CardList);