feat(footer): implement dynamic social media URLs in footer component

components/layout/footer/index.js

@@ -27,6 +27,22 @@ const head = [
   },
 ];
 
+function buildSocialUrl(name, value) {
+  if (!value) return null;
+  if (/^https?:\/\//i.test(value)) return value;
+  const handle = value.replace(/^@/, "").replace(/^\+/, "");
+  switch (name) {
+    case "instagram":
+      return `https://instagram.com/${handle}`;
+    case "telegram":
+      return `https://t.me/${handle}`;
+    case "whatsapp":
+      return `https://wa.me/${handle.replace(/\D/g, "")}`;
+    default:
+      return value;
+  }
+}
+
 function Footer({ matchedCity }) {
   const socialMedias = [
     {
@@ -114,20 +130,31 @@ function Footer({ matchedCity }) {
             همراه با ما باشید:
           </p>
           <ul className="flex items-center gap-[8px] sm:gap-[11px] md:gap-[13px] lg:gap-[15px]">
-            {socialMedias.map((item, idx) => (
-              <li
-                key={idx}
-                className="p-2.5 bg-[#EAECFA] hover-rotate-icon cursor-pointer rounded-full w-fit"
-              >
-                <Link
-                  href={matchedCity?.socialMedia[item.name] || "/"}
-                  className="min-h-fit"
-                  aria-label={item.name}
+            {socialMedias.map((item, idx) => {
+              const url = buildSocialUrl(item.name, matchedCity?.socialMedia?.[item.name]);
+              return (
+                <li
+                  key={idx}
+                  className="p-2.5 bg-[#EAECFA] hover-rotate-icon cursor-pointer rounded-full w-fit"
                 >
-                  {item.icon}
-                </Link>
-              </li>
-            ))}
+                  {url ? (
+                    <a
+                      href={url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="min-h-fit"
+                      aria-label={item.name}
+                    >
+                      {item.icon}
+                    </a>
+                  ) : (
+                    <span className="min-h-fit" aria-label={item.name}>
+                      {item.icon}
+                    </span>
+                  )}
+                </li>
+              );
+            })}
           </ul>
         </div>
         <div className="flex lg:hidden justify-center w-full mt-2">