@myissue/vue-website-page-builder 3.0.26 → 3.0.29
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/dist/vue-website-page-builder.css +1 -1
- package/dist/vue-website-page-builder.js +6538 -6428
- package/dist/vue-website-page-builder.umd.cjs +293 -186
- package/package.json +1 -1
- package/src/Components/Modals/DynamicModal.vue +1 -1
- package/src/Components/Modals/Modal.vue +78 -88
- package/src/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue +1 -1
- package/src/Components/PageBuilder/NoneCustomMediaLibraryComponent.vue +3 -1
- package/src/Components/PageBuilder/NoneCustomSearchComponent.vue +1 -1
- package/src/Components/Search/SearchComponents.vue +1 -1
- package/src/PageBuilder/PageBuilder.vue +39 -23
- package/src/css/app.css +1 -4
- package/src/utils/componentPreviews.ts +252 -164
- package/src/utils/html-elements/component.ts +10 -16
|
@@ -7,48 +7,20 @@ export interface ComponentPreviewConfig {
|
|
|
7
7
|
description?: string
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
// Generate the triangles and circle design scaled to fit within a rectangle
|
|
11
|
-
const generateImageIcon = (x: number, y: number, width: number, height: number): string => {
|
|
12
|
-
// Use uniform scaling based on the smaller dimension to avoid stretching
|
|
13
|
-
const scale = Math.min(width / 70, height / 50) * 0.8 // 0.8 to leave some padding
|
|
14
|
-
|
|
15
|
-
// Center the design within the rectangle
|
|
16
|
-
const centerX = x + width / 2
|
|
17
|
-
const centerY = y + height / 2
|
|
18
|
-
|
|
19
|
-
// Original design dimensions (scaled uniformly)
|
|
20
|
-
const mediumTriangleBase = 25 * scale
|
|
21
|
-
const mediumTriangleHeight = 15 * scale
|
|
22
|
-
const smallTriangleBase = mediumTriangleBase * 0.7 // 30% smaller
|
|
23
|
-
const smallTriangleHeight = mediumTriangleHeight * 0.7
|
|
24
|
-
const circleRadius = 3 * scale
|
|
25
|
-
|
|
26
|
-
// Position triangles side by side, centered
|
|
27
|
-
const totalWidth = mediumTriangleBase + smallTriangleBase + 5 * scale // 5 units spacing
|
|
28
|
-
const startX = centerX - totalWidth / 2
|
|
29
|
-
|
|
30
|
-
// Medium triangle (left)
|
|
31
|
-
const mediumTriangleX = startX + mediumTriangleBase / 2
|
|
32
|
-
const mediumTriangle = `<polygon points="${mediumTriangleX - mediumTriangleBase / 2},${centerY + mediumTriangleHeight / 2} ${mediumTriangleX},${centerY - mediumTriangleHeight / 2} ${mediumTriangleX + mediumTriangleBase / 2},${centerY + mediumTriangleHeight / 2}" fill="#718096"/>`
|
|
33
|
-
|
|
34
|
-
// Small triangle (right)
|
|
35
|
-
const smallTriangleX = startX + mediumTriangleBase + 5 * scale + smallTriangleBase / 2
|
|
36
|
-
const smallTriangle = `<polygon points="${smallTriangleX - smallTriangleBase / 2},${centerY + smallTriangleHeight / 2} ${smallTriangleX},${centerY - smallTriangleHeight / 2} ${smallTriangleX + smallTriangleBase / 2},${centerY + smallTriangleHeight / 2}" fill="#718096"/>`
|
|
37
|
-
|
|
38
|
-
// Circle above small triangle with space
|
|
39
|
-
const circle = `<circle cx="${smallTriangleX}" cy="${centerY - smallTriangleHeight / 2 - circleRadius - 3 * scale}" r="${circleRadius}" fill="#718096"/>`
|
|
40
|
-
|
|
41
|
-
return mediumTriangle + smallTriangle + circle
|
|
42
|
-
}
|
|
43
|
-
|
|
44
10
|
// Generate placeholder image data URL from Single Image SVG
|
|
45
11
|
export const getPlaceholderImageDataUrl = (): string => {
|
|
46
12
|
const singleImageSvg = `
|
|
47
|
-
<svg
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
13
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150">
|
|
14
|
+
<defs>
|
|
15
|
+
<style>
|
|
16
|
+
.bg { fill: #384152; }
|
|
17
|
+
.fg { fill: #718096; }
|
|
18
|
+
</style>
|
|
19
|
+
</defs>
|
|
20
|
+
<rect class="bg" width="200" height="150"/>
|
|
21
|
+
<polygon class="fg" points="65 90.01 90 60.01 115 90.01"/>
|
|
22
|
+
<polygon class="fg" points="110 90.01 122.5 75.01 135 90.01"/>
|
|
23
|
+
<circle class="fg" cx="122.5" cy="64.15" r="4.16"/>
|
|
52
24
|
</svg>
|
|
53
25
|
`
|
|
54
26
|
|
|
@@ -62,166 +34,283 @@ export const generateComponentPreview = (title: string): string => {
|
|
|
62
34
|
'Single Image': {
|
|
63
35
|
title: 'Single Image',
|
|
64
36
|
svg: `
|
|
65
|
-
<svg
|
|
66
|
-
<
|
|
67
|
-
|
|
68
|
-
|
|
37
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150">
|
|
38
|
+
<defs>
|
|
39
|
+
<style>
|
|
40
|
+
.bg { fill: #384152; }
|
|
41
|
+
.fg { fill: #718096; }
|
|
42
|
+
</style>
|
|
43
|
+
</defs>
|
|
44
|
+
<rect class="bg" width="200" height="150"/>
|
|
45
|
+
<polygon class="fg" points="65 90.01 90 60.01 115 90.01"/>
|
|
46
|
+
<polygon class="fg" points="110 90.01 122.5 75.01 135 90.01"/>
|
|
47
|
+
<circle class="fg" cx="122.5" cy="64.15" r="4.16"/>
|
|
69
48
|
</svg>
|
|
70
49
|
`,
|
|
71
50
|
},
|
|
72
|
-
|
|
51
|
+
|
|
52
|
+
'2 Vertical Images': {
|
|
73
53
|
title: '2 Vertical Images',
|
|
74
54
|
svg: `
|
|
75
|
-
<svg viewBox="0 0
|
|
76
|
-
<
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
55
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137.88 122.11">
|
|
56
|
+
<defs>
|
|
57
|
+
<style>
|
|
58
|
+
.bg { fill: #384152; }
|
|
59
|
+
.fg { fill: #718096; }
|
|
60
|
+
</style>
|
|
61
|
+
</defs>
|
|
62
|
+
<rect class="bg" width="63.93" height="122.11"/>
|
|
63
|
+
<rect class="bg" x="73.95" width="63.93" height="122.11"/>
|
|
64
|
+
<polygon class="fg" points="8.68 71.04 25.31 51.08 41.94 71.04"/>
|
|
65
|
+
<polygon class="fg" points="38.62 71.04 46.93 61.06 55.24 71.04"/>
|
|
66
|
+
<circle class="fg" cx="46.93" cy="53.84" r="2.77"/>
|
|
67
|
+
<polygon class="fg" points="82.64 71.04 99.27 51.08 115.89 71.04"/>
|
|
68
|
+
<polygon class="fg" points="112.57 71.04 120.88 61.06 129.2 71.04"/>
|
|
69
|
+
<circle class="fg" cx="120.88" cy="53.84" r="2.77"/>
|
|
81
70
|
</svg>
|
|
82
71
|
`,
|
|
83
72
|
},
|
|
84
|
-
|
|
85
|
-
|
|
73
|
+
|
|
74
|
+
'2 Square Images': {
|
|
75
|
+
title: '2 Square Images',
|
|
86
76
|
svg: `
|
|
87
|
-
<svg viewBox="0 0
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
77
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 159.09 73.9">
|
|
78
|
+
<defs>
|
|
79
|
+
<style>
|
|
80
|
+
.bg { fill: #384152; }
|
|
81
|
+
.fg { fill: #718096; }
|
|
82
|
+
</style>
|
|
83
|
+
</defs>
|
|
84
|
+
<rect class="bg" width="73.9" height="73.9"/>
|
|
85
|
+
<rect class="bg" x="85.19" width="73.9" height="73.9"/>
|
|
86
|
+
<polygon class="fg" points="11.24 47.97 29.6 25.94 47.97 47.97"/>
|
|
87
|
+
<polygon class="fg" points="44.29 47.97 53.48 36.96 62.66 47.97"/>
|
|
88
|
+
<circle class="fg" cx="53.48" cy="28.98" r="3.06"/>
|
|
89
|
+
<polygon class="fg" points="96.43 47.97 114.8 25.94 133.16 47.97"/>
|
|
90
|
+
<polygon class="fg" points="129.49 47.97 138.67 36.96 147.85 47.97"/>
|
|
91
|
+
<circle class="fg" cx="138.67" cy="28.98" r="3.06"/>
|
|
93
92
|
</svg>
|
|
94
93
|
`,
|
|
95
94
|
},
|
|
96
|
-
|
|
97
|
-
|
|
95
|
+
|
|
96
|
+
'3 Square Images': {
|
|
97
|
+
title: '3 Square Images',
|
|
98
98
|
svg: `
|
|
99
|
-
<svg viewBox="0 0
|
|
100
|
-
<
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
99
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 53.92">
|
|
100
|
+
<defs>
|
|
101
|
+
<style>
|
|
102
|
+
.bg { fill: #384152; }
|
|
103
|
+
.fg { fill: #718096; }
|
|
104
|
+
</style>
|
|
105
|
+
</defs>
|
|
106
|
+
<rect class="bg" width="53.92" height="53.92"/>
|
|
107
|
+
<rect class="bg" x="62.15" width="53.92" height="53.92"/>
|
|
108
|
+
<rect class="bg" x="123.37" width="53.92" height="53.92"/>
|
|
109
|
+
<polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
|
|
110
|
+
<polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
|
|
111
|
+
<circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
|
|
112
|
+
<polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
|
|
113
|
+
<polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
|
|
114
|
+
<circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
|
|
115
|
+
<polygon class="fg" points="131.57 35 144.96 18.92 158.36 35"/>
|
|
116
|
+
<polygon class="fg" points="155.68 35 162.38 26.96 169.08 35"/>
|
|
117
|
+
<circle class="fg" cx="162.38" cy="21.15" r="2.23"/>
|
|
107
118
|
</svg>
|
|
108
119
|
`,
|
|
109
120
|
},
|
|
110
|
-
|
|
111
|
-
|
|
121
|
+
|
|
122
|
+
'6 Square Images Grid': {
|
|
123
|
+
title: '6 Square Images Grid',
|
|
112
124
|
svg: `
|
|
113
|
-
<svg viewBox="0 0
|
|
114
|
-
<
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
<rect
|
|
121
|
-
<rect
|
|
122
|
-
<rect
|
|
123
|
-
<rect
|
|
124
|
-
<rect x="
|
|
125
|
-
<rect x="
|
|
126
|
-
<
|
|
127
|
-
<
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
125
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 120.27">
|
|
126
|
+
<defs>
|
|
127
|
+
<style>
|
|
128
|
+
.bg { fill: #384152; }
|
|
129
|
+
.fg { fill: #718096; }
|
|
130
|
+
</style>
|
|
131
|
+
</defs>
|
|
132
|
+
<rect class="bg" width="53.92" height="53.92"/>
|
|
133
|
+
<rect class="bg" x="62.15" width="53.92" height="53.92"/>
|
|
134
|
+
<rect class="bg" x="123.37" width="53.92" height="53.92"/>
|
|
135
|
+
<rect class="bg" y="66.35" width="53.92" height="53.92"/>
|
|
136
|
+
<rect class="bg" x="62.15" y="66.35" width="53.92" height="53.92"/>
|
|
137
|
+
<rect class="bg" x="123.37" y="66.35" width="53.92" height="53.92"/>
|
|
138
|
+
<polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
|
|
139
|
+
<polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
|
|
140
|
+
<circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
|
|
141
|
+
<polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
|
|
142
|
+
<polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
|
|
143
|
+
<circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
|
|
144
|
+
<polygon class="fg" points="131.57 35 144.96 18.92 158.36 35"/>
|
|
145
|
+
<polygon class="fg" points="155.68 35 162.38 26.96 169.08 35"/>
|
|
146
|
+
<circle class="fg" cx="162.38" cy="21.15" r="2.23"/>
|
|
147
|
+
<polygon class="fg" points="8.2 101.35 21.6 85.28 35 101.35"/>
|
|
148
|
+
<polygon class="fg" points="32.32 101.35 39.02 93.32 45.71 101.35"/>
|
|
149
|
+
<circle class="fg" cx="39.02" cy="87.5" r="2.23"/>
|
|
150
|
+
<polygon class="fg" points="70.36 101.35 83.75 85.28 97.15 101.35"/>
|
|
151
|
+
<polygon class="fg" points="94.47 101.35 101.17 93.32 107.87 101.35"/>
|
|
152
|
+
<circle class="fg" cx="101.17" cy="87.5" r="2.23"/>
|
|
153
|
+
<polygon class="fg" points="131.57 101.35 144.96 85.28 158.36 101.35"/>
|
|
154
|
+
<polygon class="fg" points="155.68 101.35 162.38 93.32 169.08 101.35"/>
|
|
155
|
+
<circle class="fg" cx="162.38" cy="87.5" r="2.23"/>
|
|
134
156
|
</svg>
|
|
135
157
|
`,
|
|
136
158
|
},
|
|
137
|
-
|
|
138
|
-
|
|
159
|
+
|
|
160
|
+
'Two Square Images With Text': {
|
|
161
|
+
title: 'Two Square Images With Text',
|
|
139
162
|
svg: `
|
|
140
|
-
<svg viewBox="0 0
|
|
141
|
-
<
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
<rect
|
|
148
|
-
|
|
149
|
-
|
|
163
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.99 53.92">
|
|
164
|
+
<defs>
|
|
165
|
+
<style>
|
|
166
|
+
.bg { fill: #384152; }
|
|
167
|
+
.fg { fill: #718096; }
|
|
168
|
+
</style>
|
|
169
|
+
</defs>
|
|
170
|
+
<rect class="bg" width="53.92" height="53.92"/>
|
|
171
|
+
<rect class="bg" x="62.15" width="53.92" height="53.92"/>
|
|
172
|
+
<polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
|
|
173
|
+
<polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
|
|
174
|
+
<circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
|
|
175
|
+
<polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
|
|
176
|
+
<polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
|
|
177
|
+
<circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
|
|
178
|
+
<rect class="bg" x="126.07" width="53.92" height="2.93"/>
|
|
179
|
+
<rect class="bg" x="126.07" y="4" width="53.92" height="2.93"/>
|
|
180
|
+
<rect class="bg" x="126.07" y="7.99" width="53.92" height="2.93"/>
|
|
181
|
+
<rect class="bg" x="126.07" y="11.99" width="53.92" height="2.93"/>
|
|
182
|
+
<rect class="bg" x="126.07" y="15.99" width="53.92" height="2.93"/>
|
|
150
183
|
</svg>
|
|
151
184
|
`,
|
|
152
185
|
},
|
|
186
|
+
|
|
153
187
|
'3 Vertical Images': {
|
|
154
188
|
title: '3 Vertical Images',
|
|
155
189
|
svg: `
|
|
156
|
-
<svg viewBox="0 0
|
|
157
|
-
<
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
190
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.84 110.72">
|
|
191
|
+
<defs>
|
|
192
|
+
<style>
|
|
193
|
+
.bg { fill: #384152; }
|
|
194
|
+
.fg { fill: #718096; }
|
|
195
|
+
</style>
|
|
196
|
+
</defs>
|
|
197
|
+
<rect class="bg" width="54.28" height="110.72"/>
|
|
198
|
+
<rect class="bg" x="62.79" width="54.28" height="110.72"/>
|
|
199
|
+
<rect class="bg" x="125.56" width="54.28" height="110.72"/>
|
|
200
|
+
<polygon class="fg" points="7.37 63.83 21.49 46.89 35.61 63.83"/>
|
|
201
|
+
<polygon class="fg" points="32.79 63.83 39.85 55.36 46.91 63.83"/>
|
|
202
|
+
<circle class="fg" cx="39.85" cy="49.23" r="2.35"/>
|
|
203
|
+
<polygon class="fg" points="70.17 63.83 84.29 46.89 98.4 63.83"/>
|
|
204
|
+
<polygon class="fg" points="95.58 63.83 102.64 55.36 109.7 63.83"/>
|
|
205
|
+
<circle class="fg" cx="102.64" cy="49.23" r="2.35"/>
|
|
206
|
+
<polygon class="fg" points="132.94 63.83 147.06 46.89 161.18 63.83"/>
|
|
207
|
+
<polygon class="fg" points="158.35 63.83 165.41 55.36 172.47 63.83"/>
|
|
208
|
+
<circle class="fg" cx="165.41" cy="49.23" r="2.35"/>
|
|
164
209
|
</svg>
|
|
165
210
|
`,
|
|
166
211
|
},
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
<svg viewBox="0 0 200 150" class="w-full h-full">
|
|
171
|
-
<rect x="0" y="0" width="200" height="150" fill="#384152"/>
|
|
172
|
-
<rect x="50" y="60" width="100" height="30" fill="#4a5568"/>
|
|
173
|
-
<path d="M75 75 L80 70 M80 70 L80 80 M80 70 L70 70" stroke="white" stroke-width="2" fill="none"/>
|
|
174
|
-
</svg>
|
|
175
|
-
`,
|
|
176
|
-
},
|
|
177
|
-
'4 Images With Text': {
|
|
178
|
-
title: '4 Images + Text',
|
|
212
|
+
|
|
213
|
+
'4 Square Images With Text': {
|
|
214
|
+
title: '4 Square Images With Text',
|
|
179
215
|
svg: `
|
|
180
|
-
<svg viewBox="0 0
|
|
181
|
-
<
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
<rect
|
|
188
|
-
<rect
|
|
189
|
-
<rect
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
216
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190.33 55.9">
|
|
217
|
+
<defs>
|
|
218
|
+
<style>
|
|
219
|
+
.bg { fill: #384152; }
|
|
220
|
+
.fg { fill: #718096; }
|
|
221
|
+
</style>
|
|
222
|
+
</defs>
|
|
223
|
+
<rect class="bg" width="42.55" height="42.55"/>
|
|
224
|
+
<rect class="bg" x="49.05" width="42.55" height="42.55"/>
|
|
225
|
+
<rect class="bg" x="97.35" width="42.55" height="42.55"/>
|
|
226
|
+
<rect class="bg" x="147.79" width="42.55" height="42.55"/>
|
|
227
|
+
<polygon class="fg" points="6.47 27.62 17.04 14.93 27.62 27.62"/>
|
|
228
|
+
<polygon class="fg" points="25.5 27.62 30.79 21.28 36.07 27.62"/>
|
|
229
|
+
<circle class="fg" cx="30.79" cy="16.69" r="1.76"/>
|
|
230
|
+
<polygon class="fg" points="55.52 27.62 66.09 14.93 76.66 27.62"/>
|
|
231
|
+
<polygon class="fg" points="74.55 27.62 79.83 21.28 85.12 27.62"/>
|
|
232
|
+
<circle class="fg" cx="79.83" cy="16.69" r="1.76"/>
|
|
233
|
+
<polygon class="fg" points="103.82 27.62 114.39 14.93 124.97 27.62"/>
|
|
234
|
+
<polygon class="fg" points="122.85 27.62 128.14 21.28 133.42 27.62"/>
|
|
235
|
+
<circle class="fg" cx="128.14" cy="16.69" r="1.76"/>
|
|
236
|
+
<polygon class="fg" points="154.26 27.62 164.83 14.93 175.4 27.62"/>
|
|
237
|
+
<polygon class="fg" points="173.29 27.62 178.57 21.28 183.86 27.62"/>
|
|
238
|
+
<circle class="fg" cx="178.57" cy="16.69" r="1.76"/>
|
|
239
|
+
<rect class="bg" y="47.28" width="42.55" height="2.31"/>
|
|
240
|
+
<rect class="bg" y="50.43" width="42.55" height="2.31"/>
|
|
241
|
+
<rect class="bg" y="53.59" width="42.55" height="2.31"/>
|
|
242
|
+
<rect class="bg" x="49.05" y="47.28" width="42.55" height="2.31"/>
|
|
243
|
+
<rect class="bg" x="49.05" y="50.43" width="42.55" height="2.31"/>
|
|
244
|
+
<rect class="bg" x="49.05" y="53.59" width="42.55" height="2.31"/>
|
|
245
|
+
<rect class="bg" x="97.35" y="47.28" width="42.55" height="2.31"/>
|
|
246
|
+
<rect class="bg" x="97.35" y="50.43" width="42.55" height="2.31"/>
|
|
247
|
+
<rect class="bg" x="97.35" y="53.59" width="42.55" height="2.31"/>
|
|
248
|
+
<rect class="bg" x="147.79" y="47.28" width="42.55" height="2.31"/>
|
|
249
|
+
<rect class="bg" x="147.79" y="50.43" width="42.55" height="2.31"/>
|
|
250
|
+
<rect class="bg" x="147.79" y="53.59" width="42.55" height="2.31"/>
|
|
194
251
|
</svg>
|
|
195
252
|
`,
|
|
196
253
|
},
|
|
197
|
-
|
|
198
|
-
|
|
254
|
+
|
|
255
|
+
'3 Square Images With Text': {
|
|
256
|
+
title: '3 Square Images With Text',
|
|
199
257
|
svg: `
|
|
200
|
-
<svg viewBox="0 0
|
|
201
|
-
<
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
<rect
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
258
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 70.84">
|
|
259
|
+
<defs>
|
|
260
|
+
<style>
|
|
261
|
+
.bg { fill: #384152; }
|
|
262
|
+
.fg { fill: #718096; }
|
|
263
|
+
</style>
|
|
264
|
+
</defs>
|
|
265
|
+
<rect class="bg" width="53.92" height="53.92"/>
|
|
266
|
+
<rect class="bg" x="62.15" width="53.92" height="53.92"/>
|
|
267
|
+
<rect class="bg" x="123.37" width="53.92" height="53.92"/>
|
|
268
|
+
<polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
|
|
269
|
+
<polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
|
|
270
|
+
<circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
|
|
271
|
+
<polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
|
|
272
|
+
<polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
|
|
273
|
+
<circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
|
|
274
|
+
<polygon class="fg" points="131.57 35 144.96 18.92 158.36 35"/>
|
|
275
|
+
<polygon class="fg" points="155.68 35 162.38 26.96 169.08 35"/>
|
|
276
|
+
<circle class="fg" cx="162.38" cy="21.15" r="2.23"/>
|
|
277
|
+
<rect class="bg" y="59.92" width="53.92" height="2.93"/>
|
|
278
|
+
<rect class="bg" y="63.91" width="53.92" height="2.93"/>
|
|
279
|
+
<rect class="bg" y="67.91" width="53.92" height="2.93"/>
|
|
280
|
+
<rect class="bg" x="62.15" y="59.92" width="53.92" height="2.93"/>
|
|
281
|
+
<rect class="bg" x="62.15" y="63.91" width="53.92" height="2.93"/>
|
|
282
|
+
<rect class="bg" x="62.15" y="67.91" width="53.92" height="2.93"/>
|
|
283
|
+
<rect class="bg" x="123.37" y="59.92" width="53.92" height="2.93"/>
|
|
284
|
+
<rect class="bg" x="123.37" y="63.91" width="53.92" height="2.93"/>
|
|
285
|
+
<rect class="bg" x="123.37" y="67.91" width="53.92" height="2.93"/>
|
|
211
286
|
</svg>
|
|
212
287
|
`,
|
|
213
288
|
},
|
|
214
|
-
|
|
215
|
-
|
|
289
|
+
|
|
290
|
+
'2 Square Images With Text': {
|
|
291
|
+
title: '2 Square Images With Text',
|
|
216
292
|
svg: `
|
|
217
|
-
<svg viewBox="0 0
|
|
218
|
-
<
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
293
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124.18 75.79">
|
|
294
|
+
<defs>
|
|
295
|
+
<style>
|
|
296
|
+
.bg { fill: #384152; }
|
|
297
|
+
.fg { fill: #718096; }
|
|
298
|
+
</style>
|
|
299
|
+
</defs>
|
|
300
|
+
<rect class="bg" width="57.68" height="57.68"/>
|
|
301
|
+
<rect class="bg" x="66.5" width="57.68" height="57.68"/>
|
|
302
|
+
<polygon class="fg" points="8.77 37.45 23.11 20.25 37.44 37.45"/>
|
|
303
|
+
<polygon class="fg" points="34.58 37.45 41.74 28.85 48.91 37.45"/>
|
|
304
|
+
<circle class="fg" cx="41.74" cy="22.62" r="2.39"/>
|
|
305
|
+
<polygon class="fg" points="75.27 37.45 89.61 20.25 103.94 37.45"/>
|
|
306
|
+
<polygon class="fg" points="101.07 37.45 108.24 28.85 115.41 37.45"/>
|
|
307
|
+
<circle class="fg" cx="108.24" cy="22.62" r="2.39"/>
|
|
308
|
+
<rect class="bg" y="64.1" width="57.68" height="3.13"/>
|
|
309
|
+
<rect class="bg" y="68.38" width="57.68" height="3.13"/>
|
|
310
|
+
<rect class="bg" y="72.65" width="57.68" height="3.13"/>
|
|
311
|
+
<rect class="bg" x="66.5" y="64.1" width="57.68" height="3.13"/>
|
|
312
|
+
<rect class="bg" x="66.5" y="68.38" width="57.68" height="3.13"/>
|
|
313
|
+
<rect class="bg" x="66.5" y="72.65" width="57.68" height="3.13"/>
|
|
225
314
|
</svg>
|
|
226
315
|
`,
|
|
227
316
|
},
|
|
@@ -234,10 +323,9 @@ export const generateComponentPreview = (title: string): string => {
|
|
|
234
323
|
|
|
235
324
|
// Default fallback preview
|
|
236
325
|
return `
|
|
237
|
-
<svg viewBox="0 0 200 150"
|
|
238
|
-
<rect
|
|
239
|
-
<
|
|
240
|
-
${generateImageIcon(20, 20, 160, 110)}
|
|
326
|
+
<svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
|
|
327
|
+
<rect fill="#384152" width="200" height="150"/>
|
|
328
|
+
<text x="100" y="75" text-anchor="middle" fill="#718096" font-family="Arial, sans-serif" font-size="14">Preview</text>
|
|
241
329
|
</svg>
|
|
242
330
|
`
|
|
243
331
|
}
|
|
@@ -25,27 +25,27 @@ const component: Components[] = [
|
|
|
25
25
|
cover_image: null,
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
|
-
title: '2
|
|
28
|
+
title: '2 Vertical Images',
|
|
29
29
|
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="${placeholderImage}" alt="provider"> </div> </div> </div> </div>\n</section>`,
|
|
30
30
|
cover_image: null,
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
|
-
title: '2
|
|
34
|
-
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-
|
|
33
|
+
title: '2 Square Images',
|
|
34
|
+
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
35
35
|
cover_image: null,
|
|
36
36
|
},
|
|
37
37
|
{
|
|
38
|
-
title: '3
|
|
39
|
-
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-
|
|
38
|
+
title: '3 Square Images',
|
|
39
|
+
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
40
40
|
cover_image: null,
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
|
-
title: '6 Images Grid',
|
|
43
|
+
title: '6 Square Images Grid',
|
|
44
44
|
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2">\n<div class="mx-auto max-w-7xl">\n<div class="grid grid-cols-2 md:grid-cols-3 myPrimaryGap">\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="image">\n</div>\n\n</div>\n</div>\n</div>\n</section>`,
|
|
45
45
|
cover_image: null,
|
|
46
46
|
},
|
|
47
47
|
{
|
|
48
|
-
title: 'Two Images With
|
|
48
|
+
title: 'Two Square Images With Text',
|
|
49
49
|
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl">\n<div class="myPrimaryGap lg:flex lg:justify-center"><div class="flex-1 py-2">\n<div class="grid myPrimaryGap grid-cols-1 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> </div> </div> </div>\n\n<div class="flex-1 py-2"> <div class="break-words py-2"><p><strong>Title</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div> \n</div></div></div>\n</section>`,
|
|
50
50
|
cover_image: null,
|
|
51
51
|
},
|
|
@@ -55,23 +55,17 @@ const component: Components[] = [
|
|
|
55
55
|
cover_image: null,
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
title: '
|
|
59
|
-
html_code:
|
|
60
|
-
'<section>\n<div class="w-full md:pt-2 md:pb-2 pt-4 pb-4 lg:px-4 px-2">\n<div class="mx-auto max-w-7xl">\n<div id="linktree" class="border-2 border-gray-600 flex items-centre justify-start rounded-md font-medium text-black">\n<p>\n<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.example.com">Link to landing page</a>\n</p>\n</div>\n</div>\n</div>\n</section>',
|
|
61
|
-
cover_image: null,
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
title: '4 Images With Text',
|
|
58
|
+
title: '4 Square Images With Text',
|
|
65
59
|
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"><div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> </div> </div> </div>\n</section>`,
|
|
66
60
|
cover_image: null,
|
|
67
61
|
},
|
|
68
62
|
{
|
|
69
|
-
title: '3 Images With Text',
|
|
63
|
+
title: '3 Square Images With Text',
|
|
70
64
|
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> </div> </div> </div>\n</section>`,
|
|
71
65
|
cover_image: null,
|
|
72
66
|
},
|
|
73
67
|
{
|
|
74
|
-
title: '2 Images With Text',
|
|
68
|
+
title: '2 Square Images With Text',
|
|
75
69
|
html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> </div> </div> </div>\n</section>`,
|
|
76
70
|
cover_image: null,
|
|
77
71
|
},
|