// ════════════════════════════════════════════════════ // rc-components.jsx — Shared UI Components // Exports to window: ProgressBar, DeviceCard, FormInput, GpudcMockup // ════════════════════════════════════════════════════ /* ── Progress Bar ── */ function ProgressBar({ current }) { const steps = [ { id: 1, label: 'IP-адрес' }, { id: 2, label: 'Логин' }, { id: 3, label: 'Пароль' }, ]; return (
{steps.map((step, idx) => { const done = current > step.id; const active = current === step.id; return (
{done ? '✓' : step.id}
{step.label}
{idx < steps.length - 1 && (
)} ); })}
); } /* ── Device Card ── */ function DeviceCard({ type, onClick }) { const [hov, setHov] = React.useState(false); const isMac = type === 'mac'; return ( ); } /* ── Form Input ── */ function FormInput({ label, sublabel, value, onChange, placeholder, type = 'text', error, onKeyDown }) { const [focused, setFocused] = React.useState(false); const [showPass, setShowPass] = React.useState(false); const isPass = type === 'password'; const borderColor = error ? 'var(--error)' : focused ? 'var(--primary)' : 'var(--border)'; return (
{sublabel && ( {sublabel} )}
onChange(e.target.value)} placeholder={placeholder} onKeyDown={onKeyDown} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} style={{ width: '100%', height: 50, borderRadius: 'var(--input-radius)', border: `1.5px solid ${borderColor}`, padding: '0 16px', paddingRight: isPass ? 48 : 16, fontSize: 15, fontFamily: 'inherit', color: 'var(--text)', background: 'var(--surface-2)', outline: 'none', boxSizing: 'border-box', transition: 'border-color 0.2s', }} /> {isPass && ( )}
{error && (
⚠ {error}
)}
); } /* ── gpudc.ru Mockup (always light — represents real website) ── */ function GpudcMockup({ highlight }) { const rows = [ { key: 'ip', label: 'Рабочий стол RDP', value: '85.143.167.10:49220' }, { key: 'user', label: 'Пользователь', value: 'user' }, { key: 'password', label: 'Пароль', value: '••••••••', copy: true }, ]; return (
{/* Browser chrome */}
{['#ff5f56','#ffbd2e','#27c93f'].map(c => (
))}
gpudc.ru/dashboard
{/* Page content */}
Личный кабинет → Мои машины → GPU Server
Публичный доступ
{rows.map(row => (
{row.label} {row.value} {row.copy && ( .copy() )} {highlight === row.key && ( ← сюда )}
))}
); } /* ── Export ── */ Object.assign(window, { ProgressBar, DeviceCard, FormInput, GpudcMockup });