create HomeCalendar component

+import React from "react";
+import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
+
+const HomeCalendarWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 50%;
+  width: 100%;
+`;
+
+const CalenderBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  border: 1px solid;
+`;
+
+const CalenderMenuBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  height: 15%;
+  width: 100%;
+  border: 1px solid;
+`;
+
+const DateInfoSpan = styled.span`
+  font-size: 15px;
+  font-family: "Kanit", sans-serif;
+`;
+
+const DateBodyBox = styled.div`
+  height: 85%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const DateRow = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+`;
+
+const DateText = styled.span`
+  font-family: "Overpass", sans-serif;
+  color: ${(props) => {
+    if (props.className === "Sunday") return "#EA2027";
+    else if (props.className === "Saturday") return "#0652DD";
+  }};
+`;
+
+export default () => {
+  return (
+    <HomeCalendarWrapper>
+      <CalenderBox>
+        <CalenderMenuBox>
+          <FontAwesomeIcon icon={faArrowLeft} />
+          <DateInfoSpan>May 2020</DateInfoSpan>
+          <FontAwesomeIcon icon={faArrowRight} />
+        </CalenderMenuBox>
+        <DateBodyBox>
+          <DateRow>
+            <DateText className="Sunday">SUN</DateText>
+            <DateText>MON</DateText>
+            <DateText>TUE</DateText>
+            <DateText>WED</DateText>
+            <DateText>THU</DateText>
+            <DateText>FRI</DateText>
+            <DateText className="Saturday">SAT</DateText>
+          </DateRow>
+          <DateRow>
+            <DateText>26</DateText>
+            <DateText>27</DateText>
+            <DateText>28</DateText>
+            <DateText>29</DateText>
+            <DateText>30</DateText>
+            <DateText>1</DateText>
+            <DateText>2</DateText>
+          </DateRow>
+        </DateBodyBox>
+      </CalenderBox>
+    </HomeCalendarWrapper>
+  );
+};