auto-component 0.0.34 → 0.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auto-component",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "main": "src/index.jsx",
   "peerDependencies": {
     "react": "^18.2.0",

package/src/auto-component.css

@@ -1,28 +1,22 @@
 #auto-component {
+  position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin: 40px 0;
   font-family: Arial, Helvetica, sans-serif
 }
-#auto-component-entry {
-  position: fixed;
-  bottom: 100px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 90%;
-  max-width: 700px;
+#auto-component div {
+  width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  padding: 0 20px;
-  background: #222;
-  border-radius: 10px;
-  border: 2px solid rgb(108, 108, 246);
+  
 }
 #auto-component input {
-  width: 100%;
+  width: 60%;
   height: 40px;
   border-radius: 5px;
   color: #444;
@@ -51,23 +45,16 @@
 #auto-component button:nth-child(3):hover {
   background: #dc3c3c;
 }
-#auto-component-tabs {
-  position: fixed;
-  bottom: 68px;
-  left: 50%;
-  transform: translateX(-50%);
+#auto-component div:nth-child(2) {
   display: flex;
-  flex-direction: row;
-  width: 100%;
-  max-width: 700px;
+  flex-direction: column;
 }
 .tab {
-  width: 30%;
   margin: 0 10%;
   padding: 4px 0;
-  background: #c6c7d3;
-  color: #fff;
-  border-radius: 0 0 5px 5px;
+  background: #444;
+  color: #aaa;
+  border-radius: 5px 5px 0 0;
   cursor: pointer;
 }
 .tab:hover {
@@ -75,20 +62,17 @@
   color: #eee;
 }
 .selected {
-  background: #444;
-  color: #aaa;
+  background: #c6c7d3;
+  color: #fff;
   font-size: 1.2rem;
+  pointer-events: none;
 }
-#auto-component-code {
-  position: fixed;
-  bottom: 180px;
-  left: 50%;
-  transform: translateX(-50%);
+#auto-component pre {
+  position: relative;
   text-align: left;
-  max-width: 600px;
-  width: 80%;
-  max-height: 300px;
-  min-height: 300px;
+  max-width: 90%;
+  min-width: 90%;
+  max-height: 60vh;
   background: #cdd1d9;
   color: #111;
   padding: 40px 10px 40px 10px;
@@ -98,7 +82,7 @@
   box-shadow: 0px 0px 5px #fff;
   white-space: pre-wrap;
 }
-.auto-component-copy {
+.copy-btn {
   position: absolute;
   top: 130px;
   right: 7%;
@@ -111,9 +95,6 @@
   color: #fff;
 }
 
-.auto-component-copy:hover {
+.copy-btn:hover {
   background: #666;
-}
-.hidden {
-  display: none;
 }

package/src/index.jsx

@@ -15,7 +15,7 @@ const AutoComponent = ({ exclusions }) => {
   const [ responseData, setResponseData ] = useState(null)
   const [ requestData, setRequestData ] = useState(null)
   
-  const [ activeTab, setActiveTab ] = useState('')
+  const [ activeTab, setActiveTab ] = useState('request')
   const [ history, setHistory ] = useState(["No History"])
 
 //**-------------------------**/
@@ -99,7 +99,7 @@ const AutoComponent = ({ exclusions }) => {
 
   const sendRequest = async () => {
     const url = "https://server-auto-component-46830ff262f8.herokuapp.com/api";
-    
+  
     try {
       const res = await fetch(url, {
         method: 'POST',
@@ -147,7 +147,6 @@ const AutoComponent = ({ exclusions }) => {
   }
 
   const handleGenerate = async (e) => {
-    console.log(currentHtml)
     await setRequestData({
       "userId": user,
       "request": currentRequest, 
@@ -168,12 +167,11 @@ const AutoComponent = ({ exclusions }) => {
     setHistory([])
   }
 
-  const handleRequestTab = async () => {
-    await setActiveTab(activeTab === 'response' || activeTab === '' ? 'request' : '');
+  const handleRequestTab = () => {
+    setActiveTab('request')
   }
-  
-  const handleResponseTab = async () => {
-    await setActiveTab(activeTab === 'request' || activeTab === '' ? 'response' : '');
+  const handleResponseTab = () => {
+    setActiveTab('response')
   }
 
   const copyToClipboard = async () => {
@@ -217,20 +215,12 @@ User ID:\n    `
       {/* create the display window */}
       <div id="auto-component">
         <div>
-          <p>test</p>
-        </div>
-        <div id="auto-component-code" className={`${!activeTab ? 'hidden' : ''} auto-component-code`}>
-          <pre>
-            {activeTab === 'request' ? getLog() : responseHtml}
-          </pre>
-        </div>
-        <div id="auto-component-entry">
           <input type="text" value={currentRequest} onChange={handleChange} placeholder="Enter a request"></input>
           <button onClick={handleGenerate}>Generate</button>
           <button onClick={handleReset}>X</button>
         </div>
         <div>
-          <div id='auto-component-tabs'>
+          <div>
            <div className={`${activeTab === 'request' ? 'selected' : ''} tab`} onClick={handleRequestTab}>
               Request
             </div>
@@ -238,8 +228,11 @@ User ID:\n    `
               Response
             </div>
           </div>
+          <pre>
+           {activeTab === 'request' ? getLog() : responseHtml}
+          </pre>
         </div>
-        <div className="auto-component-copy" onClick={copyToClipboard} style={activeTab !== 'response' ? { display: 'none' } : null}>
+        <div className="copy-btn" onClick={copyToClipboard} style={activeTab !== 'response' ? { display: 'none' } : null}>
           copy
         </div>
       </div>