import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import { Step } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';
import '../../components/index.css';

const StepDemo = () => {
  return (
    <View>
      <Text className="demo-title">dot</Text>
      <View className="demo-content">
        <Step shape="dot" current={3}>
          <Step.Item title={'步骤 1'} content="sdsdf" />
          <Step.Item title={'步骤 2'} content="sdsdf" />
          <Step.Item title={'步骤 3'} content="sdsdf" />
          <Step.Item title={'步骤 4'} content="sdsdf" />
          <Step.Item title={'步骤 5'} content="sdsdf" />
        </Step>
      </View>
      <Text className="demo-title">circle</Text>
      <View className="demo-content">
        <Step shape="circle" current={3}>
          <Step.Item title={'步骤 1'} content="sdsdf" />
          <Step.Item title={'步骤 2'} content="sdsdf" />
          <Step.Item title={'步骤 3'} content="sdsdf" />
          <Step.Item title={'步骤 4'} content="sdsdf" />
          <Step.Item title={'步骤 5'} content="sdsdf" />
        </Step>
      </View>
      <Text className="demo-title">arrow</Text>
      <View className="demo-content">
        <Step shape="arrow" current={3}>
          <Step.Item title={'步骤 1'} content="sdsdf" />
          <Step.Item title={'步骤 2'} content="sdsdf" />
          <Step.Item title={'步骤 3'} content="sdsdf" />
          <Step.Item title={'步骤 4'} content="sdsdf" />
          <Step.Item title={'步骤 5'} content="sdsdf" />
        </Step>
      </View>
    </View>
  );
};
// render(<StepDemo />, null, { driver: DriverUniversal });
 export default StepDemo