src/theme/misc/Slider.tsx

import cn from "@utils/classnames.ts";

export default function Slider({
  className = "",
  width,
}: {
  className?: string;
  width: number;
}) {
  return (
    <div
      className={cn(
        className,
        "h-1 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700"
      )}
    >
      <div
        className="h-full rounded-full bg-yellow-500 duration-500 dark:bg-yellow-400"
        style={{ width: `${width}%` }}
      />
    </div>
  );
}