Updated the card

nepalingo-web/src/components/Header.tsx

@@ -1,20 +1,11 @@
 import React from 'react';
 import styles from './header.module.css';
-import Card from './card/Card'
 const Header: React.FC = () => {
   return (
     <div className={styles.container}>
       <header className={styles.header}>
         <h1 className="text-3xl font-bold underline">Hello, World!</h1>
       </header>
-      <Card 
-        Word="Example"
-        TranslatedWord="उदाहरण"
-        Pronunciation="udāharaṇa"
-        DevenagiriSpelling="उदाहरण"
-        ImageUrl="https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/2.jpg"  // Replace with your image URL
-        PronounciationUrl="https://example.com/sound.mp3"  // Replace with your sound URL
-      />
     </div>
   );
 };

nepalingo-web/src/components/button/Button.tsx

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  const buttonClasses = `bg-blue-500 hover:md:bg-opacity-80 text-white font-bold py-2 px-4 rounded ${className}`;
+
+  return (
+    <button ref={ref} className={buttonClasses} {...rest}>
+      {children}
+    </button>
+  );
+});
+
+Button.displayName = 'Button';
+
+export default Button;

nepalingo-web/src/components/card/Card.tsx

@@ -47,7 +47,7 @@ const Card: React.FC<{
             <p className="absolute right-10 top-36 text-xs">{Pronunciation}</p>
             {PronounciationUrl && (
               <button onClick={handlePronunciation} className="absolute right-10 bottom-10">
-                {/* <FontAwesomeIcon icon="fa-solid fa-volume-high" /> */}
+                <FontAwesomeIcon icon="fa-solid fa-volume-high" />
               </button>
             )}
           </div>