Update src/components/cardStack/layouts/timelines/TimelineBase.tsx

src/components/cardStack/layouts/timelines/TimelineBase.tsx

@@ -1,143 +1,95 @@
-"use client";
+import React from 'react';
 
-import React, { Children, useCallback } from "react";
-import { cls } from "@/lib/utils";
-import CardStackTextBox from "../../CardStackTextBox";
-import { useCardAnimation } from "../../hooks/useCardAnimation";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationType, TitleSegment } from "../../types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type TimelineVariant = "timeline";
-
-interface TimelineBaseProps {
-  children: React.ReactNode;
-  variant?: TimelineVariant;
-  uniformGridCustomHeightClasses?: string;
-  animationType: CardAnimationType;
-  title?: string;
-  titleSegments?: TitleSegment[];
-  description?: string;
-  tag?: string;
-  tagIcon?: LucideIcon;
-  buttons?: ButtonConfig[];
-  textboxLayout?: TextboxLayout;
-  useInvertedBackground?: InvertedBackground;
-  className?: string;
-  containerClassName?: string;
-  textBoxClassName?: string;
-  titleClassName?: string;
-  titleImageWrapperClassName?: string;
-  titleImageClassName?: string;
-  descriptionClassName?: string;
-  tagClassName?: string;
-  buttonContainerClassName?: string;
-  buttonClassName?: string;
-  buttonTextClassName?: string;
-  ariaLabel?: string;
+interface TimelineItem {
+  id: string;
+  title: string;
+  description: string;
+  date: string;
+  status: 'completed' | 'active' | 'pending';
 }
 
-const TimelineBase = ({
-  children,
-  variant = "timeline",
-  uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90",
-  animationType,
-  title,
-  titleSegments,
-  description,
-  tag,
-  tagIcon,
-  buttons,
-  textboxLayout = "default",
-  useInvertedBackground,
-  className = "",
-  containerClassName = "",
-  textBoxClassName = "",
-  titleClassName = "",
-  titleImageWrapperClassName = "",
-  titleImageClassName = "",
-  descriptionClassName = "",
-  tagClassName = "",
-  buttonContainerClassName = "",
-  buttonClassName = "",
-  buttonTextClassName = "",
-  ariaLabel = "Timeline section",
-}: TimelineBaseProps) => {
-  const childrenArray = Children.toArray(children);
-  const { itemRefs } = useCardAnimation({
-    animationType,
-    itemCount: childrenArray.length,
-    isGrid: false
-  });
+interface TimelineBaseProps {
+  items: TimelineItem[];
+  orientation?: 'vertical' | 'horizontal';
+  variant?: 'default' | 'compact' | 'detailed';
+  className?: string;
+}
 
-  const getItemClasses = useCallback((index: number) => {
-    // Timeline variant - scattered/organic pattern
-    const alignmentClass =
-      index % 2 === 0 ? "self-start ml-0" : "self-end mr-0";
+export const TimelineBase: React.FC<TimelineBaseProps> = ({
+  items,
+  orientation = 'vertical',
+  className = ''
+}) => {
+  const getStatusColor = (status: TimelineItem['status']) => {
+    switch (status) {
+      case 'completed':
+        return 'bg-green-500';
+      case 'active':
+        return 'bg-blue-500';
+      case 'pending':
+        return 'bg-gray-300';
+      default:
+        return 'bg-gray-300';
+    }
+  };
 
-    const marginClasses = cls(
-      index % 4 === 0 && "md:ml-0",
-      index % 4 === 1 && "md:mr-20",
-      index % 4 === 2 && "md:ml-15",
-      index % 4 === 3 && "md:mr-30"
+  const getTextColor = (status: TimelineItem['status']) => {
+    switch (status) {
+      case 'completed':
+        return 'text-green-700';
+      case 'active':
+        return 'text-blue-700';
+      case 'pending':
+        return 'text-gray-500';
+      default:
+        return 'text-gray-500';
+    }
+  };
+
+  if (orientation === 'horizontal') {
+    return (
+      <div className={`flex items-center space-x-4 ${className}`}>
+        {items.map((item, index) => (
+          <div key={item.id} className="flex items-center">
+            <div className="flex flex-col items-center">
+              <div className={`w-4 h-4 rounded-full ${getStatusColor(item.status)}`} />
+              <div className="mt-2 text-center">
+                <div className={`text-sm font-medium ${getTextColor(item.status)}`}>
+                  {item.title}
+                </div>
+                <div className="text-xs text-gray-500 mt-1">{item.date}</div>
+              </div>
+            </div>
+            {index < items.length - 1 && (
+              <div className="w-8 h-px bg-gray-300 mx-4" />
+            )}
+          </div>
+        ))}
+      </div>
     );
-
-    return cls(alignmentClass, marginClasses);
-  }, []);
+  }
 
   return (
-    <section
-      className={cls(
-        "relative py-20 w-full",
-        useInvertedBackground === "invertDefault" && "bg-foreground",
-        className
-      )}
-      aria-label={ariaLabel}
-    >
-      <div
-        className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}
-      >
-        {(title || titleSegments || description) && (
-          <CardStackTextBox
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagIcon={tagIcon}
-            buttons={buttons}
-            textboxLayout={textboxLayout}
-            useInvertedBackground={useInvertedBackground}
-            textBoxClassName={textBoxClassName}
-            titleClassName={titleClassName}
-            titleImageWrapperClassName={titleImageWrapperClassName}
-            titleImageClassName={titleImageClassName}
-            descriptionClassName={descriptionClassName}
-            tagClassName={tagClassName}
-            buttonContainerClassName={buttonContainerClassName}
-            buttonClassName={buttonClassName}
-            buttonTextClassName={buttonTextClassName}
-          />
-        )}
-        <div
-          className={cls(
-            "relative z-10 flex flex-col gap-6 md:gap-15"
-          )}
-        >
-          {Children.map(childrenArray, (child, index) => (
-            <div
-              key={index}
-              className={cls("w-65 md:w-25", uniformGridCustomHeightClasses, getItemClasses(index))}
-              ref={(el) => { itemRefs.current[index] = el; }}
-            >
-              {child}
+    <div className={`space-y-4 ${className}`}>
+      {items.map((item, index) => (
+        <div key={item.id} className="flex items-start space-x-4">
+          <div className="flex flex-col items-center">
+            <div className={`w-4 h-4 rounded-full ${getStatusColor(item.status)}`} />
+            {index < items.length - 1 && (
+              <div className="w-px h-8 bg-gray-300 mt-2" />
+            )}
+          </div>
+          <div className="flex-1 pb-4">
+            <div className={`font-medium ${getTextColor(item.status)}`}>
+              {item.title}
             </div>
-          ))}
+            <div className="text-sm text-gray-600 mt-1">
+              {item.description}
+            </div>
+            <div className="text-xs text-gray-500 mt-2">{item.date}</div>
+          </div>
         </div>
-      </div>
-    </section>
+      ))}
+    </div>
   );
-};
-
-TimelineBase.displayName = "TimelineBase";
-
-export default React.memo(TimelineBase);
+};