Minor Changes

lib/components/InputContent.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState } from "react";
 
-const InputContent = ({ error, setError, data, setData }) => {
+const InputContent = ({ error, setError, data, setData, colorScheme }) => {
   const [dataHeaders, setDataHeaders] = useState([
     {
       isUsed: true,
@@ -80,15 +80,18 @@ const InputContent = ({ error, setError, data, setData }) => {
                 value={dataItem.isUsed}
                 defaultChecked={dataItem.isUsed}
                 onChange={(e) => toggleChecked(e.target.value, dataItem)}
+                className={colorScheme == "dark" && "dark"}
               />
               <input
                 defaultValue={dataItem.header}
                 onChange={(e) => change(e, dataItem, "header")}
+                className={colorScheme == "dark" && "dark"}
               />
               <span> : </span>
               <input
                 defaultValue={dataItem.value}
                 onChange={(e) => change(e, dataItem, "value")}
+                className={colorScheme == "dark" && "dark"}
               />
             </div>
           );
@@ -99,6 +102,7 @@ const InputContent = ({ error, setError, data, setData }) => {
         <textarea
           defaultValue="{}"
           onChange={(e) => validateInput(e.target.value)}
+          className={colorScheme == "dark" && "dark"}
         />
         <p className="error">{error !== null && error}</p>
       </div>

lib/components/InputForm.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import axios from "axios";
 
-const InputForm = ({ data, setData }) => {
+const InputForm = ({ data, setData, colorScheme, endpointsList }) => {
   const APICall = async (endpoint, reqType) => {
     const req = async () => {
       let reqOptions = {
@@ -26,27 +26,36 @@ const InputForm = ({ data, setData }) => {
     };
     req();
   };
+  console.log(data);
   return (
     <div className="inputForm">
       <select
         name="reqType"
         id="reqType"
         defaultValue="GET"
         onChange={(e) => setData({ ...data, reqType: e.target.value })}
+        className={colorScheme == "dark" && "dark"}
       >
         <option value="GET">GET</option>
         <option value="POST">POST</option>
         <option value="DELETE">DELETE</option>
       </select>
+
       <input
+        type="input"
+        list="optionsList"
         defaultValue={data.endpoint}
         onChange={(e) => setData({ ...data, endpoint: e.target.value })}
         placeholder="Enter your endpoint"
+        className={colorScheme == "dark" && "dark"}
       />
-      <button
-        onClick={() => APICall(data.endpoint, data.reqType)}
-        // disabled={error !== null}
-      >
+      <datalist id="optionsList">
+        {endpointsList.map((o) => (
+          <option key={o}>{o}</option>
+        ))}
+      </datalist>
+
+      <button onClick={() => APICall(data.endpoint, data.reqType)}>
         Submit{" "}
       </button>
     </div>

lib/components/InputResponse.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import ReactJson from "react-json-view";
-const InputResponse = ({ data }) => {
+const InputResponse = ({ data, colorScheme }) => {
   let RJsonProps = {
     displayObjectSize: false,
     name: false,
@@ -19,13 +19,18 @@ const InputResponse = ({ data }) => {
           <div>
             <h3 className="title">Response: </h3>
             <ReactJson
+              theme={colorScheme == "dark" && "threezerotwofour"}
               src={data.response.data || data.response}
               {...RJsonProps}
             />
           </div>
           <div>
             <h3 className="title">Headers:</h3>
-            <ReactJson src={data.response.headers} {...RJsonProps} />
+            <ReactJson
+              theme={colorScheme == "dark" && "threezerotwofour"}
+              src={data.response.headers}
+              {...RJsonProps}
+            />
           </div>
         </>
       )}

lib/main.css

@@ -2,16 +2,12 @@
   padding: 5px 35px 5px 5px;
   font-size: 16px;
   border: 1px solid #ccc;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: url(https://img.icons8.com/material-outlined/24/000000/expand-arrow--v1.png)
-    94% / 15% no-repeat #fff;
+  border-radius: 5px;
 }
 
 .mockman input {
   font-size: 16px;
-  padding: 5px 35px 5px 5px;
+  padding: 5px 5px 5px 5px;
   border: 1px solid #ccc;
   border-radius: 5px;
 }
@@ -63,6 +59,7 @@
   margin: 10px;
   border-radius: 5px;
   overflow-wrap: anywhere;
+  word-break: break-word;
 }
 .title {
   font-weight: 300;
@@ -81,6 +78,10 @@ textarea {
   line-height: 1.5;
   font-size: 16px;
 }
+.dark {
+  background-color: black;
+  color: white;
+}
 .error {
   color: rgb(124, 24, 24);
   padding: 1rem;

lib/main.jsx

@@ -11,7 +11,7 @@ Add dependencies as per requirement
 Test the component by importing Mockman in src/main.tsx and run yarn dev to see the component in action 
 */
 
-function Mockman({ colorScheme = "standard" }) {
+function Mockman({ colorScheme = "standard", endpointsList }) {
   const defaultState = {
     reqType: "GET",
     endpoint: "/api/test-todos",
@@ -25,16 +25,22 @@ function Mockman({ colorScheme = "standard" }) {
   return (
     <div className={`mockman`}>
       <div className={`request-wrapper mockman-${colorScheme}`}>
-        <InputForm data={data} setData={setData} />
+        <InputForm
+          data={data}
+          setData={setData}
+          colorScheme={colorScheme}
+          endpointsList={endpointsList}
+        />
         <InputContent
           data={data}
           setData={setData}
           error={error}
           setError={setError}
+          colorScheme={colorScheme}
         />
       </div>
       <div className={`response-wrapper mockman-${colorScheme}`}>
-        <InputResponse data={data} />
+        <InputResponse data={data} colorScheme={colorScheme} />
       </div>
     </div>
   );

src/App.jsx

@@ -35,7 +35,14 @@ function App() {
         </div>
 
         <div className="mockmanjs">
-          <Mockman />
+          <Mockman
+            colorScheme="dark"
+            endpointsList={[
+              "/api/test-todos",
+              "/api/auth/signup",
+              "/api/auth/login",
+            ]}
+          />
           <div className="guidelines">
             <p>
               To test the above TODO-app, you can find it's mock-API