create sidebar content

src/components/Sidebar/index.tsx

@@ -1,7 +1,15 @@
 import Link from "next/link";
 import React from "react";
 import styled from "styled-components";
-import { AiFillHome } from "react-icons/ai";
+import {
+  AiFillHome,
+  AiOutlineClear,
+  AiFillGithub,
+  AiOutlineTwitter,
+} from "react-icons/ai";
+import { FaFileImport } from "react-icons/fa";
+import { useLocalStorage } from "usehooks-ts";
+import { defaultValue } from "src/pages/editor/JsonEditor";
 
 const StyledSidebar = styled.div`
   display: flex;
@@ -14,14 +22,12 @@ const StyledSidebar = styled.div`
 `;
 
 const StyledElement = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  text-align: center;
   font-size: 32px;
-  border-bottom: 1px solid ${({ theme }) => theme.SILVER};
   font-weight: 700;
   width: 100%;
   color: ${({ theme }) => theme.SILVER};
+  cursor: pointer;
 
   a {
     text-align: center;
@@ -33,8 +39,9 @@ const StyledElement = styled.div`
   }
 `;
 
-const StyledTitleWrapper = styled.span`
-  color: ${({ theme }) => theme.ORANGE};
+const StyledText = styled.span<{ secondary?: boolean }>`
+  color: ${({ theme, secondary }) =>
+    secondary ? theme.FULL_WHITE : theme.ORANGE};
 `;
 
 const StyledTopWrapper = styled.nav`
@@ -43,6 +50,11 @@ const StyledTopWrapper = styled.nav`
   flex-direction: column;
   align-items: center;
   width: 100%;
+
+  & > div,
+  a {
+    border-bottom: 1px solid ${({ theme }) => theme.SILVER_DARK};
+  }
 `;
 
 const StyledBottomWrapper = styled.nav`
@@ -51,13 +63,50 @@ const StyledBottomWrapper = styled.nav`
   flex-direction: column;
   align-items: center;
   width: 100%;
+
+  & > div,
+  a {
+    border-top: 1px solid ${({ theme }) => theme.SILVER_DARK};
+  }
 `;
 
 const StyledLogo = styled.div`
   color: ${({ theme }) => theme.FULL_WHITE};
 `;
 
+const StyledImportFile = styled.label`
+  cursor: pointer;
+
+  input[type="file"] {
+    display: none;
+  }
+`;
+
+const fileToJson = (file: File, setJson: (val: string) => void) => {
+  const reader = new FileReader();
+
+  reader.readAsText(file, "UTF-8");
+  reader.onload = function (data) {
+    setJson(data.target?.result as string);
+  };
+};
+
 export const Sidebar = () => {
+  const [jsonFile, setJsonFile] = React.useState<File | any>(null);
+  const [_, setJson] = useLocalStorage("json", JSON.stringify(defaultValue));
+
+  const handleClear = () => {
+    setJson("[]");
+  };
+
+  React.useEffect(() => {
+    if (jsonFile) {
+      fileToJson(jsonFile, setJson);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [jsonFile]);
+
   return (
     <StyledSidebar>
       <StyledTopWrapper>
@@ -65,7 +114,8 @@ export const Sidebar = () => {
           <Link href="/">
             <a>
               <StyledLogo>
-                <StyledTitleWrapper>J</StyledTitleWrapper>S
+                <StyledText>J</StyledText>
+                <StyledText secondary>V</StyledText>
               </StyledLogo>
             </a>
           </Link>
@@ -77,8 +127,39 @@ export const Sidebar = () => {
             </a>
           </Link>
         </StyledElement>
+        <StyledElement as="a" onClick={handleClear}>
+          <AiOutlineClear />
+        </StyledElement>
+        <StyledElement>
+          <a>
+            <StyledImportFile>
+              <input
+                key={jsonFile}
+                onChange={(e) => setJsonFile(e.target.files?.item(0))}
+                type="file"
+                accept="application/JSON"
+              />
+              <FaFileImport />
+            </StyledImportFile>
+          </a>
+        </StyledElement>
       </StyledTopWrapper>
-      <StyledBottomWrapper></StyledBottomWrapper>
+      <StyledBottomWrapper>
+        <StyledElement>
+          <Link href="https://twitter.com/aykutsarach">
+            <a rel="me" target="_blank">
+              <AiOutlineTwitter />
+            </a>
+          </Link>
+        </StyledElement>
+        <StyledElement>
+          <Link href="https://github.com/AykutSarac/jsonvisio.com">
+            <a rel="me" target="_blank">
+              <AiFillGithub />
+            </a>
+          </Link>
+        </StyledElement>
+      </StyledBottomWrapper>
     </StyledSidebar>
   );
 };