GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-02-04 01:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

update icons

Browse Source
This commit is contained in:
Aykut Saraç 2022-02-15 16:30:54 +03:00
parent d3f9cca4d1
commit 5a5e3a009c
1 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Sidebar/index.tsx
View File

@ -3,17 +3,28 @@ import Link from "next/link";
import styled from "styled-components"; import styled from "styled-components";
import { useLocalStorage } from "usehooks-ts"; import { useLocalStorage } from "usehooks-ts";
import { FaFileImport } from "react-icons/fa"; import { FaFileImport } from "react-icons/fa";
import { MdAutoGraph, MdFormatLineSpacing } from "react-icons/md"; import {
MdUnfoldMore,
MdUnfoldLess,
} from "react-icons/md";
import { import {
AiFillHome, AiFillHome,
AiOutlineClear, AiOutlineClear,
AiFillGithub, AiFillGithub,
AiOutlineTwitter, AiOutlineTwitter,
AiFillControl, AiFillControl,
AiOutlineControl,
} from "react-icons/ai"; } from "react-icons/ai";
import {
CgArrowLongDownE,
CgArrowLongLeftE,
CgArrowLongRightE,
CgArrowLongUpE,
} from "react-icons/cg";
import { getNextLayout } from "src/containers/LiveEditor/helpers"; import { getNextLayout } from "src/containers/LiveEditor/helpers";
import { StorageConfig } from "src/typings/global"; import { StorageConfig } from "src/typings/global";
import { CanvasDirection } from "reaflow";
const StyledSidebar = styled.div` const StyledSidebar = styled.div`
display: flex; display: flex;
@ -89,6 +100,13 @@ const StyledImportFile = styled.label`
} }
`; `;
function getLayoutIcon(layout: CanvasDirection) {
if (layout === "LEFT") return <CgArrowLongRightE />;
if (layout === "UP") return <CgArrowLongDownE />;
if (layout === "RIGHT") return <CgArrowLongLeftE />;
return <CgArrowLongUpE />;
}
export const Sidebar: React.FC<{ export const Sidebar: React.FC<{
setJson: React.Dispatch<React.SetStateAction<string>>; setJson: React.Dispatch<React.SetStateAction<string>>;
}> = ({ setJson }) => { }> = ({ setJson }) => {
@ -99,6 +117,7 @@ export const Sidebar: React.FC<{
controls: true, controls: true,
}); });
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files) setJsonFile(e.target.files?.item(0)); if (e.target.files) setJsonFile(e.target.files?.item(0));
}; };
@ -159,14 +178,14 @@ export const Sidebar: React.FC<{
} }
title="Change Layout" title="Change Layout"
> >
<MdAutoGraph /> {getLayoutIcon(config.layout)}
</StyledElement> </StyledElement>
<StyledElement <StyledElement
title="Toggle Controls" title="Toggle Controls"
as="a" as="a"
onClick={() => toggle("controls")} onClick={() => toggle("controls")}
> >
<AiFillControl /> {config.controls ? <AiFillControl /> : <AiOutlineControl />}
</StyledElement> </StyledElement>
<StyledElement <StyledElement
@ -174,7 +193,7 @@ export const Sidebar: React.FC<{
title="Toggle Expand/Collapse" title="Toggle Expand/Collapse"
onClick={() => toggle("expand")} onClick={() => toggle("expand")}
> >
<MdFormatLineSpacing /> {config.expand ? <MdUnfoldMore /> : <MdUnfoldLess />}
</StyledElement> </StyledElement>
<StyledElement as="a" title="Import JSON File"> <StyledElement as="a" title="Import JSON File">
<StyledImportFile> <StyledImportFile>