auto-component 0.0.32 → 0.0.34

package/package.json

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

package/src/auto-component.css

@@ -1,22 +1,28 @@
-#content-creator {
-  position: relative;
+#auto-component {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 40px 0;
   font-family: Arial, Helvetica, sans-serif
 }
-#content-creator div {
-  width: 100%;
+#auto-component-entry {
+  position: fixed;
+  bottom: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 90%;
+  max-width: 700px;
   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);
 }
-#content-creator input {
-  width: 60%;
+#auto-component input {
+  width: 100%;
   height: 40px;
   border-radius: 5px;
   color: #444;
@@ -24,7 +30,7 @@
   border: 3px solid #ddd;
   padding-left: 10px;
 }
-#content-creator button {
+#auto-component button {
   padding: 10px;
   margin: 20px;
   background: rgb(184, 230, 184);
@@ -32,29 +38,36 @@
   border-radius: 5px;
   box-shadow: 0px 0px 5px #fff;
 }
-#content-creator button:nth-child(3) {
+#auto-component button:nth-child(3) {
   padding: 10px 20px;
   margin-left: 0px;
   margin-right: 0px;
   background: #db9d9d;
 }
-#content-creator button:hover {
+#auto-component button:hover {
   background: green;
   color: #eee;
 }
-#content-creator button:nth-child(3):hover {
+#auto-component button:nth-child(3):hover {
   background: #dc3c3c;
 }
-#content-creator div:nth-child(2) {
+#auto-component-tabs {
+  position: fixed;
+  bottom: 68px;
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  width: 100%;
+  max-width: 700px;
 }
 .tab {
+  width: 30%;
   margin: 0 10%;
   padding: 4px 0;
-  background: #444;
-  color: #aaa;
-  border-radius: 5px 5px 0 0;
+  background: #c6c7d3;
+  color: #fff;
+  border-radius: 0 0 5px 5px;
   cursor: pointer;
 }
 .tab:hover {
@@ -62,17 +75,20 @@
   color: #eee;
 }
 .selected {
-  background: #c6c7d3;
-  color: #fff;
+  background: #444;
+  color: #aaa;
   font-size: 1.2rem;
-  pointer-events: none;
 }
-#content-creator pre {
-  position: relative;
+#auto-component-code {
+  position: fixed;
+  bottom: 180px;
+  left: 50%;
+  transform: translateX(-50%);
   text-align: left;
-  max-width: 90%;
-  min-width: 90%;
-  max-height: 60vh;
+  max-width: 600px;
+  width: 80%;
+  max-height: 300px;
+  min-height: 300px;
   background: #cdd1d9;
   color: #111;
   padding: 40px 10px 40px 10px;
@@ -82,7 +98,7 @@
   box-shadow: 0px 0px 5px #fff;
   white-space: pre-wrap;
 }
-.copy-btn {
+.auto-component-copy {
   position: absolute;
   top: 130px;
   right: 7%;
@@ -95,6 +111,9 @@
   color: #fff;
 }
 
-.copy-btn:hover {
+.auto-component-copy: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('request')
+  const [ activeTab, setActiveTab ] = useState('')
   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,6 +147,7 @@ const AutoComponent = ({ exclusions }) => {
   }
 
   const handleGenerate = async (e) => {
+    console.log(currentHtml)
     await setRequestData({
       "userId": user,
       "request": currentRequest, 
@@ -167,11 +168,12 @@ const AutoComponent = ({ exclusions }) => {
     setHistory([])
   }
 
-  const handleRequestTab = () => {
-    setActiveTab('request')
+  const handleRequestTab = async () => {
+    await setActiveTab(activeTab === 'response' || activeTab === '' ? 'request' : '');
   }
-  const handleResponseTab = () => {
-    setActiveTab('response')
+  
+  const handleResponseTab = async () => {
+    await setActiveTab(activeTab === 'request' || activeTab === '' ? 'response' : '');
   }
 
   const copyToClipboard = async () => {
@@ -213,14 +215,22 @@ User ID:\n    `
   return (
     <>
       {/* create the display window */}
-      <div id="content-creator">
+      <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>
+          <div id='auto-component-tabs'>
            <div className={`${activeTab === 'request' ? 'selected' : ''} tab`} onClick={handleRequestTab}>
               Request
             </div>
@@ -228,11 +238,8 @@ User ID:\n    `
               Response
             </div>
           </div>
-          <pre>
-           {activeTab === 'request' ? getLog() : responseHtml}
-          </pre>
         </div>
-        <div className="copy-btn" onClick={copyToClipboard} style={activeTab !== 'response' ? { display: 'none' } : null}>
+        <div className="auto-component-copy" onClick={copyToClipboard} style={activeTab !== 'response' ? { display: 'none' } : null}>
           copy
         </div>
       </div>