Update src/components/cardStack/layouts/timelines/TimelineBase.tsx
This commit is contained in:
@@ -1,143 +1,95 @@
|
|||||||
"use client";
|
import React from 'react';
|
||||||
|
|
||||||
import React, { Children, useCallback } from "react";
|
interface TimelineItem {
|
||||||
import { cls } from "@/lib/utils";
|
id: string;
|
||||||
import CardStackTextBox from "../../CardStackTextBox";
|
title: string;
|
||||||
import { useCardAnimation } from "../../hooks/useCardAnimation";
|
description: string;
|
||||||
import type { LucideIcon } from "lucide-react";
|
date: string;
|
||||||
import type { ButtonConfig, CardAnimationType, TitleSegment } from "../../types";
|
status: 'completed' | 'active' | 'pending';
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const TimelineBase = ({
|
interface TimelineBaseProps {
|
||||||
children,
|
items: TimelineItem[];
|
||||||
variant = "timeline",
|
orientation?: 'vertical' | 'horizontal';
|
||||||
uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90",
|
variant?: 'default' | 'compact' | 'detailed';
|
||||||
animationType,
|
className?: string;
|
||||||
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
|
|
||||||
});
|
|
||||||
|
|
||||||
const getItemClasses = useCallback((index: number) => {
|
export const TimelineBase: React.FC<TimelineBaseProps> = ({
|
||||||
// Timeline variant - scattered/organic pattern
|
items,
|
||||||
const alignmentClass =
|
orientation = 'vertical',
|
||||||
index % 2 === 0 ? "self-start ml-0" : "self-end mr-0";
|
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(
|
const getTextColor = (status: TimelineItem['status']) => {
|
||||||
index % 4 === 0 && "md:ml-0",
|
switch (status) {
|
||||||
index % 4 === 1 && "md:mr-20",
|
case 'completed':
|
||||||
index % 4 === 2 && "md:ml-15",
|
return 'text-green-700';
|
||||||
index % 4 === 3 && "md:mr-30"
|
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 (
|
return (
|
||||||
<section
|
<div className={`space-y-4 ${className}`}>
|
||||||
className={cls(
|
{items.map((item, index) => (
|
||||||
"relative py-20 w-full",
|
<div key={item.id} className="flex items-start space-x-4">
|
||||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
<div className="flex flex-col items-center">
|
||||||
className
|
<div className={`w-4 h-4 rounded-full ${getStatusColor(item.status)}`} />
|
||||||
)}
|
{index < items.length - 1 && (
|
||||||
aria-label={ariaLabel}
|
<div className="w-px h-8 bg-gray-300 mt-2" />
|
||||||
>
|
)}
|
||||||
<div
|
</div>
|
||||||
className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}
|
<div className="flex-1 pb-4">
|
||||||
>
|
<div className={`font-medium ${getTextColor(item.status)}`}>
|
||||||
{(title || titleSegments || description) && (
|
{item.title}
|
||||||
<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>
|
</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>
|
||||||
</div>
|
))}
|
||||||
</section>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
TimelineBase.displayName = "TimelineBase";
|
|
||||||
|
|
||||||
export default React.memo(TimelineBase);
|
|
||||||
|
|||||||
Reference in New Issue
Block a user