import { cva } from "class-variance-authority";
const Container = cva(
"bg-neutral-darker rounded-lg overflow-hidden w-full h-10",
);
const Bar = cva(
"h-full flex justify-center text-neutral-darker items-center text-base leading-[125%] transition-all duration-500 ease-in-out",
{
variants: {
status: {
completed: "bg-green-500",
loading: "bg-primary-highlight",
},
},
},
);
export function ProgressBar({ percent }) {
const Progress = percent >= 100 ? "completed" : "loading";
const Percentage = percent <= 100 ? `${percent}%` : `100%`;
return (
<div className={Container()}>
<div
style={{
width: `${percent}%`,
maxWidth: `100%`,
}}
className={Bar({ status: Progress })}
>
<p>{Percentage}</p>
</div>
</div>
);
}
O curso foi muito bom, apesar de ter q "reaprender" o css gostei do tailwind, não se preocupar em nome de class, pastas etc é o melhor de tudo, o que pega é a organização mesmo. Essa biblioteca que estava disponivel no curso ajuda a separar as responsabilidades de cada estilo, mas mesmo assim é um pouco ruim de visualizar as cores, a extensão que o Vinny mostra não pega no cva, teria algum outro jeito ou outra biblioteca para isso?
