Steps

import { CheckIcon } from '@radix-ui/react-icons';
import {
  Spacer,
  Steps,
  Text,
  useSteps,
  styled,
  Container,
  Card,
  Input,
  InputLabel,
  Box,
  Button,
} from '@nox-ui/react';

export const StepsPreview = () => {
  const { value, setStep, handleNext, handleBack } = useSteps();
  return (
    <Card css={{ maxWidth: '600px' }}>
      <Card.Content>
        <Steps.Root value={value} disableTrigger>
          <Steps.List>
            <Steps.Item>
              <Steps.Indicator css={{ mr: '$1' }}>
                {value > 0 && <CheckIcon />}
              </Steps.Indicator>{' '}
              User
            </Steps.Item>
            <Steps.Item>
              <Steps.Divider />
              Password
              <Steps.Indicator css={{ ml: '$1' }} />
            </Steps.Item>
          </Steps.List>
          <Steps.Content value={0}>
            <Box css={{ d: 'flex', gap: '$4', mt: '$4', flexWrap: 'wrap' }}>
              <InputLabel>
                First Name
                <Input placeholder="Jane" />
              </InputLabel>
              <InputLabel>
                Last Name
                <Input placeholder="Doe" />
              </InputLabel>
            </Box>
            <Button
              onClick={handleNext}
              variant="flat"
              color="blue"
              css={{ mt: '$4' }}
            >
              Submit
            </Button>
          </Steps.Content>
          <Steps.Content value={1}>
            <Box css={{ d: 'flex', gap: '$4', mt: '$4', flexWrap: 'wrap' }}>
              <InputLabel>
                Password
                <Input type="password" />
              </InputLabel>
              <InputLabel>
                Confirm Password
                <Input type="password" />
              </InputLabel>
            </Box>
            <Button color="secondary" variant="flat" onClick={handleBack}>
              Back
            </Button>
            <Spacer inline />
            <Button variant="flat" color="blue" css={{ mt: '$4' }}>
              Submit
            </Button>
          </Steps.Content>
          <Steps.Content value={2}>Step 3</Steps.Content>
        </Steps.Root>
      </Card.Content>
    </Card>
  );
};