ProgressStepper

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

export default function ProgressStepper() {
  const [current, setCurrent] = useState(0);
  const steps = [
    { label: 'Account', icon: '👤', desc: 'Basic information' },
    { label: 'Profile', icon: '✏️', desc: 'Customize your profile' },
    { label: 'Billing', icon: '💳', desc: 'Payment details' },
    { label: 'Done', icon: '✅', desc: 'All set!' },
  ];

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '600px', padding: '32px' }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '40px' }}>
        {steps.map((step, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', flex: i < steps.length - 1 ? 1 : 'none' }}>
            <div
              onClick={() => setCurrent(i)}
              style={{
                width: '44px', height: '44px',
                borderRadius: '50%',
                background: i < current ? 'linear-gradient(135deg, #C9A84C, #e8c96d)'
                  : i === current ? 'rgba(201,168,76,0.15)'
                  : 'rgba(255,255,255,0.05)',
                border: `2px solid ${i <= current ? '#C9A84C' : 'rgba(255,255,255,0.1)'}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: '18px', cursor: 'pointer',
                transition: 'all 0.3s ease',
                flexShrink: 0,
                boxShadow: i === current ? '0 0 20px rgba(201,168,76,0.3)' : 'none',
              }}
            >
              {i < current ? '✓' : step.icon}
            </div>
            {i < steps.length - 1 && (
              <div style={{
                flex: 1, height: '2px',
                background: 'rgba(255,255,255,0.08)',
                margin: '0 8px',
                position: 'relative',
                overflow: 'hidden',
              }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  background: '#C9A84C',
                  transform: `scaleX(${i < current ? 1 : 0})`,
                  transformOrigin: 'left',
                  transition: 'transform 0.5s ease',
                }} />
              </div>
            )}
          </div>
        ))}
      </div>
      <div style={{
        background: 'rgba(255,255,255,0.03)',
        border: '1px solid rgba(255,255,255,0.08)',
        borderRadius: '16px',
        padding: '32px',
      }}>
        <h2 style={{ color: '#F5F5F0', margin: '0 0 8px 0', fontSize: '20px' }}>
          {steps[current].icon} {steps[current].label}
        </h2>
        <p style={{ color: 'rgba(245,245,240,0.5)', margin: '0 0 24px 0' }}>{steps[current].desc}</p>
        <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
          {current > 0 && (
            <button onClick={() => setCurrent(c => c - 1)} style={{
              background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)',
              color: '#F5F5F0', borderRadius: '10px', padding: '10px 24px', cursor: 'pointer', fontSize: '14px',
            }}>Back</button>
          )}
          {current < steps.length - 1 && (
            <button onClick={() => setCurrent(c => c + 1)} style={{
              background: 'linear-gradient(135deg, #C9A84C, #e8c96d)',
              border: 'none', color: '#0A0A0A', borderRadius: '10px',
              padding: '10px 24px', cursor: 'pointer', fontSize: '14px', fontWeight: 700,
            }}>Continue</button>
          )}
        </div>
      </div>
    </div>
  );
}

Component info

About

Multi-step progress indicator with animated transitions