Files
skript-ui/src/components/ui/data-display/timeline.tsx
2026-01-28 02:31:48 +03:00

26 lines
881 B
TypeScript

import { Timeline as ChakraTimeline } from '@chakra-ui/react';
import * as React from 'react';
interface TimelineConnectorProps extends ChakraTimeline.IndicatorProps {
icon?: React.ReactNode;
}
export const TimelineConnector = React.forwardRef<HTMLDivElement, TimelineConnectorProps>(function TimelineConnector(
{ icon, ...props },
ref,
) {
return (
<ChakraTimeline.Connector ref={ref}>
<ChakraTimeline.Separator />
<ChakraTimeline.Indicator {...props}>{icon}</ChakraTimeline.Indicator>
</ChakraTimeline.Connector>
);
});
export const TimelineRoot = ChakraTimeline.Root;
export const TimelineContent = ChakraTimeline.Content;
export const TimelineItem = ChakraTimeline.Item;
export const TimelineIndicator = ChakraTimeline.Indicator;
export const TimelineTitle = ChakraTimeline.Title;
export const TimelineDescription = ChakraTimeline.Description;