diff --git a/src/containers/Editor/Tools.tsx b/src/containers/Editor/Tools.tsx new file mode 100644 index 0000000..db94797 --- /dev/null +++ b/src/containers/Editor/Tools.tsx @@ -0,0 +1,85 @@ +import React from "react"; +import toast from "react-hot-toast"; +import { + AiOutlineFullscreen, + AiOutlineSave, + AiOutlineMinus, + AiOutlinePlus, + AiOutlineSearch, +} from "react-icons/ai"; +import { CgDockLeft } from "react-icons/cg"; +import { useConfig } from "src/hocs/config"; +import { ConfigActionType } from "src/reducer/reducer"; +import styled from "styled-components"; + +export const StyledTools = styled.div` + display: flex; + align-items: center; + gap: 4px; + flex-direction: row-reverse; + height: 20px; + border-bottom: 1px solid ${({ theme }) => theme.BLACK}; + padding: 4px 16px; + background: ${({ theme }) => theme.BLACK_SECONDARY}; + color: ${({ theme }) => theme.SILVER}; +`; + +const StyledToolElement = styled.button` + display: grid; + place-content: center; + font-size: 20px; + background: none; + color: ${({ theme }) => theme.FULL_WHITE}; + opacity: 0.6; + + &:hover { + opacity: 1; + } +`; + +export const Tools: React.FC = () => { + const { states, dispatch } = useConfig(); + const handleSave = () => { + localStorage.setItem("json", states.json); + toast.success("Saved JSON successfully!"); + }; + + const zoomIn = () => { + dispatch({ type: ConfigActionType.ZOOM_IN }); + }; + + const zoomOut = () => { + dispatch({ type: ConfigActionType.ZOOM_OUT }); + }; + + const handleCenter = () => { + dispatch({ type: ConfigActionType.CENTER_VIEW }); + }; + + const handleToggleEditor = () => { + dispatch({ type: ConfigActionType.TOGGLE_DOCK }); + }; + + return ( + + + + + + + + + + + + + + + + + + + + + ); +};