Gantt Timeline UI

'use client';

import './GanttChartMinimal.css';

/** GanttChartMinimal — ported from astro-component-kit. */
export interface GanttChartMinimalProps {
}

export function GanttChartMinimal({}: GanttChartMinimalProps) {
  return (
    <>
      <div className="gantt" data-rk-fd4a22="">
        <div className="g-row" data-rk-fd4a22=""><div className="g-bar" style={{ width: "40%", marginLeft: "10%", background: "#6366f1" }} data-rk-fd4a22=""></div></div>
        <div className="g-row" data-rk-fd4a22=""><div className="g-bar" style={{ width: "30%", marginLeft: "55%", background: "#c084fc" }} data-rk-fd4a22=""></div></div>
        <div className="g-row" data-rk-fd4a22=""><div className="g-bar" style={{ width: "20%", marginLeft: "20%", background: "#10b981" }} data-rk-fd4a22=""></div></div>
      </div>
    </>
  );
}

export default GanttChartMinimal;

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

.gantt:where([data-rk-fd4a22]) { width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 8px; background: rgba(0,0,0,0.3); padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); }
.g-row:where([data-rk-fd4a22]) { height: 20px; position: relative; width: 100%; background: rgba(255,255,255,0.02); border-radius: 4px; }
.g-bar:where([data-rk-fd4a22]) { height: 100%; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }