Update src/App.js

src/App.js

@@ -1,5 +1,79 @@
 import React, { useState } from "react";
 
+// Zodiac Icon Components using Tabler Icons SVGs
+const ZodiacIcon = ({ sign, size = 24, className = "" }) => {
+  const iconPaths = {
+    taurus: [
+      "M6 3a6 6 0 0 0 12 0",
+      "M12 15m-6 0a6 6 0 1 0 12 0a6 6 0 1 0 -12 0",
+    ],
+    sagittarius: ["M4 20l16 -16", "M13 4h7v7", "M6.5 12.5l5 5"],
+    pisces: ["M5 3a21 21 0 0 1 0 18", "M19 3a21 21 0 0 0 0 18", "M5 12l14 0"],
+    libra: ["M5 20l14 0", "M5 17h5v-.3a7 7 0 1 1 4 0v.3h5"],
+    gemini: [
+      "M3 3a21 21 0 0 0 18 0",
+      "M3 21a21 21 0 0 1 18 0",
+      "M7 4.5l0 15",
+      "M17 4.5l0 15",
+    ],
+    leo: [
+      "M13 17a4 4 0 1 0 8 0",
+      "M6 16m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
+      "M11 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0",
+      "M7 7c0 3 2 5 2 9",
+      "M15 7c0 4 -2 6 -2 10",
+    ],
+    virgo: [
+      "M3 4a2 2 0 0 1 2 2v9",
+      "M5 6a2 2 0 0 1 4 0v9",
+      "M9 6a2 2 0 0 1 4 0v10a7 5 0 0 0 7 5",
+      "M12 21a7 5 0 0 0 7 -5v-2a3 3 0 0 0 -6 0",
+    ],
+    aquarius: [
+      "M3 10l3 -3l3 3l3 -3l3 3l3 -3l3 3",
+      "M3 17l3 -3l3 3l3 -3l3 3l3 -3l3 3",
+    ],
+    aries: ["M12 5a5 5 0 1 0 -4 8", "M16 13a5 5 0 1 0 -4 -8", "M12 21l0 -16"],
+    cancer: [
+      "M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
+      "M18 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
+      "M3 12a10 6.5 0 0 1 14 -6.5",
+      "M21 12a10 6.5 0 0 1 -14 6.5",
+    ],
+    scorpio: [
+      "M3 4a2 2 0 0 1 2 2v9",
+      "M5 6a2 2 0 0 1 4 0v9",
+      "M9 6a2 2 0 0 1 4 0v10a3 3 0 0 0 3 3h5l-3 -3m0 6l3 -3",
+    ],
+    capricorn: [
+      "M4 4a3 3 0 0 1 3 3v9",
+      "M7 7a3 3 0 0 1 6 0v11a3 3 0 0 1 -3 3",
+      "M16 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
+    ],
+  };
+
+  const paths = iconPaths[sign] || [];
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      {paths.map((path, index) => (
+        <path key={index} d={path} />
+      ))}
+    </svg>
+  );
+};
+
 const HoroscopeApp = () => {
   const [selectedSign, setSelectedSign] = useState("taurus");
   const [selectedGender, setSelectedGender] = useState("female");
@@ -123,7 +197,7 @@ const HoroscopeApp = () => {
     {
       id: "relationship",
       name: "Relationship",
-      icon: <i class="ri-team-line"></i>,
+      icon: <i className="ri-team-line"></i>,
     },
     {
       id: "finance",
@@ -367,10 +441,16 @@ const HoroscopeApp = () => {
                             e.target.nextSibling.style.display = "block";
                           }}
                         />
-                      ) : null}
+                      ) : (
+                        <ZodiacIcon
+                          sign={sign.id}
+                          size={28}
+                          className="text-gray-600"
+                        />
+                      )}
                       <span
                         style={{
-                          display: getImagePath(sign) ? "none" : "block",
+                          display: getImagePath(sign) ? "none" : "none",
                         }}
                       >
                         {sign.emoji}
@@ -379,7 +459,11 @@ const HoroscopeApp = () => {
                   </div>
                 </div>
                 <p className="text-xs font-medium mt-3 text-center flex items-center justify-center gap-1">
-                  <span className="text-sm">{sign.symbol}</span>
+                  <ZodiacIcon
+                    sign={sign.id}
+                    size={16}
+                    className="text-current"
+                  />
                   {sign.name}
                 </p>
               </div>
@@ -468,12 +552,16 @@ const HoroscopeApp = () => {
                         e.target.nextSibling.style.display = "block";
                       }}
                     />
-                  ) : null}
+                  ) : (
+                    <ZodiacIcon
+                      sign={getCurrentSign()?.id}
+                      size={32}
+                      className="text-gray-600"
+                    />
+                  )}
                   <span
                     style={{
-                      display: getImagePath(getCurrentSign())
-                        ? "none"
-                        : "block",
+                      display: getImagePath(getCurrentSign()) ? "none" : "none",
                     }}
                   >
                     {getCurrentSign()?.emoji}
@@ -487,7 +575,11 @@ const HoroscopeApp = () => {
                 <i className="ri-pulse-line text-xl"></i>
               </h2>
               <div className="flex items-center gap-2">
-                <span className="text-xl">{getCurrentSign()?.symbol}</span>
+                <ZodiacIcon
+                  sign={getCurrentSign()?.id}
+                  size={20}
+                  className="text-current"
+                />
                 <span className="font-semibold">{getCurrentSign()?.name}</span>
               </div>
             </div>
@@ -577,4 +669,4 @@ const HoroscopeApp = () => {
   );
 };
 
-export default HoroscopeApp;
+export default HoroscopeApp;