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

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

@@ -1,44 +1,44 @@
-import React, { useMemo } from "react";
-import { CardStack, CardStackProps } from "@/components/cardStack";
-import { cn } from "@/lib/utils";
+import React from "react";
+import { TimelineItem } from "../types";
 
-export interface TimelineItem {
-  id: string;
-  reverse?: boolean;
-  media?: React.ReactNode;
-  content?: React.ReactNode;
-}
-
-export interface TimelineBaseProps extends Omit<CardStackProps, "items"> {
+export interface TimelineBaseProps {
   items: TimelineItem[];
-  animationType?: "slide-up" | "none" | "opacity" | "blur-reveal";
+  title?: string;
+  description?: string;
+  tag?: string;
+  animationType?: string;
+  textboxLayout?: string;
+  className?: string;
+  containerClassName?: string;
+  children?: React.ReactNode;
 }
 
-export const TimelineBase: React.FC<TimelineBaseProps> = ({
-  items,
-  animationType = "slide-up",  className,
-  containerClassName,
-  ...props
-}) => {
-  const timelineItems = useMemo(
-    () =>
-      items.map((item) => ({
-        id: item.id,
-        title: "",        description: "",        content: item.content,
-        media: item.media,
-        reverse: item.reverse
-      })),
-    [items]
-  );
+const TimelineBase = React.forwardRef<HTMLDivElement, TimelineBaseProps>(
+  (
+    {
+      items,
+      title,
+      description,
+      tag,
+      animationType = "none",      textboxLayout = "default",      className = "",      containerClassName = "",      children,
+    },
+    ref
+  ) => {
+    return (
+      <div ref={ref} className={`w-full ${className}`}>
+        {tag && <div className="text-sm font-medium mb-2">{tag}</div>}
+        {title && <h2 className="text-3xl font-bold mb-4">{title}</h2>}
+        {description && (
+          <p className="text-base text-foreground/75 mb-8">{description}</p>
+        )}
+        <div className={`relative ${containerClassName}`}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
 
-  return (
-    <CardStack
-      items={timelineItems}
-      className={cn("timeline-base", className)}
-      containerClassName={containerClassName}
-      {...props}
-    />
-  );
-};
+TimelineBase.displayName = "TimelineBase";
 
 export default TimelineBase;