added alphabet emoji or alphbet text to the back of card in letterCard

recursivezero · Mar 1, 2025 · f9233a8 · f9233a8
1 parent 37702e0
commit f9233a8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/src/components/LetterCard.astro b/src/components/LetterCard.astro
@@ -28,8 +28,10 @@ const { item, category } = Astro.props;
       {
         item.image ? (
           <img src={`/assets/images/alphabets/${category}/${item.image}`} alt={item.letter} class="image" />
+        ) : item.emoji ? (
+          <p class="emoji">{item.emoji}</p>
         ) : (
-          <p class="character">{item.letter}</p>
+          <p class="flipped__text">{item.text}</p>
         )
       }
     </div>
@@ -75,9 +77,9 @@ const { item, category } = Astro.props;
       width: 100%;
       height: 100%;
       background-color: var(--border);
-      }
+    }
 
-    & .character {
+    & .character, .flipped__text {
       display: flex;
       justify-content: center;
       align-items: center;
@@ -98,6 +100,21 @@ const { item, category } = Astro.props;
       text-align: left;
     }
 
+    & .flipped__text {
+      font-size: 3.5rem;
+    }
+
+    & .emoji {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      font-size: clamp(5rem, 10vw, 8rem);
+      margin: 0;
+      line-height: 1;
+      text-align: center;
+    }
+
     & .card {
       background: linear-gradient(145deg, var(--background), color-mix(in srgb, var(--background) 97%, var(--text) 3%));
       border-radius: 1.25rem;

diff --git a/src/data/alphabets.json b/src/data/alphabets.json
@@ -9,8 +9,7 @@
         "code": 65,
         "text": "Apple",
         "description": "",
-        "emoji" : "🍎",
-        "image": "apple.jpg"
+        "emoji" : "🍎"
       },
       {
         "id": 2,
@@ -80,8 +79,8 @@
         "id": 10,
         "letter": "J",
         "code": 74,
-        "text": "Jam",
-        "emoji" : "🍓",
+        "text": "Jug",
+        "emoji" : "🏺",
         "description": ""
       },
       {
@@ -192,8 +191,8 @@
         "id": 24,
         "letter": "X",
         "code": 88,
-        "text": "X-ray",
-        "emoji" : "🦴",
+        "text": "xerox",
+        "emoji" : "🖨️",
         "description": ""
       },
       {