Stepper

import { Stepper } from '@tidbcloud/uikit'

import { useState } from 'react'
import { Stepper, Button, Group } from '@tidbcloud/uikit'
 
function Demo() {
  const [active, setActive] = useState(1)
  const nextStep = () => setActive((current) => (current < 3 ? current + 1 : current))
  const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current))
 
  return (
    <>
      <Stepper active={active} onStepClick={setActive}>
        <Stepper.Step label="First step" description="Create an account">
          Step 1 content: Create an account
        </Stepper.Step>
        <Stepper.Step label="Second step" description="Verify email">
          Step 2 content: Verify email
        </Stepper.Step>
        <Stepper.Step label="Final step" description="Get full access">
          Step 3 content: Get full access
        </Stepper.Step>
        <Stepper.Completed>Completed, click back button to get to previous step</Stepper.Completed>
      </Stepper>
 
      <Group justify="center" mt="xl">
        <Button variant="default" onClick={prevStep}>
          Back
        </Button>
        <Button onClick={nextStep}>Next step</Button>
      </Group>
    </>
  )
}

import { useState } from 'react'
import { IconUserCheck, IconMailOpened, IconShieldCheck } from '@tabler/icons-react'
import { Stepper } from '@tidbcloud/uikit'
 
function Demo() {
  const [active, setActive] = useState(1)
 
  return (
    <Stepper active={active} onStepClick={setActive}>
      <Stepper.Step icon={<IconUserCheck size={18} />} label="Step 1" description="Create an account" />
      <Stepper.Step icon={<IconMailOpened size={18} />} label="Step 2" description="Verify email" />
      <Stepper.Step icon={<IconShieldCheck size={18} />} label="Step 3" description="Get full access" />
    </Stepper>
  )
}

import { useState } from 'react'
import { Stepper } from '@tidbcloud/uikit'
 
function Demo() {
  const [active, setActive] = useState(1)
 
  return (
    <Stepper active={active} onStepClick={setActive} orientation="vertical">
      <Stepper.Step label="Step 1" description="Create an account" />
      <Stepper.Step label="Step 2" description="Verify email" />
      <Stepper.Step label="Step 3" description="Get full access" />
    </Stepper>
  )
}

import { Stepper } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Stepper active={1}>
      <Stepper.Step label="Step 1" description="Create an account" />
      <Stepper.Step label="Step 2" description="Verify email" loading />
      <Stepper.Step label="Step 3" description="Get full access" />
    </Stepper>
  )
}