Last active
July 26, 2024 10:01
-
-
Save dmurawsky/054715236a4d6411a5dba354ff7ca0b6 to your computer and use it in GitHub Desktop.
Progress bar using Tailwind CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default function ProgressBar({ currentLevel }: { currentLevel: number }) { | |
return ( | |
<div className="flex justify-between items-center font-mono relative"> | |
{Array.from({ length: 9 }, (_, i) => i).map((index) => ( | |
<div | |
key={index} | |
className={`absolute h-1 z-0 ${index < currentLevel - 1 ? "bg-white" : "bg-zinc-800"}`} | |
style={{ left: `calc(${(index / 10) * 100}% + 4%)`, width: `11%` }} | |
></div> | |
))} | |
{Array.from({ length: 10 }, (_, i) => i + 1).map((level) => ( | |
<div | |
key={level} | |
className={`relative z-20 w-6 h-6 text-xs md:text-base md:w-10 md:h-10 rounded-full flex items-center justify-center font-bold ${ | |
level <= currentLevel ? "bg-white text-black" : "bg-zinc-800 text-white" | |
}`} | |
> | |
{level} | |
</div> | |
))} | |
</div> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment