feat: audio

src/components/ui/slider.tsx

@@ -0,0 +1,41 @@
+import * as SliderPrimitive from '@radix-ui/react-slider'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & { hideThumb?: boolean }
+>(({ className, ...props }, ref) => {
+  const [isHovered, setIsHovered] = React.useState(false)
+
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={cn('relative flex w-full touch-none select-none items-center', className)}
+      {...props}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onTouchStart={() => setIsHovered(true)}
+      onTouchEnd={() => setIsHovered(false)}
+    >
+      <SliderPrimitive.Track
+        className={cn(
+          'relative w-full grow overflow-hidden rounded-full bg-primary/20 cursor-pointer transition-all',
+          isHovered ? 'h-3' : 'h-1.5'
+        )}
+      >
+        <SliderPrimitive.Range className="absolute h-full bg-primary rounded-full" />
+      </SliderPrimitive.Track>
+      {/* <SliderPrimitive.Thumb
+        className={cn(
+          'block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-all duration-300 cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+          isHovered ? 'opacity-100' : 'opacity-0'
+        )}
+      /> */}
+    </SliderPrimitive.Root>
+  )
+})
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }