Changed toastr and button location, fix height, changed header (#31)

Author: sreeram-venkitesh

components/Header.jsx

@@ -0,0 +1,23 @@
+import { useState, useEffect } from "react";
+import { Settings } from "../icons/Settings";
+import Button from "./Button";
+
+const Header = () => {
+  // const handleSettings = () => console.log("test")
+
+  return (
+    <div className="flex flex-row items-center justify-between h-10 px-10 mb-5">
+      <p className="h-min font-mono text-lg bg-gradient-to-br from-fuchsia-500 via-purple-600 to-rose-600 inline-block text-transparent bg-clip-text">&#123; json.style &#125;</p>
+      <Button
+        size="medium"
+        style="secondary"
+        // onClick={handleSettings}
+        icon={Settings}
+        iconSize={20}
+        className="float-right align-top"
+      />
+    </div>
+  );
+};
+
+export default Header;

constants/toastr.js

@@ -1,7 +1,7 @@
 import { toast, Slide } from "react-toastify";
 
 const TOASTR_OPTIONS = {
-  position: toast.POSITION.TOP_CENTER,
+  position: toast.POSITION.BOTTOM_LEFT,
   transition: Slide,
   autoClose: 5000,
   hideProgressBar: false,

icons/Settings.js

@@ -0,0 +1,32 @@
+/** Icons generated by create-react-icons. Don't edit this file directly. **/
+import React from "react";
+import PropTypes from "prop-types";
+
+export function Settings(props) {
+  const { size, color, ...other } = props;
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      fill="none"
+      height={size}
+      width={size}
+      data-testid="settings"
+      {...other}
+    >
+      <path
+        d="M5.79059 2.66671L7.52859 0.928711C7.65361 0.803731 7.82315 0.733521 7.99992 0.733521C8.1767 0.733521 8.34624 0.803731 8.47126 0.928711L10.2093 2.66671H12.6666C12.8434 2.66671 13.013 2.73695 13.138 2.86197C13.263 2.987 13.3333 3.15657 13.3333 3.33338V5.79071L15.0713 7.52871C15.1962 7.65373 15.2664 7.82327 15.2664 8.00004C15.2664 8.17682 15.1962 8.34636 15.0713 8.47138L13.3333 10.2094V12.6667C13.3333 12.8435 13.263 13.0131 13.138 13.1381C13.013 13.2631 12.8434 13.3334 12.6666 13.3334H10.2093L8.47126 15.0714C8.34624 15.1964 8.1767 15.2666 7.99992 15.2666C7.82315 15.2666 7.65361 15.1964 7.52859 15.0714L5.79059 13.3334H3.33326C3.15645 13.3334 2.98688 13.2631 2.86185 13.1381C2.73683 13.0131 2.66659 12.8435 2.66659 12.6667V10.2094L0.928589 8.47138C0.803609 8.34636 0.733398 8.17682 0.733398 8.00004C0.733398 7.82327 0.803609 7.65373 0.928589 7.52871L2.66659 5.79071V3.33338C2.66659 3.15657 2.73683 2.987 2.86185 2.86197C2.98688 2.73695 3.15645 2.66671 3.33326 2.66671H5.79059ZM3.99992 4.00004V6.34338L2.34326 8.00004L3.99992 9.65671V12H6.34326L7.99992 13.6567L9.65659 12H11.9999V9.65671L13.6566 8.00004L11.9999 6.34338V4.00004H9.65659L7.99992 2.34338L6.34326 4.00004H3.99992ZM7.99992 10.6667C7.29268 10.6667 6.6144 10.3858 6.1143 9.88566C5.61421 9.38557 5.33326 8.70729 5.33326 8.00004C5.33326 7.2928 5.61421 6.61452 6.1143 6.11443C6.6144 5.61433 7.29268 5.33338 7.99992 5.33338C8.70717 5.33338 9.38544 5.61433 9.88554 6.11443C10.3856 6.61452 10.6666 7.2928 10.6666 8.00004C10.6666 8.70729 10.3856 9.38557 9.88554 9.88566C9.38544 10.3858 8.70717 10.6667 7.99992 10.6667ZM7.99992 9.33338C8.35354 9.33338 8.69268 9.1929 8.94273 8.94285C9.19278 8.6928 9.33325 8.35367 9.33325 8.00004C9.33325 7.64642 9.19278 7.30728 8.94273 7.05724C8.69268 6.80719 8.35354 6.66671 7.99992 6.66671C7.6463 6.66671 7.30716 6.80719 7.05711 7.05724C6.80707 7.30728 6.66659 7.64642 6.66659 8.00004C6.66659 8.35367 6.80707 8.6928 7.05711 8.94285C7.30716 9.1929 7.6463 9.33338 7.99992 9.33338Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
+
+Settings.defaultProps = {
+  color: "currentColor",
+  size: 24,
+};
+
+Settings.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};

pages/index.js

@@ -11,6 +11,7 @@ import Button from "../components/Button";
 import { CODE_EDITOR_THEME } from "../constants/theme";
 import { DEMO_JSON_STRING } from "../components/constants";
 import { Copy } from "../icons/Copy";
+import Header from "../components/Header";
 
 export default function Home() {
   const [inputString, setInputString] = useState(
@@ -63,18 +64,18 @@ export default function Home() {
   }, [inputString]);
 
   return (
-    <div className="h-screen flex-col justify-between bg-zinc-900 p-5">
+    <div>
       <Head>
         <title>JSON Style</title>
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main>
+      <main className="h-screen flex flex-col justify-between bg-zinc-900 p-5">
         <ToastContainer theme="dark" />
-        <p className="text-2xl text-center">JSON STYLE</p>
-        <div className="space-y-3 flex-col">
-          <div className="flex space-x-3 h-90">
+        <Header/>
+        <div className="space-y-3 grow flex flex-col">
+          <div className="flex grow space-x-3">
             <div className="w-full bg-[#282c34]">
               <Button
                 size="small"
@@ -84,7 +85,7 @@ export default function Home() {
               />
               <CodeMirror
                 autoFocus
-                height="548px"
+                height="590px"
                 theme="dark"
                 value={inputString}
                 extensions={editorExtensions}
@@ -102,7 +103,7 @@ export default function Home() {
                 disabled={outputString === ""}
               />
               <CodeMirror
-                height="548px"
+                height="590px"
                 theme={createTheme(CODE_EDITOR_THEME)}
                 editable={false}
                 value={outputString}
@@ -111,7 +112,7 @@ export default function Home() {
               />
             </div>
           </div>
-          <div className="flex bg-zinc-800 space-x-3 px-3 py-3 rounded spacy-x-2">
+          <div className="flex justify-end bg-zinc-800 space-x-3 px-3 py-3 rounded">
             <Button label="Format" onClick={handleFormat} />
             <Button label="Clear" onClick={handleClear} />
             <Button

tailwind.config.js

@@ -5,7 +5,12 @@ module.exports = {
     "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: "#701a75",
+        secondary: "#831843"
+      }
+    },
   },
   plugins: [],
 }