Merge pull request #16 from sreeram-venkitesh/added-basic-ui

shreyakurian02 · web-flow · commit 060845c63710 · 2022-12-22T16:33:19.000+05:30
diff --git a/components/Footer.jsx b/components/Footer.jsx
@@ -9,7 +9,7 @@ const Footer = () => {
   }, []);
 
   return (
-    <div className="absolute bottom-0 flex flex-col space-y-0 w-screen text-center h-10 px-10 my-5">
+    <div className="flex flex-col space-y-0 w-screen text-center h-10 px-10 my-5">
       <span className="italic text-slate-500">
         {FOOTER_MESSAGES[randomNumber]}
       </span>
diff --git a/pages/index.js b/pages/index.js
@@ -5,7 +5,7 @@ import Textarea from "../components/Textarea";
 
 export default function Home() {
   return (
-    <div className="h-screen flex-col justify-between bg-black p-5">
+    <div className="h-screen flex-col justify-between bg-zinc-900 p-5">
       <Head>
         <title>JSON Style</title>
         <meta name="description" content="Generated by create next app" />
@@ -14,17 +14,28 @@ export default function Home() {
 
       <main>
         <p className="text-2xl text-center">JSON STYLE</p>
-        <div className="space-y-5">
-          <Textarea
-            className="w-1/2"
-            rows={10}
-            label="JSON String"
-            onChange={(e) => console.log(e.target.value)}
-          />
-          <Button className="ml-1" label="Click Me" />
+        <div className="space-y-3">
+          <div className="flex space-x-3 mt-5">
+            <Textarea
+              className="w-1/2"
+              rows={24}
+              label="JSON String"
+              onChange={(e) => console.log(e.target.value)}
+            />
+            <Textarea
+              className="w-1/2"
+              rows={24}
+              label="Output"
+              onChange={(e) => console.log(e.target.value)}
+            />
+          </div>
+          <div className="flex bg-zinc-800 space-x-3 px-1 py-3 rounded">
+            <Button className="ml-1" label="Format" />
+            <Button className="ml-1" label="Reset" />
+          </div>
         </div>
+        {/* <Footer /> */}
       </main>
-      <Footer />
     </div>
   );
 }
diff --git a/styles/base/_index.scss b/styles/base/_index.scss
@@ -1,3 +1,4 @@
 body {
   color: #e4e4e7;
+  background-color: rgb(24 24 27);
 }
diff --git a/styles/components/_textarea.scss b/styles/components/_textarea.scss
@@ -27,10 +27,10 @@
       box-shadow: none;
       outline: none;
       padding: 10px;
-      max-height: 224px;
       overflow-y: auto;
       line-height: 1.5;
       background-color: #27272a;
+      resize: none;
 
       &::placeholder {
         color: #e4e4e7;

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`body {`
`2`	`2`	`color: #e4e4e7;`
	`3`	`+ background-color: rgb(24 24 27);`
`3`	`4`	`}`