the card component

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

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { PiSpeakerHighFill } from "react-icons/pi";
+
+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();  // Prevent the card from flipping
+    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">
+            <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>
+            <button onClick={handlePronunciation} className="absolute right-10 bottom-10">
+            <PiSpeakerHighFill />
+
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Card;

nepalingo-web/src/index.css

@@ -1,3 +1,23 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+  @tailwind base;
+  @tailwind components;
+  @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);
+    }