StepShell

App

Checkout ve sihirbaz akışları için adım kapsayıcısı; active / done / pending durumları, daraltılmış özet ve Edit butonu.

Active / Done / Pending

Preview

Delivery address

123 Main St, İstanbul

2

Payment method

Select a payment method to continue.

3

Review & pay

Code
<StepShell number={1} title="Delivery address" active={false} done
  summary={<AddressCard address={address} />}
  onEdit={() => setStep('address')}
/>
<StepShell number={2} title="Payment method" active done={false}>
  <PaymentMethodSelector value={method} onChange={setMethod} />
  <Button onClick={() => setStep('details')}>Continue</Button>
</StepShell>
<StepShell number={3} title="Review &amp; pay" active={false} done={false} />
Sourcemodules/app/StepShell.tsx