feat: convert footer links into icons

Author: songlim327

src/css/footer.css

@@ -0,0 +1,29 @@
+.footer {
+  padding: var(--ifm-footer-padding-vertical) var(--ifm-footer-padding-horizontal);
+  background-color: var(--ifm-footer-background-color);
+  color: var(--ifm-footer-color);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.footer a {
+  color: var(--ifm-footer-link-color);
+  line-height: 2;
+}
+
+.footer p {
+  color: var(--ifm-footer-link-color);
+  line-height: 2;
+}
+
+.footer a:hover {
+  color: var(--ifm-footer-link-hover-color);
+}
+
+.linkContainer {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  margin-bottom: 10px;
+}

src/theme/Footer/index.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { FaHome, FaFacebook, FaYoutube } from "react-icons/fa";
+import "@site/src/css/footer.css";
+import siteConfig from "@generated/docusaurus.config";
+
+const iconMap = {
+  Home: <FaHome size={24} />,
+  Facebook: <FaFacebook size={24} />,
+  Youtube: <FaYoutube size={24} />,
+};
+
+const Link = ({ key, href, label }) => (
+  <a key={key} href={href} target="_blank" rel="noopener noreferrer" className="footer-link-item">
+    {iconMap[label] || label}
+  </a>
+);
+
+export default function FooterWrapper() {
+  const items = siteConfig.themeConfig.footer.links[0].items;
+  return (
+    <footer className={"footer"}>
+      <div>
+        <h4>Community</h4>
+      </div>
+      <div className={"linkContainer"}>
+        {items.map((item) => (
+          <Link key={item.label} href={item.href} label={item.label} />
+        ))}
+      </div>
+      <p>Copyright © {new Date().getFullYear()} eStream Software</p>
+    </footer>
+  );
+}