Vertical Timeline

'use client';

import './VerticalTimeline.css';

/** VerticalTimeline — ported from astro-component-kit. */
export interface VerticalTimelineProps {
}

export function VerticalTimeline({}: VerticalTimelineProps) {
  return (
    <>
      <div className="timeline-v" data-rk-2babd2="">
        <div className="t-item" data-rk-2babd2="">
          <div className="t-date" data-rk-2babd2="">Oct 2024</div>
          <div className="t-content" data-rk-2babd2=""><h4 data-rk-2babd2="">V2 Release</h4><p data-rk-2babd2="">Launched the modular registry architecture.</p></div>
        </div>
        <div className="t-item" data-rk-2babd2="">
          <div className="t-date" data-rk-2babd2="">Aug 2024</div>
          <div className="t-content" data-rk-2babd2=""><h4 data-rk-2babd2="">Beta Phase</h4><p data-rk-2babd2="">Community testing and initial component set.</p></div>
        </div>
      </div>
    </>
  );
}

export default VerticalTimeline;

/* VerticalTimeline — ported from astro-component-kit (data/VerticalTimeline.astro) */

.timeline-v:where([data-rk-2babd2]) { position: relative; padding-left: 2rem; }
.timeline-v:where([data-rk-2babd2])::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(99,102,241,0.2); }
.t-item:where([data-rk-2babd2]) { position: relative; margin-bottom: 2.5rem; }
.t-item:where([data-rk-2babd2])::after { content: ""; position: absolute; left: -2.35rem; top: 5px; width: 12px; height: 12px; background: #6366f1; border: 3px solid #080b14; border-radius: 50%; }
.t-date:where([data-rk-2babd2]) { font-size: 0.75rem; font-weight: 700; color: #6366f1; margin-bottom: 0.25rem; }
h4:where([data-rk-2babd2]) { color: #fff; margin: 0; }
p:where([data-rk-2babd2]) { font-size: 0.85rem; color: #94a3b8; margin-top: 0.25rem; }