Refactor CardSurah component to use single quotes for import statemen…

…ts and update button styling
SideeID · Apr 9, 2024 · f3006cb · f3006cb
1 parent 9b1f594
commit f3006cb
Showing 1 changed file with 23 additions and 16 deletions.
diff --git a/src/component/CardSurah.jsx b/src/component/CardSurah.jsx
@@ -1,9 +1,8 @@
-import { useState } from "react";
-import { FiPause, FiPlay } from "react-icons/fi";
-import useSound from "use-sound";
+import { useState } from 'react';
+import { FiPause, FiPlay } from 'react-icons/fi';
+import useSound from 'use-sound';
 
 function CardSurah({ item }) {
-
     const PlayButton = ({ sound }) => {
         const [play, { pause }] = useSound(sound, {
             onplay: () => setIsPlaying(true),
@@ -19,29 +18,37 @@ function CardSurah({ item }) {
                 play();
             }
             setIsPlaying(!isPlaying);
-        }
+        };
 
         return (
-            <button onClick={togglePlay} className="flex justify-center w-24 md:w-56 rounded-xl border-2 border-purple-600 px-5 py-3 text-base mb-3 font-medium text-white transition duration-200 hover:border-purple-100 active:border-purple-100" >
+            <button
+                onClick={togglePlay}
+                className='flex justify-center w-24 md:w-56 rounded-xl border-2 border-purple-200 px-5 py-3 text-base mb-3 font-medium text-gray-900 transition duration-200 hover:border-purple-600 active:border-purple-600'
+            >
                 {isPlaying ? <FiPause /> : <FiPlay />}
             </button>
         );
     };
 
     return (
-        <div className="w-full rounded-3xl p-px bg-gradient-to-b from-blue-800 to-purple-800">
-            <div className="rounded-[calc(1.5rem-1px)] p-5 bg-gray-900">
+        <div className='w-full rounded-3xl p-px bg-gradient-to-b hover:from-blue-800 hover:to-purple-800'>
+            <div className='rounded-[calc(1.5rem-1px)] p-5 bg-white'>
                 <div className='flex'>
-                    <h4 className='text-white w-auto'>{item.nomorAyat}.</h4>
-                    <PlayButton sound={item.audio["03"]} />
+                    <h4 className='text-gray-900 w-auto mr-1'>{item.nomorAyat}.</h4>
+                    <PlayButton sound={item.audio['03']} />
                 </div>
-                <p className='font-arab text-right text-white text-5xl py-5'>{item.teksArab}</p>
-                <p className='text-white mt-5 md:mt-10 pb-1 text-justify'>{item.teksLatin}</p>
-                <p className='text-white md:mt-10 text-justify'>Artinya : {item.teksIndonesia}</p>
-
+                <p className='font-arab text-right text-gray-900 text-5xl py-5'>
+                    {item.teksArab}
+                </p>
+                <p className='text-gray-900 mt-5 md:mt-10 pb-1 text-justify'>
+                    {item.teksLatin}
+                </p>
+                <p className='text-gray-900 md:mt-10 text-justify'>
+                    Artinya : {item.teksIndonesia}
+                </p>
             </div>
         </div>
-    )
+    );
 }
 
-export default CardSurah
+export default CardSurah;