Skip to content

Commit 8b8a99d

Browse files
hotlonghotlong
authored
Merge pull request #29 from objectstack-ai/copilot/optimize-examples-in-studio
2 parents c0ef1a6 + e166f7a commit 8b8a99d

File tree

7 files changed

+797
-627
lines changed

7 files changed

+797
-627
lines changed

‎apps/playground/src/data/examples/basic/image-gallery.json‎

Lines changed: 141 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,169 @@
11
{
22
"type": "div",
3-
"className": "space-y-6 max-w-6xl",
3+
"className": "min-h-screen bg-gradient-to-br from-rose-50 via-pink-50 to-fuchsia-100 p-6 md:p-8",
44
"body": [
55
{
66
"type": "div",
7-
"className": "space-y-2",
7+
"className": "max-w-6xl mx-auto space-y-8",
88
"body": [
99
{
10-
"type": "text",
11-
"content": "Image Component Gallery",
12-
"className": "text-3xl font-bold"
10+
"type": "div",
11+
"className": "space-y-3 backdrop-blur-sm bg-white/40 p-6 rounded-2xl border border-white/60 shadow-xl text-center",
12+
"body": [
13+
{
14+
"type": "text",
15+
"content": "🖼️ Image Component Gallery",
16+
"className": "text-4xl font-black bg-gradient-to-r from-rose-600 via-pink-600 to-fuchsia-600 bg-clip-text text-transparent"
17+
},
18+
{
19+
"type": "text",
20+
"content": "Various image layouts and styles using Tailwind CSS",
21+
"className": "text-gray-600 font-medium text-lg"
22+
}
23+
]
1324
},
1425
{
15-
"type": "text",
16-
"content": "Various image layouts and styles using Tailwind classes",
17-
"className": "text-muted-foreground"
18-
}
19-
]
20-
},
21-
{
22-
"type": "div",
23-
"className": "space-y-6",
24-
"body": [
25-
{
26-
"type": "card",
27-
"className": "p-6",
28-
"body": {
29-
"type": "div",
30-
"className": "space-y-4",
31-
"body": [
32-
{
33-
"type": "text",
34-
"content": "Standard Image",
35-
"className": "text-lg font-semibold"
36-
},
37-
{
38-
"type": "image",
39-
"src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba",
40-
"alt": "Mountain landscape",
41-
"className": "w-full h-64 object-cover rounded-lg"
42-
}
43-
]
44-
}
45-
},
46-
{
47-
"type": "card",
48-
"className": "p-6",
49-
"body": {
50-
"type": "div",
51-
"className": "space-y-4",
52-
"body": [
53-
{
54-
"type": "text",
55-
"content": "Image Grid",
56-
"className": "text-lg font-semibold"
57-
},
58-
{
59-
"type": "grid",
60-
"columns": 3,
61-
"gap": 4,
62-
"children": [
26+
"type": "div",
27+
"className": "space-y-8",
28+
"body": [
29+
{
30+
"type": "card",
31+
"className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl",
32+
"body": {
33+
"type": "div",
34+
"className": "space-y-6",
35+
"body": [
6336
{
64-
"type": "image",
65-
"src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba",
66-
"alt": "Image 1",
67-
"className": "w-full h-40 object-cover rounded-md"
37+
"type": "text",
38+
"content": "🌄 Hero Image",
39+
"className": "text-2xl font-bold text-gray-900"
6840
},
6941
{
7042
"type": "image",
71-
"src": "https://images.unsplash.com/photo-1682687221038-404cb8830901",
72-
"alt": "Image 2",
73-
"className": "w-full h-40 object-cover rounded-md"
74-
},
75-
{
76-
"type": "image",
77-
"src": "https://images.unsplash.com/photo-1682687220063-4742bd7fd538",
78-
"alt": "Image 3",
79-
"className": "w-full h-40 object-cover rounded-md"
43+
"src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba",
44+
"alt": "Mountain landscape",
45+
"className": "w-full h-80 object-cover rounded-2xl shadow-2xl hover:shadow-3xl transition-all hover:scale-[1.02] duration-300 ring-4 ring-white"
8046
}
8147
]
8248
}
83-
]
84-
}
85-
},
86-
{
87-
"type": "card",
88-
"className": "p-6",
89-
"body": {
90-
"type": "div",
91-
"className": "space-y-4",
92-
"body": [
93-
{
94-
"type": "text",
95-
"content": "Rounded & Styled Images",
96-
"className": "text-lg font-semibold"
97-
},
98-
{
99-
"type": "flex",
100-
"direction": "row",
101-
"gap": 4,
102-
"className": "flex-wrap",
103-
"children": [
49+
},
50+
{
51+
"type": "card",
52+
"className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl",
53+
"body": {
54+
"type": "div",
55+
"className": "space-y-6",
56+
"body": [
10457
{
105-
"type": "image",
106-
"src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba",
107-
"alt": "Rounded",
108-
"className": "w-32 h-32 object-cover rounded-full border-4 border-blue-200"
58+
"type": "text",
59+
"content": "🎨 Image Grid",
60+
"className": "text-2xl font-bold text-gray-900"
10961
},
11062
{
111-
"type": "image",
112-
"src": "https://images.unsplash.com/photo-1682687221038-404cb8830901",
113-
"alt": "Square",
114-
"className": "w-32 h-32 object-cover rounded-xl shadow-lg"
63+
"type": "grid",
64+
"columns": 3,
65+
"gap": 6,
66+
"children": [
67+
{
68+
"type": "image",
69+
"src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba",
70+
"alt": "Image 1",
71+
"className": "w-full h-48 object-cover rounded-xl shadow-lg hover:shadow-2xl transition-all hover:scale-105 duration-300 ring-2 ring-white"
72+
},
73+
{
74+
"type": "image",
75+
"src": "https://images.unsplash.com/photo-1682687221038-404cb8830901",
76+
"alt": "Image 2",
77+
"className": "w-full h-48 object-cover rounded-xl shadow-lg hover:shadow-2xl transition-all hover:scale-105 duration-300 ring-2 ring-white"
78+
},
79+
{
80+
"type": "image",
81+
"src": "https://images.unsplash.com/photo-1682687220063-4742bd7fd538",
82+
"alt": "Image 3",
83+
"className": "w-full h-48 object-cover rounded-xl shadow-lg hover:shadow-2xl transition-all hover:scale-105 duration-300 ring-2 ring-white"
84+
}
85+
]
86+
}
87+
]
88+
}
89+
},
90+
{
91+
"type": "card",
92+
"className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl",
93+
"body": {
94+
"type": "div",
95+
"className": "space-y-6",
96+
"body": [
97+
{
98+
"type": "text",
99+
"content": "✨ Styled Images",
100+
"className": "text-2xl font-bold text-gray-900"
115101
},
116102
{
117-
"type": "image",
118-
"src": "https://images.unsplash.com/photo-1682687220063-4742bd7fd538",
119-
"alt": "Styled",
120-
"className": "w-32 h-32 object-cover rounded-lg ring-2 ring-purple-500 ring-offset-2"
103+
"type": "flex",
104+
"direction": "row",
105+
"gap": 8,
106+
"className": "flex-wrap justify-center",
107+
"children": [
108+
{
109+
"type": "div",
110+
"className": "text-center space-y-3",
111+
"body": [
112+
{
113+
"type": "image",
114+
"src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba",
115+
"alt": "Rounded",
116+
"className": "w-40 h-40 object-cover rounded-full border-8 border-rose-200 shadow-2xl hover:border-rose-400 transition-all hover:scale-110 duration-300"
117+
},
118+
{
119+
"type": "text",
120+
"content": "Circular",
121+
"className": "text-sm font-semibold text-gray-600"
122+
}
123+
]
124+
},
125+
{
126+
"type": "div",
127+
"className": "text-center space-y-3",
128+
"body": [
129+
{
130+
"type": "image",
131+
"src": "https://images.unsplash.com/photo-1682687221038-404cb8830901",
132+
"alt": "Square",
133+
"className": "w-40 h-40 object-cover rounded-2xl shadow-2xl hover:shadow-3xl transition-all hover:-translate-y-2 duration-300 ring-4 ring-pink-300"
134+
},
135+
{
136+
"type": "text",
137+
"content": "Rounded Square",
138+
"className": "text-sm font-semibold text-gray-600"
139+
}
140+
]
141+
},
142+
{
143+
"type": "div",
144+
"className": "text-center space-y-3",
145+
"body": [
146+
{
147+
"type": "image",
148+
"src": "https://images.unsplash.com/photo-1682687220063-4742bd7fd538",
149+
"alt": "Styled",
150+
"className": "w-40 h-40 object-cover rounded-xl ring-4 ring-fuchsia-500 ring-offset-4 shadow-2xl hover:ring-offset-8 transition-all hover:rotate-3 duration-300"
151+
},
152+
{
153+
"type": "text",
154+
"content": "Ring Style",
155+
"className": "text-sm font-semibold text-gray-600"
156+
}
157+
]
158+
}
159+
]
121160
}
122161
]
123162
}
124-
]
125-
}
163+
}
164+
]
126165
}
127166
]
128167
}
129168
]
130-
}
169+
}

0 commit comments

Comments
 (0)