Process Timeline Engine

Challenge Progress

1/1

"use client";

import { useState } from "react";
import {
  ProcessTimelineEngine,
  type ProcessTimelineItem,
} from "@/components/matos-ui/process-timeline-engine";

const timelineItems: ProcessTimelineItem[] = [
  {
    id: "profit-8k",
    title: "$8,000",
    description: "Profit Target",
    status: "complete",
    progress: 100,
    result: "$8,000",
    target: "$8,000",
    badge: "Passed",
  },
];

export function ProcessTimelineEngineDemo() {
  const [activeId, setActiveId] = useState("profit-10k");

  return (
    <div className="flex w-full justify-center p-4">
      <ProcessTimelineEngine
        items={timelineItems}
        activeId={activeId}
        onItemSelect={(item) => setActiveId(item.id)}
      />
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/process-timeline-engine.json

Usage

import {
  ProcessTimelineEngine,
  type ProcessTimelineItem
} from '@/components/matos-ui/process-timeline-engine'

const items: ProcessTimelineItem[] = [
  {
    id: 'intake',
    title: 'Intake aprovado',
    description: 'Briefing e escopo foram validados.',
    status: 'complete',
    timestamp: '09:10'
  },
  {
    id: 'mapping',
    title: 'Mapeamento em execucao',
    status: 'active',
    meta: 'Produto'
  }
]

;<ProcessTimelineEngine
  items={items}
  activeId="mapping"
  title="Process Timeline Engine"
  onItemSelect={(item) => console.log(item)}
/>

Reference

ProcessTimelineEngine Props

Prop	Type	Default	Description
`items`	`ProcessTimelineItem[]`	-	Lista de etapas do processo.
`activeId`	`string?`	-	Etapa visualmente selecionada.
`title`	`string?`	`"Process Timeline"`	Titulo do painel.
`subtitle`	`string?`	-	Texto auxiliar abaixo do titulo.
`onItemSelect`	`(item: ProcessTimelineItem) => void`	-	Torna as etapas clicaveis.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Largura maxima do componente.

ProcessTimelineItem

Field	Type	Description
`id`	`string`	Identificador unico da etapa.
`title`	`string`	Nome da etapa.
`description`	`string?`	Detalhe da etapa.
`status`	`"complete" \| "active" \| "pending" \| "blocked" \| "paused"`	Estado visual da etapa.
`timestamp`	`string?`	Horario ou prazo.
`meta`	`string?`	Time, area ou metadado curto.
`icon`	`ReactNode?`	Icone customizado da etapa.

Also exported: processTimelineEngineVariants, ProcessTimelineEngineProps, ProcessTimelineItem and ProcessTimelineStatus.