Merge pull request #57 from codeacme17/fix

fix(Waveform): fix hight and width style setting

Author: codeacme17

example/src/components/visualizaion/EchoWaveform.tsx

@@ -6,8 +6,8 @@ import {
   useWaveform,
   usePlayer,
 } from '@echo-ui'
+import { useEffect } from 'react'
 import { Play, Square, Pause, Repeat, VolumeX } from 'lucide-react'
-import { useEffect, useState } from 'react'
 
 export const EchoWaveform = () => {
   const url = 'https://codeacme17.github.io/1llest-waveform-vue/audios/loop-6.mp3'
@@ -54,27 +54,17 @@ export const EchoWaveform = () => {
     setPickTime(e.time)
   }
 
-  const [tab, setTab] = useState('a')
-  const swichB = (c: 'a' | 'b') => {
-    setTab(c)
-  }
-
   return (
     <section className="w-2/3 flex flex-col justify-center items-center">
-      <button onClick={() => swichB(tab === 'a' ? 'b' : 'a')}>swichB</button>
-
-      {tab === 'a' ? (
-        <Waveform
-          data={data}
-          audioDuration={audioDuration.current}
-          percentage={percentage}
-          onClick={handleClick}
-          waveHeight={100}
-          hideCursorLabel
-        />
-      ) : (
-        <></>
-      )}
+      <Waveform
+        data={data}
+        audioDuration={audioDuration.current}
+        percentage={percentage}
+        onClick={handleClick}
+        waveHeight={100}
+        hideCursorLabel
+        className="w-full"
+      />
 
       <Button.Group className="mt-3" disabled={pending || error || !isReady}>
         <Button className="p-2" onClick={() => setLoop(!loop)} toggled={loop}>

packages/components/visualization/Waveform/Waveform.tsx

@@ -184,7 +184,6 @@ export const Waveform = forwardRef<WaveformRef, WaveformProps>((props, ref) => {
       ref={waveformRef}
       className={cn(base(), restProps.className)}
       style={{
-        height: HEIGHT,
         ...restProps.style,
         userSelect: 'none',
       }}

packages/components/visualization/Waveform/styles.ts

@@ -4,8 +4,8 @@ export const useStyle = tv({
   slots: {
     base: `text-foreground
     relative
-    w-full
-    h-full
+    w-96
+    h-20
     flex
     justify-center
     rounded-md