feat(tailwind): convert Sound component

From styled-components to tailwindcss
mateusfg7 · Aug 18, 2022 · a60fa97 · a60fa97
1 parent 35a4fbb
commit a60fa97
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 94 deletions.
diff --git a/src/components/Sound/index.tsx b/src/components/Sound/index.tsx
@@ -4,7 +4,6 @@ import Image from 'next/image'
 import { Howl } from 'howler'
 
 import { VolumeController } from '../VolumeController'
-import { SoundComponent, SoundButton } from './styles'
 
 export interface ISound {
   name: string
@@ -22,23 +21,20 @@ export const Sound: React.FC<ISound> = ({ name, iconFile, audioFile }) => {
 
   const [soundIsActive, setSoundIsActive] = useState(false)
   const [howlSoundInstance, setHowlSoundInstance] = useState<Howl | null>(null)
-  const [soundIsLoading, setSoundIsLoading] = useState(true)
   const [currentSoundVolume, setCurrentSoundVolume] = useState(1)
 
   useEffect(() => {
     setHowlSoundInstance(
       new Howl({
         src: `./sounds/${audioFile.name}`,
         loop: true,
-        onload: () => {
-          setSoundIsLoading(false)
-        }
+        html5: true
       })
     )
   }, [])
 
   async function toggleSoundState() {
-    if (howlSoundInstance && !soundIsLoading) {
+    if (howlSoundInstance) {
       if (soundIsActive) {
         howlSoundInstance.fade(currentSoundVolume, 0, FADE_TIME_MS)
         await sleep(FADE_TIME_MS)
@@ -60,20 +56,18 @@ export const Sound: React.FC<ISound> = ({ name, iconFile, audioFile }) => {
   }
 
   return (
-    <SoundComponent title={name}>
-      <SoundButton
+    <div title={name} className="flex flex-col justify-center items-center w-24 h-24">
+      <div
         id={`${name}-button`}
-        className={`${soundIsActive ? 'selected' : ''} ${
-          soundIsLoading && 'disabled'
-        } umami--click--${name}-sound`}
+        className={`umami--click--${name}-sound flex justify-center items-center w-24 h-24 rounded-[10%] cursor-pointer transition-colors duration-300 text-white/50 md:hover:shadow-sound md:hover:bg-white/10 ${soundIsActive && 'text-white rounded-b-none md:shadow-sound md:bg-white/10'}`}
         onClick={() => toggleSoundState()}
       >
-        <Image src={`/assets/${iconFile}`} alt={name} width={80} height={80} />
-      </SoundButton>
+        <Image src={`/assets/${iconFile}`} alt={name} width={80} height={80} className={`opacity-70 md:hover:opacity-100 ${soundIsActive && 'opacity-100'}`}/>
+      </div>
       <VolumeController
         state={soundIsActive}
         handleSoundVolume={handleSoundVolume}
       />
-    </SoundComponent>
+    </div>
   )
 }
diff --git a/src/components/Sound/styles.ts b/src/components/Sound/styles.ts