nile/src/pages/delta/Social.jsx

import Box from "@mui/material/Box";
import MailIcon from "@mui/icons-material/Mail";
import GitHubIcon from "@mui/icons-material/GitHub";
import LinkedInIcon from "@mui/icons-material/LinkedIn";
import { FaGitlab } from "react-icons/fa";
import { SiGitea } from "react-icons/si";

const socialLinks = [
  {
    url: "https://www.linkedin.com/in/elijah-parker-dunemask/",
    icon: <LinkedInIcon />,
  },
  {
    url: "mailto: elijahglennparker@outlook.com",
    icon: <MailIcon />,
  },
  {
    url: "https://gitea.dunemask.net/dunemask",
    icon: <SiGitea size="1.5rem" />,
  },
  {
    url: "https://gitlab.com/dunemask",
    icon: <FaGitlab size="1.5rem" />,
  },
  {
    url: "https://github.com/dunemask",
    icon: <GitHubIcon />,
  },
];

export default function Social() {
  return (
    <Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="contact">
      <Box style={{ boxShadow: "none", display: "flex", padding: 16 }}>
        <h3 style={{ paddingRight: 20 }}>Social</h3>
        <Box style={{ display: "flex", marginLeft: "auto", flexWrap: "wrap" }}>
          {socialLinks.map((v, i) => (
            <a
              key={i}
              href={v.url}
              style={{ margin: "auto 0", color: "black", padding: "0px 5px" }}
            >
              {v.icon}
            </a>
          ))}
        </Box>
      </Box>
    </Box>
  );
}