TimelineActivity

timelineactivity-1779394025572.tsx

'use client'
const EVENTS = [
  { id:1, action:'Deployed v2.4.0', actor:'Alice', time:'2 min ago', icon:'🚀', color:'#6d28d9' },
  { id:2, action:'PR merged: feat/dashboard', actor:'Bob', time:'1 hour ago', icon:'✅', color:'#10b981' },
  { id:3, action:'Issue #42 opened', actor:'Carol', time:'3 hours ago', icon:'🐛', color:'#ef4444' },
  { id:4, action:'Database backup completed', actor:'System', time:'6 hours ago', icon:'💾', color:'#0891b2' },
  { id:5, action:'New member joined', actor:'David', time:'1 day ago', icon:'👤', color:'#f59e0b' },
]

export default function TimelineActivity({ events = EVENTS }) {
  return (
    <div style={{ position:'relative', paddingLeft:'32px' }}>
      <div style={{ position:'absolute', left:'14px', top:0, bottom:0, width:'2px', background:'#e2e8f0' }} />
      {events.map((ev, i) => (
        <div key={ev.id} style={{ position:'relative', marginBottom:i < events.length-1 ? '20px' : 0 }}>
          <div style={{
            position:'absolute', left:'-25px', top:'4px',
            width:'26px', height:'26px', borderRadius:'50%',
            background:ev.color + '20', border:'2px solid ' + ev.color,
            display:'flex', alignItems:'center', justifyContent:'center', fontSize:'13px',
            zIndex:1,
          }}>{ev.icon}</div>
          <div>
            <div style={{ fontSize:'14px', fontWeight:600, color:'#1e293b' }}>{ev.action}</div>
            <div style={{ fontSize:'12px', color:'#94a3b8', marginTop:'2px' }}>
              <span style={{ color:'#64748b' }}>{ev.actor}</span> · {ev.time}
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

Component info

CategoryTimeline

Frameworkreact

TierFREE

Copies0

About

Vertical activity timeline with icons, timestamps and colors

More from Timeline

'use client'
import { useState } from 'react'

const PHASES = [
  { phase: 'Phase 0', label: 'MVP Launch', date: 'May 2026', status: 'done', color: '#22c55e', items: ['Public website (empire-ui.com)', '60+ components published', 'MCP server live', 'A

ProductTimeline

Timeline

'use client';
import { useState } from 'react';

export default function RoadmapTimeline() {
  const [expanded, setExpanded] = useState(null);
  const items = [
    { id: 1, quarter: 'Q1 2026', title: 'Core Platform Launch', status: 'done', desc: 'Re

RoadmapTimeline

Timeline