Merge pull request #86 from sirElvin/card_3

updated the card component

nepalingo-web/src/components/Header.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import styles from './header.module.css';
-
 const Header: React.FC = () => {
   return (
     <div className={styles.container}>

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,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);
+}