reactjs - 如何创建步骤 - 带有tailwindcss的步进器反应？

Question

我有以下代码，并希望有一个使用 Tailwind CSS 的工作步进器。有人可以帮忙吗？我想知道如何在 React 或 Next JS 中使用 Tailwind CSS 创建步骤

<React.Fragment>
    <div className='flex flex-wrap justify-between grid-flow-col grid-cols-3 gap-2 py-5 ml-8 align-baseline md:grid-cols-3 xl:grid-cols-3 sm:mb-0 md:gap-3'>
        <div className='w-2/3 p-10 bg-white rounded-lg shadow-2xl px-6 py-10 mx-6 md:px-2'>
            <form className='px-3'>
                <div
                    className='flex text-md content-center text-center mb-4 py-3'
                    activeStep={activeStep}
                    // alternativeLabel
                >
                    {steps.map((label) => (
                        <div className='w-1/3' key={label}>
                            <div>{label}</div>
                        </div>
                    ))}
                </div>

                <div className='md:box-content'>
                    {activeStep === steps.length ? (
                        errors && errors.length > 0 ? (
                            <div className='md:box-content'>
                                <ul>
                                    {errors.map((error) => (
                                        <li key={error}>
                                            <div
                                                className='bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative'
                                                role='alert'
                                            >
                                                {' '}
                                                {error}{' '}
                                            </div>
                                        </li>
                                    ))}
                                </ul>
                                <div className='mt-1'>
                                    <button
                                        onClick={handleBack}
                                        className='px-4 py-1 mt-4 font-bold text-white uppercase rounded bg-gray-500 focus:outline-none focus:shadow-outline'
                                        type='button'
                                    >
                                        Back
                                    </button>
                                </div>
                            </div>
                        ) : (
                            <div className='box-content'>
                                <div className='grid justify-center items-center'>
                                    <div className='spinner h-12 w-12' />
                                </div>
                                <div>Confirming Order</div>
                            </div>
                        )
                    ) : (
                        <div className='box-content'>
                            {getStepContent(activeStep)}
                            <button
                                onClick={handleBack}
                                className='px-4 py-1 mt-4 font-bold text-white uppercase rounded bg-gray-500 focus:outline-none focus:shadow-outline'
                                disabled={activeStep === 0}
                            >
                                Back
                            </button>
                            <button
                                onClick={handleNext}
                                className='px-4 py-1 mt-4 mx-3 font-bold text-white uppercase bg-orange-400 rounded focus:outline-none focus:shadow-outline active:bg-orange-400 hover:bg-orange-500'
                            >
                                {activeStep === steps.length - 1
                                    ? 'Confirm Order'
                                    : 'Next'}
                            </button>
                        </div>
                    )}
                </div>
            </form>
        </div>
        <div className='px-4 sm:grid-cols-1'>
            <div className='grid h-auto py-5 bg-white rounded w-80 sm:py-3 sm:mt-0 px-3'>
                <h1 className='py-1 text-2xl font-bold font-Roboto'>
                    Order summary:{' '}
                </h1>
                <ul>
                    {cart.data.line_items.map((lineItem) => (
                        <li
                            className='flex justify-between font-semibold'
                            key={lineItem.id}
                        >
                            <div
                                item
                                className='flex flex-grow justify-between flex-col-2 align-items-right px-2 mx-auto py-2'
                            >
                                <h1 item className='py-2'>
                                    {lineItem.quantity} x{' '}
                                    {lineItem.name}
                                </h1>
                                <div className='grid px-4 text-center text-white bg-green-700 rounded focus:outline-none focus:shadow-outline place-items-center'>
                                    {
                                        lineItem.line_total
                                            .formatted_with_symbol
                                    }
                                </div>
                            </div>
                        </li>
                    ))}
                    <li className='flex justify-between px-2 font-semibold'>
                        <div className='flex flex-grow justify-between text-white uppercase bg-orange-400 rounded active:bg-orange-400 hover:bg-orange-500 flex-col-2 align-items-right px-2 mx-auto py-2'>
                            <h1 item>Subtotal</h1>
                            <p item>
                                {
                                    cart.data.subtotal
                                        .formatted_with_symbol
                                }
                            </p>
                        </div>
                    </li>                                       
                </ul>
            </div>
        </div>
    </div>
</React.Fragment>

我创建了如下步骤：并且我只能在更改 activeStep useState(0)、useState(1)、useState(2) 时访问这些步骤

// Stepper
const [activeStep, setActiveStep] = useState(0)
const steps = [
    'Customer information',
    'Shipping details',
    'Payment information',
]

const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1)

    if (activeStep === steps.length - 1) {
        handleCaptureCheckout()
    }
}

我创建了一个 switch 案例来测试它（案例 0、案例 1 和案例 2）。