Adds support for X logo in org. socials and hide undefined social URLs (

ohcnetwork#491) * Adds support for twitter X logo in org. socials and support hiding undefined social URLs * Update lib/discussion.ts
Srayash · Aug 11, 2024 · 5679711 · 5679711
1 parent 38c9654
commit 5679711
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 16 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -2,26 +2,28 @@ import Image from "next/image";
 import { env } from "@/env.mjs";
 import { FaYoutube, FaLinkedin, FaGithub, FaEnvelope } from "react-icons/fa";
 import { ReactNode } from "react";
+import { BsTwitterX } from "react-icons/bs";
 
 const SocialLink = ({
   href,
   icon: Icon,
   label,
 }: {
-  href: string;
+  href?: string;
   icon: any;
   label: string;
-}) => (
-  <a
-    href={href}
-    target="_blank"
-    rel="noopener noreferrer"
-    className="text-gray-300 transition-colors duration-300 hover:text-[rgb(176,142,230)]"
-    aria-label={label}
-  >
-    <Icon className="h-6 w-6" />
-  </a>
-);
+}) =>
+  href && (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-gray-300 transition-colors duration-300 hover:text-[rgb(176,142,230)]"
+      aria-label={label}
+    >
+      <Icon className="h-6 w-6" />
+    </a>
+  );
 
 const FooterSection = ({
   title,
@@ -110,10 +112,18 @@ export default function Footer() {
                   label="GitHub"
                 />
                 <SocialLink
-                  href={`mailto:${env.NEXT_PUBLIC_CONTACT_EMAIL}`}
+                  href={
+                    env.NEXT_PUBLIC_CONTACT_EMAIL &&
+                    `mailto:${env.NEXT_PUBLIC_CONTACT_EMAIL}`
+                  }
                   icon={FaEnvelope}
                   label="Email"
                 />
+                <SocialLink
+                  href={env.NEXT_PUBLIC_X_URL}
+                  icon={BsTwitterX}
+                  label="Twitter"
+                />
               </div>
             </FooterSection>
           </div>

diff --git a/env.mjs b/env.mjs
@@ -17,6 +17,7 @@ export const env = createEnv({
     NEXT_PUBLIC_GITHUB_URL: z.string(),
     NEXT_PUBLIC_LINKEDIN_URL: z.string(),
     NEXT_PUBLIC_YOUTUBE_URL: z.string(),
+    NEXT_PUBLIC_X_URL: z.string().optional(),
     NEXT_PUBLIC_CONTACT_EMAIL: z.string(),
 
     // SEO details
@@ -32,7 +33,7 @@ export const env = createEnv({
 
     NEXT_PUBLIC_FEATURES: z.string(),
     NEXT_PUBLIC_DATA_SOURCE: z.string(),
-    NEXT_PUBLIC_FLAT_REPO_EXPLORER_URL: z.string()
+    NEXT_PUBLIC_FLAT_REPO_EXPLORER_URL: z.string(),
   },
   runtimeEnv: {
     NEXT_PUBLIC_ORG_NAME: process.env.NEXT_PUBLIC_ORG_NAME,
@@ -56,10 +57,12 @@ export const env = createEnv({
         : process.env.GITHUB_PAT,
     NEXT_PUBLIC_FEATURES: process.env.NEXT_PUBLIC_FEATURES,
     NEXT_PUBLIC_DATA_SOURCE: process.env.NEXT_PUBLIC_DATA_SOURCE,
-    NEXT_PUBLIC_FLAT_REPO_EXPLORER_URL: process.env.NEXT_PUBLIC_FLAT_REPO_EXPLORER_URL,
+    NEXT_PUBLIC_FLAT_REPO_EXPLORER_URL:
+      process.env.NEXT_PUBLIC_FLAT_REPO_EXPLORER_URL,
     NEXT_PUBLIC_GITHUB_URL: process.env.NEXT_PUBLIC_GITHUB_URL,
     NEXT_PUBLIC_LINKEDIN_URL: process.env.NEXT_PUBLIC_LINKEDIN_URL,
     NEXT_PUBLIC_YOUTUBE_URL: process.env.NEXT_PUBLIC_YOUTUBE_URL,
+    NEXT_PUBLIC_X_URL: process.env.NEXT_PUBLIC_X_URL,
     NEXT_PUBLIC_CONTACT_EMAIL: process.env.NEXT_PUBLIC_CONTACT_EMAIL,
   },
-});
+});