Scrub Bar

import * as React from "react";

import {
  ScrubBarContainer,
  ScrubBarProgress,
  ScrubBarThumb,
  ScrubBarTimeLabel,
  ScrubBarTrack,
} from "@/components/ui/scrub-bar";

export function ScrubBarExample() {
  const [value, setValue] = React.useState(30);
  const duration = 100;

  return (
    <ScrubBarContainer duration={duration} value={value} onScrub={setValue}>
      <ScrubBarTimeLabel time={value} />
      <ScrubBarTrack className="mx-2">
        <ScrubBarProgress />
        <ScrubBarThumb />
      </ScrubBarTrack>
      <ScrubBarTimeLabel time={duration} />
    </ScrubBarContainer>
  );
}