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">

next.config.js

@@ -41,13 +41,31 @@ const nextConfig = {
   // Enable standalone output for Docker
   output: 'standalone',
   async headers() {
+    const isDev = process.env.NODE_ENV !== 'production';
+    let apiOrigin = '';
+    try {
+      apiOrigin = new URL(process.env.NEXT_PUBLIC_API_URL).origin;
+    } catch {
+      apiOrigin = '';
+    }
+
+    const connectSrc = [
+      "'self'",
+      apiOrigin,
+      'https://clinic-pro.ir',
+      'https://back-dev.clinic-pro.ir',
+      ...(isDev ? ['ws:', 'wss:'] : []),
+    ]
+      .filter(Boolean)
+      .join(' ');
+
     const csp = [
       "default-src 'self'",
       "img-src 'self' https: data: blob:",
       "script-src 'self' 'unsafe-inline' 'unsafe-eval'",
       "style-src 'self' 'unsafe-inline'",
       "font-src 'self' data:",
-      "connect-src 'self' https://api.clinic-pro.ir https://back-dev.clinic-pro.ir",
+      'connect-src ' + connectSrc,
       "frame-ancestors 'none'",
       "object-src 'none'",
       "base-uri 'self'",