create react codes for testing

@@ -7,6 +7,9 @@ const Header = Styled.div`
     justify-content: center;
     margin: 10px 0px;
     font-size: 25px;
+    font-family: 'Source Code Pro';
+    font-weight: 200;
+    font-size: 40px;
 `;
 
 export default () => {

 import React from "react";
 import Styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faList, faAddressBook } from "@fortawesome/free-solid-svg-icons";
+import PropTypes from "prop-types";
 
-const MenuBox = Styled.div`
-    width: 30%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 10px;
-    border-top: 1px solid black;
-    border-right: 1px solid black;
+const Container = Styled.div`
+  width: 400px;
+  height: 100%;
 `;
 
-const MenuList = Styled.ol`
-`;
-
-const MenuItem = Styled.li`
-`;
+const Switch = ({ checked = false, isChecked, onClick }) => (
+  <Container checked={checked} onClick={onClick} isChecked={isChecked} />
+);
 
-const Link = Styled.a`
-`;
+Switch.propTypes = {
+  checked: PropTypes.bool,
+  isChecked: PropTypes.func,
+  onClick: PropTypes.func,
+};
 
 export default () => {
-  return (
-    <MenuBox>
-      <MenuList>
-        <MenuItem>
-          <Link href="">1. What is KHU Chat?</Link>
-        </MenuItem>
-      </MenuList>
-    </MenuBox>
-  );
+  return <Switch />;
 };

+import { useState } from "react";
+
+export default (args) => {
+  const [value, setValue] = useState(args);
+
+  const onClick = (e) => {};
+};