Timeline

pnpm dlx shadcn@latest add @whereui/timeline

import { Timeline, TimelineItem } from "@/components/ui/timeline"<Timeline>  <TimelineItem    title="ส่งคำขอ"    meta="โดย สมชาย ใจดี · 11 พ.ย. 2569 09:15"  /></Timeline>

import * as React from "react"import { cn } from "cn"function Timeline({ className, ...props }: React.ComponentProps<"ol">) {  return (    <ol      data-slot="timeline"      className={cn("flex flex-col", className)}      {...props}    />  )}function TimelineItem({  className,  icon,  title,  meta,  description,  children,  ...props}: React.ComponentProps<"li"> & {  /** ไอคอนเหตุการณ์ ถ้าไม่ใส่จะแสดงจุดกลม */  icon?: React.ReactNode  /** ชื่อเหตุการณ์ เช่น "อนุมัติคำขอ" */  title?: React.ReactNode  /** บรรทัดรอง เช่น ผู้กระทำและเวลา */  meta?: React.ReactNode  /** รายละเอียดเพิ่มเติม */  description?: React.ReactNode}) {  return (    <li      data-slot="timeline-item"      className={cn(        "relative flex gap-3 pb-6 last:pb-0 last:[&>[data-slot=timeline-rail]]:hidden",        className      )}      {...props}    >      <span        data-slot="timeline-rail"        aria-hidden="true"        className="absolute top-9 bottom-0 left-4 w-px bg-border"      />      <span        data-slot="timeline-icon"        className="relative z-1 flex size-8 shrink-0 items-center justify-center"      >        {icon ? (          <span className="grid size-8 place-items-center rounded-full bg-muted text-foreground [&_svg]:size-4">            {icon}          </span>        ) : (          <span className="size-2 rounded-full bg-foreground/30" />        )}      </span>      <div        data-slot="timeline-content"        className="min-w-0 flex-1 pt-0.5"      >        {title ? (          <div className="text-sm leading-snug font-medium">{title}</div>        ) : null}        {meta ? (          <div className="mt-0.5 text-xs text-muted-foreground">{meta}</div>        ) : null}        {description ? (          <div className="mt-1 text-sm text-muted-foreground">            {description}          </div>        ) : null}        {children}      </div>    </li>  )}export { Timeline, TimelineItem }