Timeline

import {  Timeline,  TimelineDescription,  TimelineItem,  TimelineTime,  TimelineTitle,} from "@/components/vip-ui/timeline";export function TimelineDemo() {  return (    <Timeline      aria-label="Project activity"      className="max-w-md rounded-xl border border-border bg-card p-4 shadow-[var(--shadow-card)] sm:p-5"    >      <TimelineItem status="latest">        <TimelineTitle>Design approved</TimelineTitle>        <TimelineTime dateTime="2025-10-18T14:30:00Z">          October 18, 2:30 PM UTC        </TimelineTime>        <TimelineDescription>          Final layouts approved for the release.        </TimelineDescription>      </TimelineItem>      <TimelineItem>        <TimelineTitle>Feedback addressed</TimelineTitle>        <TimelineTime dateTime="2025-10-17T09:00:00Z">          October 17, 9:00 AM UTC        </TimelineTime>        <TimelineDescription>          Navigation and keyboard focus states updated.        </TimelineDescription>      </TimelineItem>      <TimelineItem>        <TimelineTitle>Review requested</TimelineTitle>        <TimelineTime dateTime="2025-10-15T16:00:00Z">          October 15, 4:00 PM UTC        </TimelineTime>      </TimelineItem>    </Timeline>  );}

import {  Timeline,  TimelineDescription,  TimelineItem,  TimelineTime,  TimelineTitle,} from "@/components/vip-ui/timeline";export function TimelineProcessDemo() {  return (    <Timeline      aria-label="Order progress"      className="max-w-md rounded-xl border border-border bg-card p-4 shadow-[var(--shadow-card)] sm:p-5"    >      <TimelineItem>        <TimelineTitle>Order placed</TimelineTitle>        <TimelineTime dateTime="2025-11-02T08:12:00Z">          November 2, 8:12 AM UTC        </TimelineTime>      </TimelineItem>      <TimelineItem>        <TimelineTitle>Packed</TimelineTitle>        <TimelineTime dateTime="2025-11-02T15:40:00Z">          November 2, 3:40 PM UTC        </TimelineTime>      </TimelineItem>      <TimelineItem status="latest">        <TimelineTitle>In transit</TimelineTitle>        <TimelineDescription>          The parcel left the Berlin sorting center.        </TimelineDescription>      </TimelineItem>      <TimelineItem status="upcoming">        <TimelineTitle>Out for delivery</TimelineTitle>      </TimelineItem>      <TimelineItem status="upcoming">        <TimelineTitle>Delivered</TimelineTitle>      </TimelineItem>    </Timeline>  );}

import {  ChatCircleIcon,  GitMergeIcon,  RocketLaunchIcon,} from "@phosphor-icons/react/ssr";import {  Timeline,  TimelineDescription,  TimelineItem,  TimelineTime,  TimelineTitle,} from "@/components/vip-ui/timeline";export function TimelineIconsDemo() {  return (    <Timeline      aria-label="Release activity"      className="max-w-md rounded-xl border border-border bg-card p-4 shadow-[var(--shadow-card)] sm:p-5"    >      <TimelineItem status="latest" icon={<RocketLaunchIcon weight="bold" />}>        <TimelineTitle>Version 2.4 deployed</TimelineTitle>        <TimelineTime dateTime="2025-10-21T11:05:00Z">          October 21, 11:05 AM UTC        </TimelineTime>      </TimelineItem>      <TimelineItem icon={<GitMergeIcon weight="bold" />}>        <TimelineTitle>Pull request merged</TimelineTitle>        <TimelineTime dateTime="2025-10-20T17:30:00Z">          October 20, 5:30 PM UTC        </TimelineTime>        <TimelineDescription>          Adds keyboard reordering to tables.        </TimelineDescription>      </TimelineItem>      <TimelineItem icon={<ChatCircleIcon weight="bold" />}>        <TimelineTitle>Review comment</TimelineTitle>        <TimelineTime dateTime="2025-10-20T09:15:00Z">          October 20, 9:15 AM UTC        </TimelineTime>      </TimelineItem>    </Timeline>  );}