Updated Card component

nepalingo-web/src/components/Header.tsx

@@ -1,12 +1,20 @@
 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/card/Card.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+
+const Card: React.FC<{
+  Word: string;
+  TranslatedWord: string;
+  Pronunciation: string;
+  DevenagiriSpelling: string;
+  ImageUrl?: string;
+  PronounciationUrl?: string;
+}> = ({ Word, TranslatedWord, Pronunciation, DevenagiriSpelling, ImageUrl, PronounciationUrl }) => {
+  const [isFlipped, setIsFlipped] = useState(false);
+  const [audio, setAudio] = useState<HTMLAudioElement | null>(null);
+
+  const handleFlip = () => {
+    setIsFlipped(!isFlipped);
+  };
+
+  const handlePronunciation = (event: React.MouseEvent) => {
+    event.stopPropagation();    
+    if (PronounciationUrl) {
+      if (audio) {
+        if (!audio.paused) {
+          audio.pause();
+          audio.currentTime = 0;
+        } else {
+          audio.play();
+        }
+      } else {
+        const newAudio = new Audio(PronounciationUrl);
+        setAudio(newAudio);
+        newAudio.play();
+      }
+    }
+  };
+
+  return (
+    <div>
+      <div className={`border-2 border-slate-400 relative w-96 h-72 ${isFlipped ? 'flipped' : ''}`} onClick={handleFlip} style={{ perspective: '1000px' }}>
+        <div className="text-4xl font-bold absolute inset-0 text-black flex justify-center items-center backface-hidden" style={{ transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)', transition: 'transform 0.6s' }}>
+          {!isFlipped && <div>{Word}</div>}
+        </div>
+        <div className="absolute inset-0 bg-white text-black flex justify-center items-center backface-hidden transform rotateY-180 font-bold" style={{ transform: isFlipped ? 'rotateY(0deg)' : 'rotateY(-180deg)', transition: 'transform 0.6s' }}>
+          <div className="flex flex-col items-start justify-center">
+            {ImageUrl && <img src={ImageUrl} alt={Word} className="absolute left-2 top-1/2 transform -translate-y-1/2 object-cover w-40 h-60" />}
+            <p className="absolute right-10 top-16 text-2xl font-bold">{TranslatedWord}</p>
+            <p className="absolute right-10 top-28 text-sm">{DevenagiriSpelling}</p>
+            <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" /> */}
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Card;

nepalingo-web/src/index.css

@@ -1,3 +1,19 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.backface-hidden {
+    backface-visibility: hidden;
+}
+.flipped .rotateY-180 {
+    transform: rotateY(0deg);
+}
+.flipped .rotateY-0 {
+    transform: rotateY(-180deg);
+}
+.rotateY-180 {
+    transform: rotateY(180deg);
+}
+.rotateY-0 {
+    transform: rotateY(0deg);
+}