Vertical Steps

'use client';

import './StepperDataVertical.css';

/** StepperDataVertical — ported from astro-component-kit. */
export interface StepperDataVerticalProps {
}

export function StepperDataVertical({}: StepperDataVerticalProps) {
  return (
    <>
      <div className="v-steps" data-rk-054ed8="">
        <div className="v-step done" data-rk-054ed8=""><span data-rk-054ed8="">Check</span>Account Created</div>
        <div className="v-step current" data-rk-054ed8=""><span data-rk-054ed8="">2</span>Verify Email</div>
        <div className="v-step" data-rk-054ed8=""><span data-rk-054ed8="">3</span>Setup Profile</div>
      </div>
    </>
  );
}

export default StepperDataVertical;

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

.v-steps:where([data-rk-054ed8]) { display: flex; flex-direction: column; gap: 1rem; }
.v-step:where([data-rk-054ed8]) { display: flex; align-items: center; gap: 1rem; color: #64748b; font-size: 0.9rem; font-weight: 600; }
.v-step:where([data-rk-054ed8]) span:where([data-rk-054ed8]) { width: 24px; height: 24px; background: #1e293b; display: grid; place-items: center; border-radius: 50%; font-size: 0.7rem; border: 1px solid #334155; }
.current:where([data-rk-054ed8]) { color: #fff; }
.current:where([data-rk-054ed8]) span:where([data-rk-054ed8]) { background: #6366f1; border-color: #6366f1; box-shadow: 0 0 10px rgba(99,102,241,0.4); }
.done:where([data-rk-054ed8]) span:where([data-rk-054ed8]) { background: #10b981; border-color: #10b981; color: #fff; }