Merge pull request #15 from sreeram-venkitesh/9-setup-common-textarea

sreeram-venkitesh · web-flow · commit a8f84174f516 · 2022-12-21T19:41:48.000+05:30
Added common Textarea
diff --git a/components/Button.jsx b/components/Button.jsx
@@ -7,7 +7,7 @@ const Button = ({
   size = "medium",
   onClick = () => {},
   disabled = false,
-  label = "Clicked",
+  label = "",
   ...otherProps
 }) => {
   const handleClick = () => {
diff --git a/components/Textarea.jsx b/components/Textarea.jsx
@@ -0,0 +1,30 @@
+import classnames from "classnames";
+
+const Textarea = ({
+  placeholder = "",
+  className = "",
+  rows = 3,
+  label = "",
+  disabled = false,
+  ...otherProps
+}) => {
+  return (
+    <div className={classnames(["textarea__wrapper", className])}>
+      {label && <label className="textarea-label">{label}</label>}
+      <div
+        className={classnames("textarea-input", {
+          "textarea-disabled": disabled,
+        })}
+      >
+        <textarea
+          placeholder={placeholder}
+          rows={rows}
+          disabled={disabled}
+          {...otherProps}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Textarea;
diff --git a/pages/index.js b/pages/index.js
@@ -1,19 +1,28 @@
 import Head from "next/head";
 import Footer from "../components/Footer";
 import Button from "../components/Button";
+import Textarea from "../components/Textarea";
 
 export default function Home() {
   return (
-    <div className="h-screen flex-col justify-between bg-black">
+    <div className="h-screen flex-col justify-between bg-black p-5">
       <Head>
         <title>JSON Style</title>
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
       <main>
-        <p className="text-2xl">Hello World!</p>
-        <Button className="ml-1" label="Click Me" />
+        <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>
       </main>
       <Footer />
     </div>
diff --git a/styles/application.scss b/styles/application.scss
@@ -7,3 +7,4 @@
 
 // components
 @import "./components/button";
+@import "./components/textarea";
diff --git a/styles/base/_index.scss b/styles/base/_index.scss
@@ -1,3 +1,3 @@
 body {
-  color: #ffffff;
+  color: #e4e4e7;
 }
diff --git a/styles/components/_textarea.scss b/styles/components/_textarea.scss
@@ -0,0 +1,48 @@
+.textarea__wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-grow: 1;
+
+  .textarea-label {
+    margin-bottom: 4px;
+  }
+
+  .textarea-input {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    font-size: 16px;
+    color: #cbd5e1;
+    background-color: #27272a;
+
+    textarea {
+      width: 100%;
+      color: inherit;
+      border: none;
+      font-size: inherit;
+      box-shadow: none;
+      outline: none;
+      padding: 10px;
+      max-height: 224px;
+      overflow-y: auto;
+      line-height: 1.5;
+      background-color: #27272a;
+
+      &::placeholder {
+        color: #e4e4e7;
+      }
+    }
+
+    &.textarea-disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      textarea {
+        cursor: not-allowed;
+      }
+    }
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -7,3 +7,4 @@`
`7`	`7`
`8`	`8`	`// components`
`9`	`9`	`@import "./components/button";`
	`10`	`+@import "./components/textarea";`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`body {`
`2`		`- color: #ffffff;`
	`2`	`+ color: #e4e4e7;`
`3`	`3`	`}`