scrub-bar-demo

1"use client"
2 
3import * as React from "react"
4 
5import {
6  ScrubBarContainer,
7  ScrubBarProgress,
8  ScrubBarThumb,
9  ScrubBarTimeLabel,
10  ScrubBarTrack,
11} from "@/components/ui/scrub-bar"
12 
13const ScrubBarDemo = () => {
14  const [value, setValue] = React.useState(30)
15  const [isScrubbing, setIsScrubbing] = React.useState(false)
16  const duration = 100
17 
18  return (
19    <div className="flex w-full max-w-sm flex-col items-center gap-4 p-4">
20      <ScrubBarContainer
21        duration={duration}
22        value={value}
23        onScrub={setValue}
24        onScrubStart={() => setIsScrubbing(true)}
25        onScrubEnd={() => setIsScrubbing(false)}
26        className="w-full"
27      >
28        <ScrubBarTimeLabel time={value} className="w-10 text-center" />
29        <ScrubBarTrack className="mx-2">
30          <ScrubBarProgress />
31          <ScrubBarThumb className="bg-primary" data-scrubbing={isScrubbing} />
32        </ScrubBarTrack>
33        <ScrubBarTimeLabel time={duration} className="w-10 text-center" />
34      </ScrubBarContainer>
35    </div>
36  )
37}
38 
39export default ScrubBarDemo