@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Vertical Timeline" Code="@_codeVertical">
    <Timeline Class="max-w-md">
        <TimelineItem Title="Order placed" Description="Your order has been placed successfully." Time="2 hours ago" />
        <TimelineItem Title="Processing" Description="Your order is being processed." Time="1 hour ago" />
        <TimelineItem Title="Shipped" Description="Your order has been shipped." Time="30 min ago" />
    </Timeline>
</PatternCard>

<PatternCard Label="Horizontal Timeline" Code="@_codeHorizontal">
    <Timeline Orientation="Timeline.TimelineOrientation.Horizontal" Class="w-full max-w-lg">
        <TimelineItem Title="Step 1" Description="Create account" />
        <TimelineItem Title="Step 2" Description="Verify email" />
        <TimelineItem Title="Step 3" Description="Complete profile" />
    </Timeline>
</PatternCard>
</Stack>

@code {
    private string _codeVertical = @"<Timeline>
    <TimelineItem Title=""Order placed"" Description=""Your order has been placed."" Time=""2 hours ago"" />
    <TimelineItem Title=""Processing"" Description=""Your order is being processed."" Time=""1 hour ago"" />
    <TimelineItem Title=""Shipped"" Description=""Your order has been shipped."" Time=""30 min ago"" />
</Timeline>";

    private string _codeHorizontal = @"<Timeline Orientation=""Timeline.TimelineOrientation.Horizontal"">
    <TimelineItem Title=""Step 1"" Description=""Create account"" />
    <TimelineItem Title=""Step 2"" Description=""Verify email"" />
    <TimelineItem Title=""Step 3"" Description=""Complete profile"" />
</Timeline>";
}
