Merge pull request #28 from celestiaorg/jcs/footericons

feat: add social icons to footer
celestiaorg · Jan 10, 2025 · aad3263 · aad3263
2 parents 376291f + 5206d5a
commit aad3263
Show file tree

Hide file tree

Showing 3 changed files with 3,400 additions and 18 deletions.
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
@@ -44,32 +44,49 @@ const Footer = () => {
                 return (
                   <ul
                     key={index}
-                    className={`block w-1/2 lg:w-1/5 ${
-                      index === columns.length - 1 ? "" : "mb-10 lg:mb-0"
-                    }`}
+                    className={`block ${
+                      index === columns.length - 1 
+                        ? "w-full flex flex-row justify-end gap-4 order-last lg:order-none lg:flex-col lg:w-auto" 
+                        : "w-1/2 lg:w-1/5"
+                    } ${index === columns.length - 1 ? "" : "mb-10 lg:mb-0"}`}
                   >
                     {column.links.map((link, linkIndex) => {
                       const isInternal = isInternalLink(link.url);
                       return (
                         <li key={`col-${index}-link-${linkIndex}`}>
                           <Link
                             href={link.url}
-                            key={linkIndex}
+                            target={isInternal ? "_self" : "_blank"}
+                            rel={isInternal ? "" : "noopener noreferrer"}
                             className={`flex items-center group mb-4`}
                           >
-                            <Body className={`mr-1`} size={"md"}>
-                              {link.title}
-                            </Body>
-                            <Icon
-                              className={"flex-grow-0 flex-shrink-0"}
-                              border={false}
-                              transparentBg
-                              size={"xs"}
-                              Icon={<div className={"block h-4 w-4"}></div>}
-                              hover
-                              HoverIcon={<ArrowLongSVG />}
-                              direction={isInternal ? "down-right" : "up-right"}
-                            />
+                            {link.icon ? (
+                              <Icon
+                                Icon={<link.icon dark />}
+                                hover
+                                HoverIcon={<link.icon dark className="opacity-50" />}
+                                size="sm"
+                                border={false}
+                                transparentBg
+                                direction="up"
+                              />
+                            ) : (
+                              <>
+                                <Body className={`mr-1`} size={"md"}>
+                                  {link.title}
+                                </Body>
+                                <Icon
+                                  className={"flex-grow-0 flex-shrink-0"}
+                                  border={false}
+                                  transparentBg
+                                  size={"xs"}
+                                  Icon={<div className={"block h-4 w-4"}></div>}
+                                  hover
+                                  HoverIcon={<ArrowLongSVG />}
+                                  direction={isInternal ? "down-right" : "up-right"}
+                                />
+                              </>
+                            )}
                           </Link>
                         </li>
                       );

diff --git a/src/data/global/footer.js b/src/data/global/footer.js
@@ -1,3 +1,10 @@
+import XTwitterSVG from "@/macros/SVGs/XTwitterSVG";
+import DiscordSVG from "@/macros/SVGs/DiscordSVG";
+import TelegramSVG from "@/macros/SVGs/TelegramSVG";
+import RedditSVG from "@/macros/SVGs/RedditSVG";
+import GithubSVG from "@/macros/SVGs/GithubSVG";
+import ForumSVG from "@/macros/SVGs/ForumSVG";
+
 const footerData = () => {
 	const columns = [
 		{
@@ -51,11 +58,45 @@ const footerData = () => {
 					url: "/careers",
 				},
 				{
-					title: "Follow us",
+					title: "Community",
 					url: "/community",
 				},
 			],
 		},
+		{
+			links: [
+				{
+					title: "X (Twitter)",
+					url: "https://x.com/celestia",
+					icon: XTwitterSVG
+				},
+				{
+					title: "Discord",
+					url: "https://discord.com/invite/YsnTPcSfWQ",
+					icon: DiscordSVG
+				},
+				{
+					title: "Telegram",
+					url: "https://t.me/CelestiaCommunity/",
+					icon: TelegramSVG
+				},
+				{
+					title: "Reddit",
+					url: "https://www.reddit.com/r/CelestiaNetwork/",
+					icon: RedditSVG
+				},
+				{
+					title: "GitHub",
+					url: "https://github.com/celestiaorg/",
+					icon: GithubSVG
+				},
+				{
+					title: "Forum",
+					url: "https://forum.celestia.org/",
+					icon: ForumSVG
+				}
+			]
+		}
 	];
 
 	return columns;