File "timeline.tsx"
Full Path: /home/markqprx/iniasli.pro/resources/client/ui/timeline.tsx
File size: 1 KB
MIME-type: text/plain
Charset: utf-8
import {Children, cloneElement, ReactElement, ReactNode} from 'react';
import clsx from 'clsx';
interface TimelineProps {
children: ReactElement<TimelineProps>[];
className?: string;
}
export function Timeline({children, className}: TimelineProps) {
const items = Children.toArray(children);
return (
<div className={className}>
{items.map((item, index) =>
cloneElement(item as any, {
isLast: index === items.length - 1,
})
)}
</div>
);
}
interface TimelineItemProps {
children: ReactNode;
className?: string;
isLast?: boolean;
}
export function TimelineItem({children, className, isLast}: TimelineItemProps) {
return (
<div className={clsx('flex gap-12', className)}>
<div>
<div className="mt-4 h-12 w-12 flex-shrink-0 rounded-full border-[3px]" />
{!isLast && (
<div className="mx-auto mt-4 h-[calc(100%-12px)] w-1 bg-chip"></div>
)}
</div>
<div className="flex-auto">{children}</div>
</div>
);
}