initial commit for GitHub

client/src/Header/Header.css

@@ -0,0 +1,25 @@
+#global-header {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  background-color: var(--mj-white);
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.navbar-title {
+  text-transform: uppercase;
+  font-size: 90%;
+}
+
+.list-group-item,
+.list-group-item.disabled {
+  background-color: transparent;
+  border: none;
+}
+
+.navbar-link {
+  background-color: transparent;
+}

client/src/Header/Header.tsx

@@ -0,0 +1,20 @@
+import { MeganJohns } from "../types/MeganJohns";
+import Title from "./Title";
+import NavList from "./NavList";
+import SocialBanner from "./SocialBanner/SocialBanner";
+import { Container } from "react-bootstrap";
+
+interface HeaderProps {
+  mj: MeganJohns;
+}
+
+export default function Header(props: HeaderProps) {
+  const mj = props.mj;
+  return (
+    <Container id="global-header" className="">
+      <SocialBanner socials={mj.bio.social_urls} />
+      <Title name={mj.bio.name} />
+      <NavList />
+    </Container>
+  );
+}

client/src/Header/NavList.tsx

@@ -0,0 +1,28 @@
+import { Col, Container, ListGroup, Row } from "react-bootstrap";
+import "./Header.css";
+
+export default function NavList() {
+  return (
+    <Container>
+      <Row className="justify-content-center">
+        <Col xs="auto">
+          <ListGroup horizontal className="justify-content-center navbar-title">
+            <ListGroup.Item>
+              <a href="#discography">Music</a>
+            </ListGroup.Item>
+            <ListGroup.Item>
+              <a href="#artwork">Art</a>
+            </ListGroup.Item>
+            <ListGroup.Item>
+              <a href="#videos">Videos</a>
+            </ListGroup.Item>
+            <ListGroup.Item>
+              <a href="#about">About</a>
+            </ListGroup.Item>
+            <ListGroup.Item disabled>News</ListGroup.Item>
+          </ListGroup>
+        </Col>
+      </Row>
+    </Container>
+  );
+}

client/src/Header/SocialBanner/SocialBanner.css

@@ -0,0 +1,14 @@
+.social-banner {
+  background-color: none;
+  border: none;
+}
+
+.social-icon {
+  border: inherit;
+  background-color: transparent;
+  color: var(--mj-gray);
+}
+
+.social-icon:hover {
+  color: var(--mj-dark-teal);
+}

client/src/Header/SocialBanner/SocialBanner.tsx

@@ -0,0 +1,48 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { SocialUrl } from "../../types/Bio";
+import {
+  faItunesNote,
+  faFacebook,
+  faSoundcloud,
+  faYoutube,
+  faInstagram,
+  faSpotify,
+  faBandcamp,
+  IconDefinition,
+} from "@fortawesome/free-brands-svg-icons";
+import { Container, ListGroup } from "react-bootstrap";
+import "./SocialBanner.css";
+
+interface SocialBannerProps {
+  socials: SocialUrl[];
+}
+
+export default function SocialBanner(props: SocialBannerProps) {
+  const socials = props.socials;
+  const socialIconMap: { [key: string]: IconDefinition } = {
+    itunes: faItunesNote,
+    facebook: faFacebook,
+    soundcloud: faSoundcloud,
+    youtube: faYoutube,
+    instagram: faInstagram,
+    spotify: faSpotify,
+    bandcamp: faBandcamp,
+  };
+
+  return (
+    <Container>
+      <ListGroup horizontal className="justify-content-center">
+        {socials.map((social) => (
+          <ListGroup.Item key={social.id} className="social-icon">
+            <a href={social.social_url} target="_blank">
+              <FontAwesomeIcon
+                icon={socialIconMap[social.social_name]}
+                className="social-icon"
+              />
+            </a>
+          </ListGroup.Item>
+        ))}
+      </ListGroup>
+    </Container>
+  );
+}

client/src/Header/Title.tsx

@@ -0,0 +1,15 @@
+import "./Header.css";
+
+interface TitleProps {
+  name: string;
+}
+
+export default function Title(props: TitleProps) {
+  return (
+    <h2>
+      <a href="#root" className="title navbar-title" id="title">
+        {props.name}
+      </a>
+    </h2>
+  );
+}