Progress

"use client";

import * as Progress from "@lora-ui/progress";

export default function Base() {
  return (
    <Progress.Root
      aria-label="progress"
      className="relative flex h-2 w-[400px] rounded-full bg-[#eaecf0] dark:bg-[#333741]"
      min={0}
      max={100}
      now={70}
    >
      <Progress.Indicator
        className="absolute left-0 top-0 h-full rounded-full bg-[#7f56d9] dark:bg-[#7f56d9]"
        now={70}
      >
        <span className="absolute right-0 top-full translate-y-2 text-sm font-medium text-[#344054] dark:text-[#cecfd2]">
          {70 + "%"}
        </span>
      </Progress.Indicator>
    </Progress.Root>
  );
}