auto-component 0.0.26 → 0.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/auto-component.css +10 -5
- package/src/index.jsx +12 -11
package/package.json
CHANGED
package/src/auto-component.css
CHANGED
|
@@ -19,7 +19,8 @@
|
|
|
19
19
|
height: 40px;
|
|
20
20
|
border-radius: 5px;
|
|
21
21
|
color: #444;
|
|
22
|
-
font-size: 20px;
|
|
22
|
+
font-size: 20px;background: #eee;
|
|
23
|
+
border: 3px solid #ddd;
|
|
23
24
|
padding-left: 10px;
|
|
24
25
|
}
|
|
25
26
|
#content-creator button {
|
|
@@ -50,16 +51,19 @@
|
|
|
50
51
|
.tab {
|
|
51
52
|
margin: 0 10%;
|
|
52
53
|
background: #444;
|
|
54
|
+
color: #aaa;
|
|
53
55
|
border-radius: 5px 5px 0 0;
|
|
54
56
|
cursor: pointer;
|
|
55
57
|
}
|
|
56
58
|
.tab:hover {
|
|
57
59
|
background: #666;
|
|
60
|
+
color: #eee;
|
|
58
61
|
}
|
|
59
62
|
.selected {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
+
background: #c6c7d3;
|
|
64
|
+
color: #fff;
|
|
65
|
+
font-size: 1.2rem;
|
|
66
|
+
pointer-events: none;
|
|
63
67
|
}
|
|
64
68
|
#content-creator pre {
|
|
65
69
|
position: relative;
|
|
@@ -67,13 +71,14 @@
|
|
|
67
71
|
max-width: 90%;
|
|
68
72
|
min-width: 90%;
|
|
69
73
|
max-height: 60vh;
|
|
70
|
-
background: #
|
|
74
|
+
background: #cdd1d9;
|
|
71
75
|
color: #111;
|
|
72
76
|
padding: 40px 10px 40px 10px;
|
|
73
77
|
overflow: auto;
|
|
74
78
|
border: 2px solid black;
|
|
75
79
|
border-radius: 10px;
|
|
76
80
|
box-shadow: 0px 0px 5px #fff;
|
|
81
|
+
white-space: pre-wrap;
|
|
77
82
|
}
|
|
78
83
|
.copy-btn {
|
|
79
84
|
position: absolute;
|
package/src/index.jsx
CHANGED
|
@@ -172,7 +172,8 @@ const AutoComponent = ({ exclusions }) => {
|
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
const copyToClipboard = async () => {
|
|
175
|
-
const text = activeTab
|
|
175
|
+
const text = activeTab === 'response' ? responseData : ''
|
|
176
|
+
|
|
176
177
|
await navigator.clipboard.writeText(text)
|
|
177
178
|
}
|
|
178
179
|
|
|
@@ -181,15 +182,15 @@ const AutoComponent = ({ exclusions }) => {
|
|
|
181
182
|
//**-------------**/
|
|
182
183
|
|
|
183
184
|
const requestHTML = currentHtml ? (
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
185
|
+
`Review the details below for accuracy and privacy concerns.
|
|
186
|
+
If the contents of an element should be excluded, add the 'exclude' class to the element.
|
|
187
|
+
Click Generate to send the request and receive the auto component AI generated code.
|
|
188
|
+
|
|
189
|
+
User Request:\n `
|
|
190
|
+
+ currentRequest
|
|
191
|
+
+ "\n\nUser HTML:\n"
|
|
192
|
+
+ currentHtml
|
|
193
|
+
) : 'There was an error collecting your HTML. Ensure no top level elements are assigned the class "exclude"'
|
|
193
194
|
|
|
194
195
|
const responseHtml = responseData ? (
|
|
195
196
|
responseData
|
|
@@ -218,7 +219,7 @@ const AutoComponent = ({ exclusions }) => {
|
|
|
218
219
|
{activeTab === 'request' ? requestHTML : responseHtml}
|
|
219
220
|
</pre>
|
|
220
221
|
</div>
|
|
221
|
-
<div className="copy-btn">
|
|
222
|
+
<div className="copy-btn" onClick={copyToClipboard}>
|
|
222
223
|
copy
|
|
223
224
|
</div>
|
|
224
225
|
</div>
|