Vertical Progress Steps

'use client';

import './StepLayoutVertical.css';

/**
 * StepLayoutVertical — Vertical Progress Steps with space for detailed descriptions.
 */
export interface StepLayoutVerticalProps {
  className?: string;
}

export function StepLayoutVertical({ className = '' }: StepLayoutVerticalProps) {
  return (
    <>
      <div className={`step-lay ${className}`} data-rk-3280db="">
        <div className="step-line" data-rk-3280db="">
          <div className="step-point" data-rk-3280db="">1</div>
          <div className="step-point" data-rk-3280db="">2</div>
          <div className="step-point" data-rk-3280db="">3</div>
        </div>
        <div className="step-content" data-rk-3280db="">
          <div className="step-block" data-rk-3280db="">
            <h4 data-rk-3280db="">1. Installation</h4>
            <p data-rk-3280db="">Install astro-component-kit via npm in seconds.</p>
          </div>
          <div className="step-block" data-rk-3280db="">
            <h4 data-rk-3280db="">2. Configuration</h4>
            <p data-rk-3280db="">Import components and design tokens into your React project.</p>
          </div>
          <div className="step-block" data-rk-3280db="">
            <h4 data-rk-3280db="">3. Build & Ship</h4>
            <p data-rk-3280db="">Enjoy zero-runtime overhead and instant static builds.</p>
          </div>
        </div>
      </div>
    </>
  );
}

export default StepLayoutVertical;

/* StepLayoutVertical — ported from astro-component-kit (layout/StepLayoutVertical.astro) */

.step-lay:where([data-rk-3280db]) {
  display: flex;
  gap: 2rem;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.step-line:where([data-rk-3280db]) {
  width: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.step-line:where([data-rk-3280db])::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: rgb(var(--ink-rgb, 255 255 255) / 0.1);
  z-index: 0;
}
.step-point:where([data-rk-3280db]) {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #6366f1;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
  z-index: 1;
}
.step-content:where([data-rk-3280db]) {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 1;
}
.step-block:where([data-rk-3280db]) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 50px;
}
.step-block:where([data-rk-3280db]) h4:where([data-rk-3280db]) {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
}
.step-block:where([data-rk-3280db]) p:where([data-rk-3280db]) {
  color: #94a3b8;
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}