main

src/components/ui/data-display/timeline.tsx

@@ -0,0 +1,25 @@
+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;