Timeline Control

import * as TimelineSlider from "@/components/limeplay/timeline-control"
import { Duration, HoverTime } from "@/components/limeplay/timeline-labels"

export function TimelineSliderControl() {
  return (
    <div className="relative w-full grow">
      <TimelineSlider.Root className="h-1 rounded-full focus-area -focus-area-x-2 -focus-area-y-14">
        <TimelineSlider.Track className="overflow-hidden rounded-full">
          <TimelineSlider.Progress />
          <TimelineSlider.Buffered variant="combined" />
        </TimelineSlider.Track>
        <TimelineSlider.Thumb
          showWithHover
          className="absolute h-8 w-px rounded-full bg-primary/60"
        />
        <TimelineSlider.Thumb
          showWithHover
          className="top-auto! bottom-[calc(100%+16px)] flex h-auto w-fit bg-transparent text-xs font-medium"
        >
          <HoverTime />
          <Duration className="text-primary/60" />
        </TimelineSlider.Thumb>
      </TimelineSlider.Root>
    </div>
  )
}