Html 如何使难度栏动态化？

我有一个叫做难度条的组件。 我想根据难度水平使其动态化（即对于初学者，只有第一个点背景是彩色的，而对于中级，只有前两个点是彩色的，依此类推……） 我正在使用react with tailwind CSS。 请帮帮我。

从“React”导入React
常量难度bar=（）=>{
返回(
初学者
)
}
导出默认难度栏

您需要检查难度级别，并在此基础上，在每个圆圈分区中，将类别：bg white替换为bg secondary。感谢您的回答。请您向我展示一些代码逻辑，以便我更好地了解如何实现它？

import React from 'react'

const DifficultyBar = () => {
    return (
        <div class="max-w-xl mx-4 my-2">
        <p className="pb-2 px-2 font-bold">Beginner</p> 
        <div class="flex pb-3">
            <div class="flex-1 z-10">
                <div class="w-6 h-6 bg-secondary mx-0 rounded-full border-2 border-secondary">
                </div>
            </div>
    
    
            <div class="w-full align-center items-center align-middle content-center flex">
            <div class="w-full items-center align-middle align-center flex-1">
                    <div class="bg-white border-2 -ml-2 rounded-full border-secondary py-xs w-full"></div>
                </div>
            </div>
        
            
            <div class="flex-1 z-10">
                <div class="w-6 h-6 bg-white -ml-4 rounded-full border-2 border-secondary">
                </div>
            </div>
        
            <div class="w-full align-center items-center align-middle content-center flex">
            <div class="w-full items-center align-middle align-center flex-1">
                     <div class="bg-white border-2 -ml-2 rounded-full border-secondary py-xs w-full"></div>
                </div>
            </div>
        
            <div class="flex-1 z-10">
                <div class="w-6 h-6 bg-white -ml-4 rounded-full border-2 border-secondary">
                </div>
            </div>
        
        
            <div class="w-full align-center items-center align-middle content-center flex">
                <div class="w-full items-center align-middle align-center flex-1">
                     <div class="bg-white border-2 -ml-2 rounded-full border-secondary py-xs w-full"></div>
                </div>
            </div>
    
    
            <div class="flex-1 z-10">
                <div class="w-6 h-6 bg-white border-2 border-secondary -ml-4 rounded-full">
                </div>
            </div>  
        </div>
    </div>
    )
}

export default DifficultyBar