forked from pinks/eris
1
0
Fork 0
eris/ui/Progress.tsx

28 lines
791 B
TypeScript
Raw Permalink Normal View History

2023-10-05 09:00:51 +00:00
import React from "react";
2023-10-21 10:40:42 +00:00
import { cx } from "twind/core";
2023-10-05 09:00:51 +00:00
export function Progress(props: { value: number; className?: string }) {
const { value, className } = props;
return (
<div
className={cx(
"flex items-stretch overflow-hidden rounded-md bg-zinc-200 text-xs text-white dark:bg-zinc-800",
className,
)}
>
<div
className="bg-stripes flex items-center justify-center overflow-hidden rounded-md bg-sky-500 transition-[flex-grow] duration-1000"
style={{ flexGrow: value }}
>
{(value * 100).toFixed(0)}%
</div>
<div
className="flex items-center justify-center overflow-hidden transition-[flex-grow] duration-500"
style={{ flexGrow: 1 - value }}
>
</div>
</div>
);
}