45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
import React, { useMemo } from "react";
|
|
import { CardStack, CardStackProps } from "@/components/cardStack";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface TimelineItem {
|
|
id: string;
|
|
reverse?: boolean;
|
|
media?: React.ReactNode;
|
|
content?: React.ReactNode;
|
|
}
|
|
|
|
export interface TimelineBaseProps extends Omit<CardStackProps, "items"> {
|
|
items: TimelineItem[];
|
|
animationType?: "slide-up" | "none" | "opacity" | "blur-reveal";
|
|
}
|
|
|
|
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]
|
|
);
|
|
|
|
return (
|
|
<CardStack
|
|
items={timelineItems}
|
|
className={cn("timeline-base", className)}
|
|
containerClassName={containerClassName}
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default TimelineBase;
|