import * as React from "react"; import { Flex } from "@/registry/berlin/circle-ui/flex"; import { cn } from "@/registry/berlin/lib/utils"; export type TimelineStepStatus = | "completed" | "active" | "upcoming" | "loading" | "error"; function CheckIcon() { return ( ); } function TimelineMarker({ status }: { status?: TimelineStepStatus }) { if (status === "completed") { return ( ); } if (status === "active") { return ( ); } if (status === "error") { return ( ! ); } if (status === "loading") { return ( ); } return ( ); } function LoadingLine({ className, width = "100%", }: { className?: string; width?: string; }) { return ( ); } export interface TimelineStepProps extends React.PropsWithChildren { title?: React.ReactNode; preTitle?: React.ReactNode; text?: React.ReactNode; variableTime?: boolean; firstChild?: boolean; lastChild?: boolean; loading?: boolean; id?: string; status?: TimelineStepStatus; connectorLabel?: React.ReactNode; className?: string; } export function TimelineStep({ children, className, connectorLabel, firstChild, id, lastChild, loading, preTitle, status, text, title, }: TimelineStepProps) { const effectiveStatus = loading ? "loading" : status; const showLoading = effectiveStatus === "loading"; const connectorClass = effectiveStatus === "completed" ? "bg-foreground" : "bg-border"; return (

{!firstChild ? ( ) : null} {!lastChild ? ( ) : null} {connectorLabel && !lastChild ? ( {connectorLabel} ) : null}

{showLoading || preTitle || title ? (

{showLoading ? ( ) : preTitle ? (

{preTitle}

) : null} {showLoading ? ( ) : title ? (

{title}

) : null}

) : null} {showLoading ? (

) : text ? (

{text}

) : children ? (

{children}

) : null}

); } export function Timeline({ children }: React.PropsWithChildren) { return {children}; }

Installation

About

Usage

Dependencies

Source