create CategoryPresenter.js

+import React from "react";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowDown, faPlus } from "@fortawesome/free-solid-svg-icons";
+
+const CategoryContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  svg {
+    font-size: 20px;
+  }
+  span {
+    margin-left: 10px;
+    font-size: 20px;
+  }
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
+`;
+
+const ItemListContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 15px;
+`;
+
+const ItemList = styled.ul`
+  align-items: center;
+  svg {
+    margin: 0px 10px;
+  }
+`;
+
+const Item = styled.li``;
+
+const ItemText = styled.span`
+  font-family: "Ubuntu", sans-serif;
+`;
+
+const StyledLink = styled(Link)`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  color: white;
+  cursor: pointer;
+  &:hover {
+    background-color: white;
+    color: #667aff;
+  }
+`;
+
+export default ({ location }) => {
+  return (
+    <>
+      <CategoryContainer>
+        <ItemListContainer>
+          <ItemList>
+            <FontAwesomeIcon icon={faArrowDown} /> Category
+            <FontAwesomeIcon icon={faPlus} />
+            <StyledLink>
+              <Item>
+                <ItemText># Music</ItemText>
+              </Item>
+            </StyledLink>
+          </ItemList>
+        </ItemListContainer>
+      </CategoryContainer>
+    </>
+  );
+};