@jbpark/live-editor 0.1.0
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/README.ko.md +127 -0
- package/README.md +127 -0
- package/dist/ast-6PhUZ232.mjs +39664 -0
- package/dist/ast-6PhUZ232.mjs.map +1 -0
- package/dist/enums-3yleLgqV.mjs +1237 -0
- package/dist/enums-3yleLgqV.mjs.map +1 -0
- package/dist/index-DdSjzvA3.d.mts +15 -0
- package/dist/index.css +77 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.mts +248 -0
- package/dist/index.mjs +19273 -0
- package/dist/index.mjs.map +1 -0
- package/dist/utils/ast/index.d.mts +1621 -0
- package/dist/utils/ast/index.mjs +3 -0
- package/dist/utils/index.d.mts +27 -0
- package/dist/utils/index.mjs +3 -0
- package/dist/utils/tailwind/index.d.mts +5 -0
- package/dist/utils/tailwind/index.mjs +37 -0
- package/dist/utils/tailwind/index.mjs.map +1 -0
- package/dist/utils-INSWI9h0.mjs +2072 -0
- package/dist/utils-INSWI9h0.mjs.map +1 -0
- package/package.json +143 -0
|
@@ -0,0 +1,1237 @@
|
|
|
1
|
+
//#region src/enums/index.ts
|
|
2
|
+
const CONFIG = { CACHE_LIMIT: 50 };
|
|
3
|
+
const DATA_ATTR = {
|
|
4
|
+
ID: "data-id",
|
|
5
|
+
BINDING: "data-binding",
|
|
6
|
+
ITEM: "data-item"
|
|
7
|
+
};
|
|
8
|
+
const REGEX = {
|
|
9
|
+
NUMBER: /^\d+(\.\d+)?$/,
|
|
10
|
+
BOOLEAN_OR_NULL: /^(true|false|null|undefined)$/,
|
|
11
|
+
CONTAINER: /(<main[^>]*id=["']app-container["'][^>]*>)([\s\S]*?)(<\/main>)/m,
|
|
12
|
+
COMMENT: /\{\s*\/\*[\s\S]*?\*\/\s*\}/g,
|
|
13
|
+
SECTION: /<section[\s\S]*?<\/section>/g,
|
|
14
|
+
DATA_NAME: /data-name=["']([^"']+)["']/
|
|
15
|
+
};
|
|
16
|
+
const TS_PATTERNS = [
|
|
17
|
+
/interface\s+\w+/,
|
|
18
|
+
/type\s+\w+\s*=/,
|
|
19
|
+
/:\s*\w+(\[\])?(\s*\||\s*&|\s*=|\s*;|\s*,|\s*\))/,
|
|
20
|
+
/as\s+\w+/,
|
|
21
|
+
/<[A-Z]\w*>/,
|
|
22
|
+
/enum\s+\w+/,
|
|
23
|
+
/public\s+|private\s+|protected\s+/,
|
|
24
|
+
/readonly\s+/,
|
|
25
|
+
/\?\s*:/
|
|
26
|
+
];
|
|
27
|
+
const BINDING_PROP = {
|
|
28
|
+
CHILDREN: "children",
|
|
29
|
+
INNER_TEXT: "innerText",
|
|
30
|
+
INNER_HTML: "innerHTML",
|
|
31
|
+
ITEMS: "items"
|
|
32
|
+
};
|
|
33
|
+
const DEFAULT_TEMPLATE = `
|
|
34
|
+
import * as ui from 'ui-kit';
|
|
35
|
+
import { cn } from 'ui-kit/utils';
|
|
36
|
+
|
|
37
|
+
const App = () => {
|
|
38
|
+
return (
|
|
39
|
+
<main id="app-container"></main>
|
|
40
|
+
)
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export default App;
|
|
44
|
+
`;
|
|
45
|
+
const DRAGGABLE_ITEMS = [
|
|
46
|
+
{
|
|
47
|
+
id: "hero",
|
|
48
|
+
name: "Hero",
|
|
49
|
+
code: `
|
|
50
|
+
<section
|
|
51
|
+
data-name="Hero"
|
|
52
|
+
className={cn(
|
|
53
|
+
'text-center text-white',
|
|
54
|
+
//
|
|
55
|
+
)}
|
|
56
|
+
>
|
|
57
|
+
<ui.Space
|
|
58
|
+
data-id=""
|
|
59
|
+
data-binding={[
|
|
60
|
+
{
|
|
61
|
+
label: 'Background Style',
|
|
62
|
+
property: 'style',
|
|
63
|
+
},
|
|
64
|
+
]}
|
|
65
|
+
style={{
|
|
66
|
+
backgroundColor: '#6366f1',
|
|
67
|
+
}}
|
|
68
|
+
orientation="vertical"
|
|
69
|
+
size="large"
|
|
70
|
+
align="center"
|
|
71
|
+
className={cn(
|
|
72
|
+
'px-5 py-15',
|
|
73
|
+
//
|
|
74
|
+
)}
|
|
75
|
+
>
|
|
76
|
+
<h1
|
|
77
|
+
data-id=""
|
|
78
|
+
data-binding={[
|
|
79
|
+
{
|
|
80
|
+
label: 'Title',
|
|
81
|
+
property: 'innerText',
|
|
82
|
+
},
|
|
83
|
+
]}
|
|
84
|
+
className={cn(
|
|
85
|
+
'text-5xl font-bold',
|
|
86
|
+
//
|
|
87
|
+
)}
|
|
88
|
+
>
|
|
89
|
+
Welcome to Live Editor
|
|
90
|
+
</h1>
|
|
91
|
+
<p
|
|
92
|
+
data-id=""
|
|
93
|
+
data-binding={[
|
|
94
|
+
{
|
|
95
|
+
label: 'Description',
|
|
96
|
+
property: 'innerText',
|
|
97
|
+
},
|
|
98
|
+
]}
|
|
99
|
+
className={cn(
|
|
100
|
+
'text-xl',
|
|
101
|
+
//
|
|
102
|
+
)}
|
|
103
|
+
>
|
|
104
|
+
Build dynamic components with drag & drop
|
|
105
|
+
</p>
|
|
106
|
+
<ui.Button
|
|
107
|
+
data-id=""
|
|
108
|
+
data-binding={[
|
|
109
|
+
{
|
|
110
|
+
label: 'Button Text',
|
|
111
|
+
property: 'innerText',
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
label: 'Button Size',
|
|
115
|
+
property: 'size',
|
|
116
|
+
options: [
|
|
117
|
+
{
|
|
118
|
+
label: 'small',
|
|
119
|
+
value: 'small',
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
label: 'middle',
|
|
123
|
+
value: 'middle',
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
label: 'large',
|
|
127
|
+
value: 'large',
|
|
128
|
+
},
|
|
129
|
+
],
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
label: 'Button Variant',
|
|
133
|
+
property: 'variant',
|
|
134
|
+
options: [
|
|
135
|
+
{
|
|
136
|
+
label: 'default',
|
|
137
|
+
value: 'default',
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
label: 'outlined',
|
|
141
|
+
value: 'outlined',
|
|
142
|
+
},
|
|
143
|
+
],
|
|
144
|
+
},
|
|
145
|
+
]}
|
|
146
|
+
size="large"
|
|
147
|
+
variant="solid"
|
|
148
|
+
className={cn(
|
|
149
|
+
'bg-white text-indigo-500',
|
|
150
|
+
'hover:bg-gray-50',
|
|
151
|
+
//
|
|
152
|
+
)}
|
|
153
|
+
>
|
|
154
|
+
Get Started
|
|
155
|
+
</ui.Button>
|
|
156
|
+
</ui.Space>
|
|
157
|
+
</section>
|
|
158
|
+
`
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
id: "features",
|
|
162
|
+
name: "Features",
|
|
163
|
+
code: `
|
|
164
|
+
<section
|
|
165
|
+
data-name="Features"
|
|
166
|
+
className={cn(
|
|
167
|
+
'px-5 py-10',
|
|
168
|
+
//
|
|
169
|
+
)}
|
|
170
|
+
>
|
|
171
|
+
<ui.Space
|
|
172
|
+
data-id=""
|
|
173
|
+
data-binding={[
|
|
174
|
+
{
|
|
175
|
+
label: 'Feature Cards',
|
|
176
|
+
property: 'children',
|
|
177
|
+
},
|
|
178
|
+
]}
|
|
179
|
+
className={cn(
|
|
180
|
+
'mx-auto max-w-7xl',
|
|
181
|
+
//
|
|
182
|
+
)}
|
|
183
|
+
size="large"
|
|
184
|
+
wrap
|
|
185
|
+
>
|
|
186
|
+
<ui.Card
|
|
187
|
+
className={cn(
|
|
188
|
+
'min-w-70 flex-1 text-center',
|
|
189
|
+
//
|
|
190
|
+
)}
|
|
191
|
+
>
|
|
192
|
+
<ui.Space orientation="vertical" size="middle" align="center">
|
|
193
|
+
<div
|
|
194
|
+
data-id=""
|
|
195
|
+
data-binding={[
|
|
196
|
+
{
|
|
197
|
+
label: 'Icon',
|
|
198
|
+
property: 'innerText',
|
|
199
|
+
},
|
|
200
|
+
]}
|
|
201
|
+
className={cn(
|
|
202
|
+
'text-5xl',
|
|
203
|
+
//
|
|
204
|
+
)}
|
|
205
|
+
>
|
|
206
|
+
🚀
|
|
207
|
+
</div>
|
|
208
|
+
<h3
|
|
209
|
+
data-id=""
|
|
210
|
+
data-binding={[
|
|
211
|
+
{
|
|
212
|
+
label: 'Title',
|
|
213
|
+
property: 'innerText',
|
|
214
|
+
},
|
|
215
|
+
]}
|
|
216
|
+
className={cn(
|
|
217
|
+
'text-2xl text-gray-800',
|
|
218
|
+
//
|
|
219
|
+
)}
|
|
220
|
+
>
|
|
221
|
+
Feature 1
|
|
222
|
+
</h3>
|
|
223
|
+
<p
|
|
224
|
+
data-id=""
|
|
225
|
+
data-binding={[
|
|
226
|
+
{
|
|
227
|
+
label: 'Description',
|
|
228
|
+
property: 'innerText',
|
|
229
|
+
},
|
|
230
|
+
]}
|
|
231
|
+
className={cn(
|
|
232
|
+
'text-gray-600',
|
|
233
|
+
//
|
|
234
|
+
)}
|
|
235
|
+
>
|
|
236
|
+
Amazing feature description
|
|
237
|
+
</p>
|
|
238
|
+
</ui.Space>
|
|
239
|
+
</ui.Card>
|
|
240
|
+
<ui.Card
|
|
241
|
+
className={cn(
|
|
242
|
+
'min-w-70 flex-1 text-center',
|
|
243
|
+
//
|
|
244
|
+
)}
|
|
245
|
+
>
|
|
246
|
+
<ui.Space orientation="vertical" size="middle" align="center">
|
|
247
|
+
<div
|
|
248
|
+
data-id=""
|
|
249
|
+
data-binding={[
|
|
250
|
+
{
|
|
251
|
+
label: 'Icon',
|
|
252
|
+
property: 'innerText',
|
|
253
|
+
},
|
|
254
|
+
]}
|
|
255
|
+
className={cn(
|
|
256
|
+
'text-5xl',
|
|
257
|
+
//
|
|
258
|
+
)}
|
|
259
|
+
>
|
|
260
|
+
⚡
|
|
261
|
+
</div>
|
|
262
|
+
<h3
|
|
263
|
+
data-id=""
|
|
264
|
+
data-binding={[
|
|
265
|
+
{
|
|
266
|
+
label: 'Title',
|
|
267
|
+
property: 'innerText',
|
|
268
|
+
},
|
|
269
|
+
]}
|
|
270
|
+
className={cn(
|
|
271
|
+
'text-2xl text-gray-800',
|
|
272
|
+
//
|
|
273
|
+
)}
|
|
274
|
+
>
|
|
275
|
+
Feature 2
|
|
276
|
+
</h3>
|
|
277
|
+
<p
|
|
278
|
+
data-id=""
|
|
279
|
+
data-binding={[
|
|
280
|
+
{
|
|
281
|
+
label: 'Description',
|
|
282
|
+
property: 'innerText',
|
|
283
|
+
},
|
|
284
|
+
]}
|
|
285
|
+
className={cn(
|
|
286
|
+
'text-gray-600',
|
|
287
|
+
//
|
|
288
|
+
)}
|
|
289
|
+
>
|
|
290
|
+
Another great feature
|
|
291
|
+
</p>
|
|
292
|
+
</ui.Space>
|
|
293
|
+
</ui.Card>
|
|
294
|
+
<ui.Card
|
|
295
|
+
className={cn(
|
|
296
|
+
'min-w-70 flex-1 text-center',
|
|
297
|
+
//
|
|
298
|
+
)}
|
|
299
|
+
>
|
|
300
|
+
<ui.Space orientation="vertical" size="middle" align="center">
|
|
301
|
+
<div
|
|
302
|
+
data-id=""
|
|
303
|
+
data-binding={[
|
|
304
|
+
{
|
|
305
|
+
label: 'Icon',
|
|
306
|
+
property: 'innerText',
|
|
307
|
+
},
|
|
308
|
+
]}
|
|
309
|
+
className={cn(
|
|
310
|
+
'text-5xl',
|
|
311
|
+
//
|
|
312
|
+
)}
|
|
313
|
+
>
|
|
314
|
+
✨
|
|
315
|
+
</div>
|
|
316
|
+
<h3
|
|
317
|
+
data-id=""
|
|
318
|
+
data-binding={[
|
|
319
|
+
{
|
|
320
|
+
label: 'Title',
|
|
321
|
+
property: 'innerText',
|
|
322
|
+
},
|
|
323
|
+
]}
|
|
324
|
+
className={cn(
|
|
325
|
+
'text-2xl text-gray-800',
|
|
326
|
+
//
|
|
327
|
+
)}
|
|
328
|
+
>
|
|
329
|
+
Feature 3
|
|
330
|
+
</h3>
|
|
331
|
+
<p
|
|
332
|
+
data-id=""
|
|
333
|
+
data-binding={[
|
|
334
|
+
{
|
|
335
|
+
label: 'Description',
|
|
336
|
+
property: 'innerText',
|
|
337
|
+
},
|
|
338
|
+
]}
|
|
339
|
+
className={cn(
|
|
340
|
+
'text-gray-600',
|
|
341
|
+
//
|
|
342
|
+
)}
|
|
343
|
+
>
|
|
344
|
+
One more awesome thing
|
|
345
|
+
</p>
|
|
346
|
+
</ui.Space>
|
|
347
|
+
</ui.Card>
|
|
348
|
+
</ui.Space>
|
|
349
|
+
</section>
|
|
350
|
+
`
|
|
351
|
+
},
|
|
352
|
+
{
|
|
353
|
+
id: "about",
|
|
354
|
+
name: "About",
|
|
355
|
+
code: `
|
|
356
|
+
<section
|
|
357
|
+
data-name="About"
|
|
358
|
+
className={cn(
|
|
359
|
+
'mx-auto max-w-3xl px-5 py-10',
|
|
360
|
+
//
|
|
361
|
+
)}
|
|
362
|
+
>
|
|
363
|
+
<ui.Typography.Title
|
|
364
|
+
data-id=""
|
|
365
|
+
data-binding={[{ label: 'Title', property: 'innerText' }]}
|
|
366
|
+
level={2}
|
|
367
|
+
className={cn(
|
|
368
|
+
'mb-5 text-4xl text-gray-800',
|
|
369
|
+
//
|
|
370
|
+
)}
|
|
371
|
+
>
|
|
372
|
+
About Live Editor
|
|
373
|
+
</ui.Typography.Title>
|
|
374
|
+
<ui.Typography.Paragraph
|
|
375
|
+
data-id=""
|
|
376
|
+
data-binding={[
|
|
377
|
+
{
|
|
378
|
+
label: 'Description 1',
|
|
379
|
+
property: 'innerText',
|
|
380
|
+
},
|
|
381
|
+
]}
|
|
382
|
+
className={cn(
|
|
383
|
+
'mb-4 text-lg leading-relaxed text-gray-600',
|
|
384
|
+
//
|
|
385
|
+
)}
|
|
386
|
+
>
|
|
387
|
+
Live Editor is a powerful visual development tool that enables you to
|
|
388
|
+
create stunning web interfaces through an intuitive drag-and-drop
|
|
389
|
+
experience. Built with modern web technologies, it streamlines your
|
|
390
|
+
workflow and accelerates development cycles.
|
|
391
|
+
</ui.Typography.Paragraph>
|
|
392
|
+
<ui.Typography.Paragraph
|
|
393
|
+
data-id=""
|
|
394
|
+
data-binding={[
|
|
395
|
+
{
|
|
396
|
+
label: 'Description 2',
|
|
397
|
+
property: 'innerText',
|
|
398
|
+
},
|
|
399
|
+
]}
|
|
400
|
+
className={cn(
|
|
401
|
+
'text-lg leading-relaxed text-gray-600',
|
|
402
|
+
//
|
|
403
|
+
)}
|
|
404
|
+
>
|
|
405
|
+
Whether you're a seasoned developer or just starting out, Live
|
|
406
|
+
Editor provides the flexibility and control you need to bring your
|
|
407
|
+
creative vision to life. Focus on what matters most - building great
|
|
408
|
+
products.
|
|
409
|
+
</ui.Typography.Paragraph>
|
|
410
|
+
</section>
|
|
411
|
+
`
|
|
412
|
+
},
|
|
413
|
+
{
|
|
414
|
+
id: "cta",
|
|
415
|
+
name: "CTA",
|
|
416
|
+
code: `
|
|
417
|
+
<section
|
|
418
|
+
data-name="CTA"
|
|
419
|
+
className={cn(
|
|
420
|
+
'bg-gray-50 px-5 py-12 text-center',
|
|
421
|
+
//
|
|
422
|
+
)}
|
|
423
|
+
>
|
|
424
|
+
<div
|
|
425
|
+
className={cn(
|
|
426
|
+
'mx-auto max-w-xl',
|
|
427
|
+
//
|
|
428
|
+
)}
|
|
429
|
+
>
|
|
430
|
+
<ui.Typography.Title
|
|
431
|
+
data-id=""
|
|
432
|
+
data-binding={[{ label: 'Title', property: 'innerText' }]}
|
|
433
|
+
level={2}
|
|
434
|
+
className={cn(
|
|
435
|
+
'mb-4 text-3xl text-gray-800',
|
|
436
|
+
//
|
|
437
|
+
)}
|
|
438
|
+
>
|
|
439
|
+
Ready to get started?
|
|
440
|
+
</ui.Typography.Title>
|
|
441
|
+
<ui.Typography.Paragraph
|
|
442
|
+
data-id=""
|
|
443
|
+
data-binding={[
|
|
444
|
+
{
|
|
445
|
+
label: 'Description',
|
|
446
|
+
property: 'innerText',
|
|
447
|
+
},
|
|
448
|
+
]}
|
|
449
|
+
className={cn(
|
|
450
|
+
'mb-6 text-lg text-gray-600',
|
|
451
|
+
//
|
|
452
|
+
)}
|
|
453
|
+
>
|
|
454
|
+
Start exploring what Live Editor can do for your projects
|
|
455
|
+
</ui.Typography.Paragraph>
|
|
456
|
+
<ui.Space
|
|
457
|
+
data-id=""
|
|
458
|
+
data-binding={[{ label: 'Buttons', property: 'children' }]}
|
|
459
|
+
className={cn(
|
|
460
|
+
'flex flex-wrap justify-center gap-4',
|
|
461
|
+
//
|
|
462
|
+
)}
|
|
463
|
+
>
|
|
464
|
+
<ui.Button
|
|
465
|
+
data-id=""
|
|
466
|
+
data-binding={[
|
|
467
|
+
{
|
|
468
|
+
label: 'Button 1 Text',
|
|
469
|
+
property: 'innerText',
|
|
470
|
+
},
|
|
471
|
+
]}
|
|
472
|
+
size="large"
|
|
473
|
+
className={cn(
|
|
474
|
+
'bg-indigo-500 px-8 text-base text-white',
|
|
475
|
+
'hover:bg-indigo-600',
|
|
476
|
+
//
|
|
477
|
+
)}
|
|
478
|
+
>
|
|
479
|
+
View Documentation
|
|
480
|
+
</ui.Button>
|
|
481
|
+
<ui.Button
|
|
482
|
+
data-id=""
|
|
483
|
+
data-binding={[
|
|
484
|
+
{
|
|
485
|
+
label: 'Button 2 Text',
|
|
486
|
+
property: 'innerText',
|
|
487
|
+
},
|
|
488
|
+
]}
|
|
489
|
+
variant="outlined"
|
|
490
|
+
size="large"
|
|
491
|
+
className={cn(
|
|
492
|
+
'border-2 border-indigo-500 px-8 text-base text-indigo-500',
|
|
493
|
+
'hover:bg-indigo-50',
|
|
494
|
+
//
|
|
495
|
+
)}
|
|
496
|
+
>
|
|
497
|
+
View Examples
|
|
498
|
+
</ui.Button>
|
|
499
|
+
</ui.Space>
|
|
500
|
+
</div>
|
|
501
|
+
</section>
|
|
502
|
+
`
|
|
503
|
+
},
|
|
504
|
+
{
|
|
505
|
+
id: "getting-started",
|
|
506
|
+
name: "Getting Started",
|
|
507
|
+
code: `
|
|
508
|
+
<section
|
|
509
|
+
data-name="Getting Started"
|
|
510
|
+
className={cn(
|
|
511
|
+
'px-5 py-16',
|
|
512
|
+
//
|
|
513
|
+
)}
|
|
514
|
+
>
|
|
515
|
+
<div
|
|
516
|
+
className={cn(
|
|
517
|
+
'mx-auto max-w-5xl',
|
|
518
|
+
//
|
|
519
|
+
)}
|
|
520
|
+
>
|
|
521
|
+
<ui.Typography.Title
|
|
522
|
+
data-id=""
|
|
523
|
+
data-binding={[{ label: 'Title', property: 'innerText' }]}
|
|
524
|
+
level={2}
|
|
525
|
+
className={cn(
|
|
526
|
+
'mb-12 text-center text-4xl font-bold text-gray-800',
|
|
527
|
+
//
|
|
528
|
+
)}
|
|
529
|
+
>
|
|
530
|
+
How to Get Started
|
|
531
|
+
</ui.Typography.Title>
|
|
532
|
+
<div
|
|
533
|
+
className={cn(
|
|
534
|
+
'grid gap-8 md:grid-cols-3',
|
|
535
|
+
//
|
|
536
|
+
)}
|
|
537
|
+
>
|
|
538
|
+
<ui.Card
|
|
539
|
+
data-id=""
|
|
540
|
+
data-binding={[
|
|
541
|
+
{
|
|
542
|
+
label: 'Card 1 Content',
|
|
543
|
+
property: 'children',
|
|
544
|
+
},
|
|
545
|
+
]}
|
|
546
|
+
className={cn(
|
|
547
|
+
'rounded-lg border-2 border-gray-200 bg-white p-8',
|
|
548
|
+
//
|
|
549
|
+
)}
|
|
550
|
+
>
|
|
551
|
+
<ui.Typography.Title
|
|
552
|
+
data-id=""
|
|
553
|
+
data-binding={[
|
|
554
|
+
{
|
|
555
|
+
label: 'Card 1 Title',
|
|
556
|
+
property: 'innerText',
|
|
557
|
+
},
|
|
558
|
+
]}
|
|
559
|
+
level={3}
|
|
560
|
+
className={cn(
|
|
561
|
+
'mb-2 text-2xl font-bold text-gray-800',
|
|
562
|
+
//
|
|
563
|
+
)}
|
|
564
|
+
>
|
|
565
|
+
Explore
|
|
566
|
+
</ui.Typography.Title>
|
|
567
|
+
<ui.Typography.Paragraph
|
|
568
|
+
data-id=""
|
|
569
|
+
data-binding={[
|
|
570
|
+
{
|
|
571
|
+
label: 'Card 1 Icon',
|
|
572
|
+
property: 'innerText',
|
|
573
|
+
},
|
|
574
|
+
]}
|
|
575
|
+
className={cn(
|
|
576
|
+
'mb-6 text-4xl font-bold text-indigo-600',
|
|
577
|
+
//
|
|
578
|
+
)}
|
|
579
|
+
>
|
|
580
|
+
📚
|
|
581
|
+
</ui.Typography.Paragraph>
|
|
582
|
+
<ul
|
|
583
|
+
className={cn(
|
|
584
|
+
'mb-8 space-y-3 text-gray-600',
|
|
585
|
+
//
|
|
586
|
+
)}
|
|
587
|
+
>
|
|
588
|
+
<li>✓ Read documentation</li>
|
|
589
|
+
<li>✓ Browse examples</li>
|
|
590
|
+
<li>✓ Try the demo</li>
|
|
591
|
+
</ul>
|
|
592
|
+
<ui.Button
|
|
593
|
+
data-id=""
|
|
594
|
+
data-binding={[
|
|
595
|
+
{
|
|
596
|
+
label: 'Card 1 Button',
|
|
597
|
+
property: 'innerText',
|
|
598
|
+
},
|
|
599
|
+
]}
|
|
600
|
+
variant="outlined"
|
|
601
|
+
size="large"
|
|
602
|
+
block
|
|
603
|
+
className={cn(
|
|
604
|
+
'border-2 border-indigo-500 text-indigo-500',
|
|
605
|
+
'hover:bg-indigo-50',
|
|
606
|
+
//
|
|
607
|
+
)}
|
|
608
|
+
>
|
|
609
|
+
View Docs
|
|
610
|
+
</ui.Button>
|
|
611
|
+
</ui.Card>
|
|
612
|
+
<ui.Card
|
|
613
|
+
data-id=""
|
|
614
|
+
data-binding={[
|
|
615
|
+
{
|
|
616
|
+
label: 'Card 2 Content',
|
|
617
|
+
property: 'children',
|
|
618
|
+
},
|
|
619
|
+
]}
|
|
620
|
+
className={cn(
|
|
621
|
+
'relative rounded-lg border-2 border-indigo-500 bg-white p-8',
|
|
622
|
+
//
|
|
623
|
+
)}
|
|
624
|
+
>
|
|
625
|
+
<div
|
|
626
|
+
className={cn(
|
|
627
|
+
'absolute -top-4 left-1/2 -translate-x-1/2',
|
|
628
|
+
'rounded-full bg-indigo-500 px-4 py-1 text-sm text-white',
|
|
629
|
+
//
|
|
630
|
+
)}
|
|
631
|
+
>
|
|
632
|
+
Recommended
|
|
633
|
+
</div>
|
|
634
|
+
<ui.Typography.Title
|
|
635
|
+
data-id=""
|
|
636
|
+
data-binding={[
|
|
637
|
+
{
|
|
638
|
+
label: 'Card 2 Title',
|
|
639
|
+
property: 'innerText',
|
|
640
|
+
},
|
|
641
|
+
]}
|
|
642
|
+
level={3}
|
|
643
|
+
className={cn(
|
|
644
|
+
'mb-2 text-2xl font-bold text-gray-800',
|
|
645
|
+
//
|
|
646
|
+
)}
|
|
647
|
+
>
|
|
648
|
+
Practice
|
|
649
|
+
</ui.Typography.Title>
|
|
650
|
+
<ui.Typography.Paragraph
|
|
651
|
+
data-id=""
|
|
652
|
+
data-binding={[
|
|
653
|
+
{
|
|
654
|
+
label: 'Card 2 Icon',
|
|
655
|
+
property: 'innerText',
|
|
656
|
+
},
|
|
657
|
+
]}
|
|
658
|
+
className={cn(
|
|
659
|
+
'mb-6 text-4xl font-bold text-indigo-600',
|
|
660
|
+
//
|
|
661
|
+
)}
|
|
662
|
+
>
|
|
663
|
+
💻
|
|
664
|
+
</ui.Typography.Paragraph>
|
|
665
|
+
<ul
|
|
666
|
+
className={cn(
|
|
667
|
+
'mb-8 space-y-3 text-gray-600',
|
|
668
|
+
//
|
|
669
|
+
)}
|
|
670
|
+
>
|
|
671
|
+
<li>✓ Interactive playground</li>
|
|
672
|
+
<li>✓ Experiment freely</li>
|
|
673
|
+
<li>✓ Build your own</li>
|
|
674
|
+
</ul>
|
|
675
|
+
<ui.Button
|
|
676
|
+
data-id=""
|
|
677
|
+
data-binding={[
|
|
678
|
+
{
|
|
679
|
+
label: 'Card 2 Button',
|
|
680
|
+
property: 'innerText',
|
|
681
|
+
},
|
|
682
|
+
]}
|
|
683
|
+
size="large"
|
|
684
|
+
block
|
|
685
|
+
className={cn(
|
|
686
|
+
'bg-indigo-500 text-white',
|
|
687
|
+
'hover:bg-indigo-600',
|
|
688
|
+
//
|
|
689
|
+
)}
|
|
690
|
+
>
|
|
691
|
+
Start Building
|
|
692
|
+
</ui.Button>
|
|
693
|
+
</ui.Card>
|
|
694
|
+
<ui.Card
|
|
695
|
+
data-id=""
|
|
696
|
+
data-binding={[
|
|
697
|
+
{
|
|
698
|
+
label: 'Card 3 Content',
|
|
699
|
+
property: 'children',
|
|
700
|
+
},
|
|
701
|
+
]}
|
|
702
|
+
className={cn(
|
|
703
|
+
'rounded-lg border-2 border-gray-200 bg-white p-8',
|
|
704
|
+
//
|
|
705
|
+
)}
|
|
706
|
+
>
|
|
707
|
+
<ui.Typography.Title
|
|
708
|
+
data-id=""
|
|
709
|
+
data-binding={[
|
|
710
|
+
{
|
|
711
|
+
label: 'Card 3 Title',
|
|
712
|
+
property: 'innerText',
|
|
713
|
+
},
|
|
714
|
+
]}
|
|
715
|
+
level={3}
|
|
716
|
+
className={cn(
|
|
717
|
+
'mb-2 text-2xl font-bold text-gray-800',
|
|
718
|
+
//
|
|
719
|
+
)}
|
|
720
|
+
>
|
|
721
|
+
Contribute
|
|
722
|
+
</ui.Typography.Title>
|
|
723
|
+
<ui.Typography.Paragraph
|
|
724
|
+
data-id=""
|
|
725
|
+
data-binding={[
|
|
726
|
+
{
|
|
727
|
+
label: 'Card 3 Icon',
|
|
728
|
+
property: 'innerText',
|
|
729
|
+
},
|
|
730
|
+
]}
|
|
731
|
+
className={cn(
|
|
732
|
+
'mb-6 text-4xl font-bold text-indigo-600',
|
|
733
|
+
//
|
|
734
|
+
)}
|
|
735
|
+
>
|
|
736
|
+
🤝
|
|
737
|
+
</ui.Typography.Paragraph>
|
|
738
|
+
<ul
|
|
739
|
+
className={cn(
|
|
740
|
+
'mb-8 space-y-3 text-gray-600',
|
|
741
|
+
//
|
|
742
|
+
)}
|
|
743
|
+
>
|
|
744
|
+
<li>✓ Report issues</li>
|
|
745
|
+
<li>✓ Suggest features</li>
|
|
746
|
+
<li>✓ Submit pull requests</li>
|
|
747
|
+
</ul>
|
|
748
|
+
<ui.Button
|
|
749
|
+
data-id=""
|
|
750
|
+
data-binding={[
|
|
751
|
+
{
|
|
752
|
+
label: 'Card 3 Button',
|
|
753
|
+
property: 'innerText',
|
|
754
|
+
},
|
|
755
|
+
]}
|
|
756
|
+
variant="outlined"
|
|
757
|
+
size="large"
|
|
758
|
+
block
|
|
759
|
+
className={cn(
|
|
760
|
+
'border-2 border-indigo-500 text-indigo-500',
|
|
761
|
+
'hover:bg-indigo-50',
|
|
762
|
+
//
|
|
763
|
+
)}
|
|
764
|
+
>
|
|
765
|
+
View on GitHub
|
|
766
|
+
</ui.Button>
|
|
767
|
+
</ui.Card>
|
|
768
|
+
</div>
|
|
769
|
+
</div>
|
|
770
|
+
</section>
|
|
771
|
+
`
|
|
772
|
+
},
|
|
773
|
+
{
|
|
774
|
+
id: "key-features",
|
|
775
|
+
name: "Key Features",
|
|
776
|
+
code: `
|
|
777
|
+
<section
|
|
778
|
+
data-name="Key Features"
|
|
779
|
+
className={cn(
|
|
780
|
+
'bg-indigo-50 px-5 py-16',
|
|
781
|
+
//
|
|
782
|
+
)}
|
|
783
|
+
>
|
|
784
|
+
<div
|
|
785
|
+
className={cn(
|
|
786
|
+
'mx-auto max-w-6xl',
|
|
787
|
+
//
|
|
788
|
+
)}
|
|
789
|
+
>
|
|
790
|
+
<h2
|
|
791
|
+
className={cn(
|
|
792
|
+
'mb-12 text-center text-4xl font-bold text-gray-800',
|
|
793
|
+
//
|
|
794
|
+
)}
|
|
795
|
+
>
|
|
796
|
+
Key Features
|
|
797
|
+
</h2>
|
|
798
|
+
<div
|
|
799
|
+
className={cn(
|
|
800
|
+
'grid gap-8 md:grid-cols-2',
|
|
801
|
+
//
|
|
802
|
+
)}
|
|
803
|
+
>
|
|
804
|
+
<div
|
|
805
|
+
className={cn(
|
|
806
|
+
'rounded-lg bg-white p-8 shadow-md',
|
|
807
|
+
//
|
|
808
|
+
)}
|
|
809
|
+
>
|
|
810
|
+
<div
|
|
811
|
+
className={cn(
|
|
812
|
+
'mb-4 text-4xl',
|
|
813
|
+
//
|
|
814
|
+
)}
|
|
815
|
+
>
|
|
816
|
+
🎨
|
|
817
|
+
</div>
|
|
818
|
+
<h3
|
|
819
|
+
className={cn(
|
|
820
|
+
'mb-4 text-2xl font-bold text-gray-800',
|
|
821
|
+
//
|
|
822
|
+
)}
|
|
823
|
+
>
|
|
824
|
+
Visual Editing
|
|
825
|
+
</h3>
|
|
826
|
+
<p
|
|
827
|
+
className={cn(
|
|
828
|
+
'text-gray-600',
|
|
829
|
+
//
|
|
830
|
+
)}
|
|
831
|
+
>
|
|
832
|
+
See your changes in real-time as you build. Live Editor provides
|
|
833
|
+
instant visual feedback, making it easier to understand how code
|
|
834
|
+
affects your interface.
|
|
835
|
+
</p>
|
|
836
|
+
</div>
|
|
837
|
+
<div
|
|
838
|
+
className={cn(
|
|
839
|
+
'rounded-lg bg-white p-8 shadow-md',
|
|
840
|
+
//
|
|
841
|
+
)}
|
|
842
|
+
>
|
|
843
|
+
<div
|
|
844
|
+
className={cn(
|
|
845
|
+
'mb-4 text-4xl',
|
|
846
|
+
//
|
|
847
|
+
)}
|
|
848
|
+
>
|
|
849
|
+
🧩
|
|
850
|
+
</div>
|
|
851
|
+
<h3
|
|
852
|
+
className={cn(
|
|
853
|
+
'mb-4 text-2xl font-bold text-gray-800',
|
|
854
|
+
//
|
|
855
|
+
)}
|
|
856
|
+
>
|
|
857
|
+
Component-Based
|
|
858
|
+
</h3>
|
|
859
|
+
<p
|
|
860
|
+
className={cn(
|
|
861
|
+
'text-gray-600',
|
|
862
|
+
//
|
|
863
|
+
)}
|
|
864
|
+
>
|
|
865
|
+
Build with reusable components that you can drag, drop, and
|
|
866
|
+
customize. Learn modern development patterns while creating your
|
|
867
|
+
interface.
|
|
868
|
+
</p>
|
|
869
|
+
</div>
|
|
870
|
+
</div>
|
|
871
|
+
</div>
|
|
872
|
+
</section>
|
|
873
|
+
`
|
|
874
|
+
},
|
|
875
|
+
{
|
|
876
|
+
id: "stats",
|
|
877
|
+
name: "Stats",
|
|
878
|
+
code: `
|
|
879
|
+
<section
|
|
880
|
+
data-name="Stats"
|
|
881
|
+
className={cn(
|
|
882
|
+
'bg-indigo-600 text-white',
|
|
883
|
+
//
|
|
884
|
+
)}
|
|
885
|
+
>
|
|
886
|
+
<ui.Marquees
|
|
887
|
+
data-id=""
|
|
888
|
+
data-binding={[{ label: 'Stats Items', property: 'items' }]}
|
|
889
|
+
speed={100}
|
|
890
|
+
pauseOnHover={true}
|
|
891
|
+
autoFill={true}
|
|
892
|
+
className="px-5 py-16"
|
|
893
|
+
items={[
|
|
894
|
+
{
|
|
895
|
+
key: 'stats-row',
|
|
896
|
+
children: (
|
|
897
|
+
<div
|
|
898
|
+
data-id=""
|
|
899
|
+
data-binding={[
|
|
900
|
+
{
|
|
901
|
+
label: 'Stats Cards',
|
|
902
|
+
property: 'children',
|
|
903
|
+
},
|
|
904
|
+
]}
|
|
905
|
+
className={cn('flex gap-20')}
|
|
906
|
+
>
|
|
907
|
+
<div
|
|
908
|
+
className={cn(
|
|
909
|
+
'min-w-60 text-center',
|
|
910
|
+
//
|
|
911
|
+
)}
|
|
912
|
+
>
|
|
913
|
+
<p
|
|
914
|
+
data-id=""
|
|
915
|
+
data-binding={[
|
|
916
|
+
{
|
|
917
|
+
label: 'Title',
|
|
918
|
+
property: 'innerText',
|
|
919
|
+
},
|
|
920
|
+
]}
|
|
921
|
+
className={cn(
|
|
922
|
+
'mb-2 text-5xl font-bold',
|
|
923
|
+
//
|
|
924
|
+
)}
|
|
925
|
+
>
|
|
926
|
+
Open
|
|
927
|
+
</p>
|
|
928
|
+
<p
|
|
929
|
+
data-id=""
|
|
930
|
+
data-binding={[
|
|
931
|
+
{
|
|
932
|
+
label: 'Description',
|
|
933
|
+
property: 'innerText',
|
|
934
|
+
},
|
|
935
|
+
]}
|
|
936
|
+
className={cn(
|
|
937
|
+
'text-indigo-200',
|
|
938
|
+
//
|
|
939
|
+
)}
|
|
940
|
+
>
|
|
941
|
+
Source Project
|
|
942
|
+
</p>
|
|
943
|
+
</div>
|
|
944
|
+
<div
|
|
945
|
+
className={cn(
|
|
946
|
+
'min-w-60 text-center',
|
|
947
|
+
//
|
|
948
|
+
)}
|
|
949
|
+
>
|
|
950
|
+
<p
|
|
951
|
+
data-id=""
|
|
952
|
+
data-binding={[
|
|
953
|
+
{
|
|
954
|
+
label: 'Title',
|
|
955
|
+
property: 'innerText',
|
|
956
|
+
},
|
|
957
|
+
]}
|
|
958
|
+
className={cn(
|
|
959
|
+
'mb-2 text-5xl font-bold',
|
|
960
|
+
//
|
|
961
|
+
)}
|
|
962
|
+
>
|
|
963
|
+
Free
|
|
964
|
+
</p>
|
|
965
|
+
<p
|
|
966
|
+
data-id=""
|
|
967
|
+
data-binding={[
|
|
968
|
+
{
|
|
969
|
+
label: 'Description',
|
|
970
|
+
property: 'innerText',
|
|
971
|
+
},
|
|
972
|
+
]}
|
|
973
|
+
className={cn(
|
|
974
|
+
'text-indigo-200',
|
|
975
|
+
//
|
|
976
|
+
)}
|
|
977
|
+
>
|
|
978
|
+
For Everyone
|
|
979
|
+
</p>
|
|
980
|
+
</div>
|
|
981
|
+
<div
|
|
982
|
+
className={cn(
|
|
983
|
+
'min-w-60 text-center',
|
|
984
|
+
//
|
|
985
|
+
)}
|
|
986
|
+
>
|
|
987
|
+
<p
|
|
988
|
+
data-id=""
|
|
989
|
+
data-binding={[
|
|
990
|
+
{
|
|
991
|
+
label: 'Title',
|
|
992
|
+
property: 'innerText',
|
|
993
|
+
},
|
|
994
|
+
]}
|
|
995
|
+
className={cn(
|
|
996
|
+
'mb-2 text-5xl font-bold',
|
|
997
|
+
//
|
|
998
|
+
)}
|
|
999
|
+
>
|
|
1000
|
+
Active
|
|
1001
|
+
</p>
|
|
1002
|
+
<p
|
|
1003
|
+
data-id=""
|
|
1004
|
+
data-binding={[
|
|
1005
|
+
{
|
|
1006
|
+
label: 'Description',
|
|
1007
|
+
property: 'innerText',
|
|
1008
|
+
},
|
|
1009
|
+
]}
|
|
1010
|
+
className={cn(
|
|
1011
|
+
'text-indigo-200',
|
|
1012
|
+
//
|
|
1013
|
+
)}
|
|
1014
|
+
>
|
|
1015
|
+
Community
|
|
1016
|
+
</p>
|
|
1017
|
+
</div>
|
|
1018
|
+
<div
|
|
1019
|
+
className={cn(
|
|
1020
|
+
'min-w-60 text-center',
|
|
1021
|
+
//
|
|
1022
|
+
)}
|
|
1023
|
+
>
|
|
1024
|
+
<p
|
|
1025
|
+
data-id=""
|
|
1026
|
+
data-binding={[
|
|
1027
|
+
{
|
|
1028
|
+
label: 'Title',
|
|
1029
|
+
property: 'innerText',
|
|
1030
|
+
},
|
|
1031
|
+
]}
|
|
1032
|
+
className={cn(
|
|
1033
|
+
'mb-2 text-5xl font-bold',
|
|
1034
|
+
//
|
|
1035
|
+
)}
|
|
1036
|
+
>
|
|
1037
|
+
Learn
|
|
1038
|
+
</p>
|
|
1039
|
+
<p
|
|
1040
|
+
data-id=""
|
|
1041
|
+
data-binding={[
|
|
1042
|
+
{
|
|
1043
|
+
label: 'Description',
|
|
1044
|
+
property: 'innerText',
|
|
1045
|
+
},
|
|
1046
|
+
]}
|
|
1047
|
+
className={cn(
|
|
1048
|
+
'text-indigo-200',
|
|
1049
|
+
//
|
|
1050
|
+
)}
|
|
1051
|
+
>
|
|
1052
|
+
By Doing
|
|
1053
|
+
</p>
|
|
1054
|
+
</div>
|
|
1055
|
+
</div>
|
|
1056
|
+
),
|
|
1057
|
+
},
|
|
1058
|
+
]}
|
|
1059
|
+
/>
|
|
1060
|
+
</section>
|
|
1061
|
+
`
|
|
1062
|
+
},
|
|
1063
|
+
{
|
|
1064
|
+
id: "faq",
|
|
1065
|
+
name: "FAQ",
|
|
1066
|
+
code: `
|
|
1067
|
+
<section
|
|
1068
|
+
data-name="FAQ"
|
|
1069
|
+
className={cn(
|
|
1070
|
+
'px-5 py-16',
|
|
1071
|
+
//
|
|
1072
|
+
)}
|
|
1073
|
+
>
|
|
1074
|
+
<div
|
|
1075
|
+
className={cn(
|
|
1076
|
+
'mx-auto max-w-3xl',
|
|
1077
|
+
//
|
|
1078
|
+
)}
|
|
1079
|
+
>
|
|
1080
|
+
<ui.Typography.Title
|
|
1081
|
+
data-id=""
|
|
1082
|
+
data-binding={[{ label: 'Title', property: 'innerText' }]}
|
|
1083
|
+
level={2}
|
|
1084
|
+
className={cn(
|
|
1085
|
+
'mb-12 text-center text-4xl font-bold text-gray-800',
|
|
1086
|
+
//
|
|
1087
|
+
)}
|
|
1088
|
+
>
|
|
1089
|
+
Frequently Asked Questions
|
|
1090
|
+
</ui.Typography.Title>
|
|
1091
|
+
<ui.Collapse
|
|
1092
|
+
data-id=""
|
|
1093
|
+
data-binding={[{ label: 'FAQ Items', property: 'items' }]}
|
|
1094
|
+
items={[
|
|
1095
|
+
{
|
|
1096
|
+
key: '1',
|
|
1097
|
+
label: (
|
|
1098
|
+
<ui.Typography.Text
|
|
1099
|
+
data-id=""
|
|
1100
|
+
data-binding={[
|
|
1101
|
+
{
|
|
1102
|
+
label: 'Question 1',
|
|
1103
|
+
property: 'innerText',
|
|
1104
|
+
},
|
|
1105
|
+
]}
|
|
1106
|
+
className={cn('text-lg font-semibold text-gray-800')}
|
|
1107
|
+
>
|
|
1108
|
+
What is Live Editor?
|
|
1109
|
+
</ui.Typography.Text>
|
|
1110
|
+
),
|
|
1111
|
+
children: (
|
|
1112
|
+
<ui.Typography.Paragraph
|
|
1113
|
+
data-id=""
|
|
1114
|
+
data-binding={[
|
|
1115
|
+
{
|
|
1116
|
+
label: 'Answer 1',
|
|
1117
|
+
property: 'innerText',
|
|
1118
|
+
},
|
|
1119
|
+
]}
|
|
1120
|
+
className={cn('text-gray-600')}
|
|
1121
|
+
>
|
|
1122
|
+
Live Editor is an open-source tool for building web
|
|
1123
|
+
interfaces visually. It helps you learn web development by
|
|
1124
|
+
providing instant feedback as you build components.
|
|
1125
|
+
</ui.Typography.Paragraph>
|
|
1126
|
+
),
|
|
1127
|
+
},
|
|
1128
|
+
{
|
|
1129
|
+
key: '2',
|
|
1130
|
+
label: (
|
|
1131
|
+
<ui.Typography.Text
|
|
1132
|
+
data-id=""
|
|
1133
|
+
data-binding={[
|
|
1134
|
+
{
|
|
1135
|
+
label: 'Question 2',
|
|
1136
|
+
property: 'innerText',
|
|
1137
|
+
},
|
|
1138
|
+
]}
|
|
1139
|
+
className={cn('text-lg font-semibold text-gray-800')}
|
|
1140
|
+
>
|
|
1141
|
+
Do I need coding experience?
|
|
1142
|
+
</ui.Typography.Text>
|
|
1143
|
+
),
|
|
1144
|
+
children: (
|
|
1145
|
+
<ui.Typography.Paragraph
|
|
1146
|
+
data-id=""
|
|
1147
|
+
data-binding={[
|
|
1148
|
+
{
|
|
1149
|
+
label: 'Answer 2',
|
|
1150
|
+
property: 'innerText',
|
|
1151
|
+
},
|
|
1152
|
+
]}
|
|
1153
|
+
className={cn('text-gray-600')}
|
|
1154
|
+
>
|
|
1155
|
+
No! Live Editor is designed for all skill levels. Beginners
|
|
1156
|
+
can learn through visual editing, while experienced
|
|
1157
|
+
developers can work directly with code.
|
|
1158
|
+
</ui.Typography.Paragraph>
|
|
1159
|
+
),
|
|
1160
|
+
},
|
|
1161
|
+
{
|
|
1162
|
+
key: '3',
|
|
1163
|
+
label: (
|
|
1164
|
+
<ui.Typography.Text
|
|
1165
|
+
data-id=""
|
|
1166
|
+
data-binding={[
|
|
1167
|
+
{
|
|
1168
|
+
label: 'Question 3',
|
|
1169
|
+
property: 'innerText',
|
|
1170
|
+
},
|
|
1171
|
+
]}
|
|
1172
|
+
className={cn('text-lg font-semibold text-gray-800')}
|
|
1173
|
+
>
|
|
1174
|
+
Is it really free?
|
|
1175
|
+
</ui.Typography.Text>
|
|
1176
|
+
),
|
|
1177
|
+
children: (
|
|
1178
|
+
<ui.Typography.Paragraph
|
|
1179
|
+
data-id=""
|
|
1180
|
+
data-binding={[
|
|
1181
|
+
{
|
|
1182
|
+
label: 'Answer 3',
|
|
1183
|
+
property: 'innerText',
|
|
1184
|
+
},
|
|
1185
|
+
]}
|
|
1186
|
+
className={cn('text-gray-600')}
|
|
1187
|
+
>
|
|
1188
|
+
Yes, completely free! Live Editor is an open-source project
|
|
1189
|
+
with no hidden costs or premium tiers. All features are
|
|
1190
|
+
available to everyone.
|
|
1191
|
+
</ui.Typography.Paragraph>
|
|
1192
|
+
),
|
|
1193
|
+
},
|
|
1194
|
+
{
|
|
1195
|
+
key: '4',
|
|
1196
|
+
label: (
|
|
1197
|
+
<ui.Typography.Text
|
|
1198
|
+
data-id=""
|
|
1199
|
+
data-binding={[
|
|
1200
|
+
{
|
|
1201
|
+
label: 'Question 4',
|
|
1202
|
+
property: 'innerText',
|
|
1203
|
+
},
|
|
1204
|
+
]}
|
|
1205
|
+
className={cn('text-lg font-semibold text-gray-800')}
|
|
1206
|
+
>
|
|
1207
|
+
How can I contribute?
|
|
1208
|
+
</ui.Typography.Text>
|
|
1209
|
+
),
|
|
1210
|
+
children: (
|
|
1211
|
+
<ui.Typography.Paragraph
|
|
1212
|
+
data-id=""
|
|
1213
|
+
data-binding={[
|
|
1214
|
+
{
|
|
1215
|
+
label: 'Answer 4',
|
|
1216
|
+
property: 'innerText',
|
|
1217
|
+
},
|
|
1218
|
+
]}
|
|
1219
|
+
className={cn('text-gray-600')}
|
|
1220
|
+
>
|
|
1221
|
+
You can contribute by reporting bugs, suggesting features,
|
|
1222
|
+
sharing your projects, or contributing code. Check our
|
|
1223
|
+
GitHub repository for more details.
|
|
1224
|
+
</ui.Typography.Paragraph>
|
|
1225
|
+
),
|
|
1226
|
+
},
|
|
1227
|
+
]}
|
|
1228
|
+
/>
|
|
1229
|
+
</div>
|
|
1230
|
+
</section>
|
|
1231
|
+
`
|
|
1232
|
+
}
|
|
1233
|
+
];
|
|
1234
|
+
|
|
1235
|
+
//#endregion
|
|
1236
|
+
export { DRAGGABLE_ITEMS as a, DEFAULT_TEMPLATE as i, CONFIG as n, REGEX as o, DATA_ATTR as r, TS_PATTERNS as s, BINDING_PROP as t };
|
|
1237
|
+
//# sourceMappingURL=enums-3yleLgqV.mjs.map
|