@anker-in/ui 0.1.4 → 0.1.8
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.md +162 -37
- package/dist/DemoRoom-Dx3PluHP.d.mts +85 -0
- package/dist/DemoRoom-Dx3PluHP.d.ts +85 -0
- package/dist/demo-room.css +3 -0
- package/dist/demo-room.css.map +1 -1
- package/dist/demo-room.d.mts +28 -64
- package/dist/demo-room.d.ts +28 -64
- package/dist/demo-room.js +478 -609
- package/dist/demo-room.js.map +1 -1
- package/dist/demo-room.mjs +480 -609
- package/dist/demo-room.mjs.map +1 -1
- package/dist/index.css +3 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +118 -42
- package/dist/index.d.ts +118 -42
- package/dist/index.js +1229 -1312
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1231 -1313
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +0 -1
- package/package.json +1 -1
- package/dist/DemoRoom-CZyrsxWe.d.mts +0 -30
- package/dist/DemoRoom-CZyrsxWe.d.ts +0 -30
package/dist/demo-room.js
CHANGED
|
@@ -4,7 +4,6 @@ var React2 = require('react');
|
|
|
4
4
|
var clsx = require('clsx');
|
|
5
5
|
var tailwindMerge = require('tailwind-merge');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
-
var headlessUi = require('@anker-in/headless-ui');
|
|
8
7
|
var IndexBar = require('antd-mobile/es/components/index-bar');
|
|
9
8
|
var List = require('antd-mobile/es/components/list');
|
|
10
9
|
require('antd-mobile/es/components/index-bar/index-bar.css');
|
|
@@ -19,463 +18,66 @@ var List__default = /*#__PURE__*/_interopDefault(List);
|
|
|
19
18
|
function cn(...inputs) {
|
|
20
19
|
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
21
20
|
}
|
|
22
|
-
var defaultTabs = [
|
|
23
|
-
{ id: "upcoming-events", label: "Upcoming Events" },
|
|
24
|
-
{ id: "find-demoroom", label: "Find Demoroom" },
|
|
25
|
-
{ id: "4-easy-steps", label: "4 Easy Steps" },
|
|
26
|
-
{ id: "faq", label: "FAQ" }
|
|
27
|
-
];
|
|
28
|
-
var HelpNav = ({
|
|
29
|
-
tabs = defaultTabs,
|
|
30
|
-
activeTabId: controlledActiveTabId,
|
|
31
|
-
onTabChange,
|
|
32
|
-
activeBorderColor = "#3ADB67",
|
|
33
|
-
className,
|
|
34
|
-
...props
|
|
35
|
-
}) => {
|
|
36
|
-
const [internalActiveTabId, setInternalActiveTabId] = React2.useState(
|
|
37
|
-
tabs[1]?.id || tabs[0]?.id
|
|
38
|
-
);
|
|
39
|
-
const activeTabId = controlledActiveTabId ?? internalActiveTabId;
|
|
40
|
-
const handleTabClick = (tabId) => {
|
|
41
|
-
if (!controlledActiveTabId) {
|
|
42
|
-
setInternalActiveTabId(tabId);
|
|
43
|
-
}
|
|
44
|
-
onTabChange?.(tabId);
|
|
45
|
-
};
|
|
46
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
47
|
-
"div",
|
|
48
|
-
{
|
|
49
|
-
className: cn(
|
|
50
|
-
"w-full pt-5 flex items-center justify-center gap-8 pb-8",
|
|
51
|
-
className
|
|
52
|
-
),
|
|
53
|
-
...props,
|
|
54
|
-
children: tabs.map((tab) => {
|
|
55
|
-
const isActive = tab.id === activeTabId;
|
|
56
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
57
|
-
"button",
|
|
58
|
-
{
|
|
59
|
-
onClick: () => handleTabClick(tab.id),
|
|
60
|
-
className: cn(
|
|
61
|
-
"relative text-[#080A0F]",
|
|
62
|
-
"pb-4",
|
|
63
|
-
"flex items-center gap-2",
|
|
64
|
-
"transition-all duration-200",
|
|
65
|
-
"outline-none focus:outline-none"
|
|
66
|
-
),
|
|
67
|
-
style: {
|
|
68
|
-
fontSize: "18px",
|
|
69
|
-
fontWeight: 600,
|
|
70
|
-
letterSpacing: "-0.36px",
|
|
71
|
-
lineHeight: "25.2px"
|
|
72
|
-
},
|
|
73
|
-
children: [
|
|
74
|
-
tab.label,
|
|
75
|
-
isActive && /* @__PURE__ */ jsxRuntime.jsx(
|
|
76
|
-
"span",
|
|
77
|
-
{
|
|
78
|
-
className: "absolute bottom-0 left-0 right-0 h-1 rounded-t",
|
|
79
|
-
style: {
|
|
80
|
-
backgroundColor: activeBorderColor,
|
|
81
|
-
height: "4px"
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
)
|
|
85
|
-
]
|
|
86
|
-
},
|
|
87
|
-
tab.id
|
|
88
|
-
);
|
|
89
|
-
})
|
|
90
|
-
}
|
|
91
|
-
);
|
|
92
|
-
};
|
|
93
|
-
HelpNav.displayName = "HelpNav";
|
|
94
|
-
var EventCard = ({
|
|
95
|
-
title,
|
|
96
|
-
description,
|
|
97
|
-
backgroundImage,
|
|
98
|
-
aspectRatio,
|
|
99
|
-
variant = "medium",
|
|
100
|
-
buttons = [],
|
|
101
|
-
subtitle,
|
|
102
|
-
className,
|
|
103
|
-
...props
|
|
104
|
-
}) => {
|
|
105
|
-
const isLarge = variant === "large";
|
|
106
|
-
const isMedium = variant === "medium";
|
|
107
|
-
const isProduct = variant === "product";
|
|
108
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
109
|
-
"div",
|
|
110
|
-
{
|
|
111
|
-
className: cn("rounded-3xl overflow-hidden relative", className),
|
|
112
|
-
style: {
|
|
113
|
-
backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
|
|
114
|
-
backgroundSize: "cover",
|
|
115
|
-
backgroundPosition: "center",
|
|
116
|
-
aspectRatio
|
|
117
|
-
},
|
|
118
|
-
...props,
|
|
119
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
120
|
-
"div",
|
|
121
|
-
{
|
|
122
|
-
className: cn(
|
|
123
|
-
"relative h-full flex flex-col",
|
|
124
|
-
isLarge && "justify-center pl-8",
|
|
125
|
-
!isLarge && "justify-end pl-8 pb-8"
|
|
126
|
-
),
|
|
127
|
-
children: [
|
|
128
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
129
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
130
|
-
"h3",
|
|
131
|
-
{
|
|
132
|
-
className: cn(
|
|
133
|
-
"font-semibold mb-3",
|
|
134
|
-
isLarge && "text-3xl text-gray-900",
|
|
135
|
-
isMedium && "text-2xl text-white",
|
|
136
|
-
isProduct && "text-2xl text-gray-900"
|
|
137
|
-
),
|
|
138
|
-
children: title
|
|
139
|
-
}
|
|
140
|
-
),
|
|
141
|
-
subtitle && isProduct && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 mb-4", children: subtitle }),
|
|
142
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(
|
|
143
|
-
"p",
|
|
144
|
-
{
|
|
145
|
-
className: cn(
|
|
146
|
-
"text-sm leading-relaxed",
|
|
147
|
-
isMedium && "text-white/90",
|
|
148
|
-
(isLarge || isProduct) && "text-gray-600"
|
|
149
|
-
),
|
|
150
|
-
children: description
|
|
151
|
-
}
|
|
152
|
-
)
|
|
153
|
-
] }),
|
|
154
|
-
buttons.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 mt-6", children: buttons.map((button, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
155
|
-
"button",
|
|
156
|
-
{
|
|
157
|
-
onClick: button.onClick,
|
|
158
|
-
className: cn(
|
|
159
|
-
"px-6 py-3 rounded-full font-medium text-sm transition-all duration-200",
|
|
160
|
-
button.variant === "primary" && "bg-gray-900 text-white hover:bg-gray-800",
|
|
161
|
-
button.variant === "secondary" && "bg-white text-gray-900 border border-gray-300 hover:bg-gray-50"
|
|
162
|
-
),
|
|
163
|
-
children: button.label
|
|
164
|
-
},
|
|
165
|
-
index
|
|
166
|
-
)) })
|
|
167
|
-
]
|
|
168
|
-
}
|
|
169
|
-
)
|
|
170
|
-
}
|
|
171
|
-
);
|
|
172
|
-
};
|
|
173
|
-
EventCard.displayName = "EventCard";
|
|
174
21
|
var Title = ({
|
|
175
22
|
title = "",
|
|
176
23
|
...props
|
|
177
24
|
}) => {
|
|
178
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full"), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[48px] font-
|
|
25
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full"), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[32px] min-l:text-[48px] font-bold mb-12 text-[#080A0F]", children: title }) });
|
|
179
26
|
};
|
|
180
27
|
Title.displayName = "Title";
|
|
181
|
-
var defaultEvents = [
|
|
182
|
-
{
|
|
183
|
-
variant: "large",
|
|
184
|
-
title: "IFA 2025 Event Name Event Name",
|
|
185
|
-
description: "Corem ipsum dolor sit amet, consectetur adipiscing elit.",
|
|
186
|
-
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
187
|
-
buttons: [
|
|
188
|
-
{
|
|
189
|
-
label: "Schedule Now",
|
|
190
|
-
variant: "primary"
|
|
191
|
-
}
|
|
192
|
-
],
|
|
193
|
-
aspectRatio: "1664 / 640"
|
|
194
|
-
},
|
|
195
|
-
{
|
|
196
|
-
variant: "medium",
|
|
197
|
-
title: "Local Event Name Local Event Name Local Event Name",
|
|
198
|
-
description: "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
|
|
199
|
-
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
200
|
-
buttons: [
|
|
201
|
-
{
|
|
202
|
-
label: "Schedule Now",
|
|
203
|
-
variant: "primary"
|
|
204
|
-
}
|
|
205
|
-
],
|
|
206
|
-
aspectRatio: "824 / 640"
|
|
207
|
-
},
|
|
208
|
-
{
|
|
209
|
-
variant: "product",
|
|
210
|
-
title: "Anker Prime",
|
|
211
|
-
subtitle: "Anker Prime 240W GaN Desktop Charger (4 Ports) Feb. 5th - 16th",
|
|
212
|
-
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
213
|
-
buttons: [
|
|
214
|
-
{
|
|
215
|
-
label: "Learn More",
|
|
216
|
-
variant: "secondary"
|
|
217
|
-
},
|
|
218
|
-
{
|
|
219
|
-
label: "Shop Now",
|
|
220
|
-
variant: "primary"
|
|
221
|
-
}
|
|
222
|
-
],
|
|
223
|
-
aspectRatio: "824 / 640"
|
|
224
|
-
},
|
|
225
|
-
{
|
|
226
|
-
variant: "medium",
|
|
227
|
-
title: "Local Event Name Local Event Name Local Event Name",
|
|
228
|
-
description: "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
|
|
229
|
-
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
230
|
-
buttons: [
|
|
231
|
-
{
|
|
232
|
-
label: "Schedule Now",
|
|
233
|
-
variant: "primary"
|
|
234
|
-
}
|
|
235
|
-
],
|
|
236
|
-
aspectRatio: "824 / 640"
|
|
237
|
-
},
|
|
238
|
-
{
|
|
239
|
-
variant: "product",
|
|
240
|
-
title: "Anker Prime",
|
|
241
|
-
subtitle: "Anker Prime 240W GaN Desktop Charger (4 Ports) Feb. 5th - 16th",
|
|
242
|
-
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
243
|
-
buttons: [
|
|
244
|
-
{
|
|
245
|
-
label: "Learn More",
|
|
246
|
-
variant: "secondary"
|
|
247
|
-
},
|
|
248
|
-
{
|
|
249
|
-
label: "Shop Now",
|
|
250
|
-
variant: "primary"
|
|
251
|
-
}
|
|
252
|
-
],
|
|
253
|
-
aspectRatio: "824 / 640"
|
|
254
|
-
}
|
|
255
|
-
];
|
|
256
|
-
var UpcomingEvents = ({
|
|
257
|
-
title = "Upcoming Events",
|
|
258
|
-
events = defaultEvents,
|
|
259
|
-
showViewMore = true,
|
|
260
|
-
onViewMore,
|
|
261
|
-
className,
|
|
262
|
-
...props
|
|
263
|
-
}) => {
|
|
264
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), ...props, children: [
|
|
265
|
-
/* @__PURE__ */ jsxRuntime.jsx(Title, { title }),
|
|
266
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-6 mb-[64px]", children: events.map((event, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(index === 0 ? "col-span-2" : ""), children: /* @__PURE__ */ jsxRuntime.jsx(EventCard, { ...event }) }, index)) }),
|
|
267
|
-
showViewMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
268
|
-
"button",
|
|
269
|
-
{
|
|
270
|
-
onClick: onViewMore,
|
|
271
|
-
className: "inline-flex items-center gap-2 text-gray-700 hover:text-gray-900 transition-colors duration-200",
|
|
272
|
-
children: [
|
|
273
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-bold", children: "View More" }),
|
|
274
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
275
|
-
"svg",
|
|
276
|
-
{
|
|
277
|
-
width: "16",
|
|
278
|
-
height: "16",
|
|
279
|
-
viewBox: "0 0 16 16",
|
|
280
|
-
fill: "none",
|
|
281
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
282
|
-
className: "transition-transform duration-200 group-hover:translate-y-0.5",
|
|
283
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
284
|
-
"path",
|
|
285
|
-
{
|
|
286
|
-
d: "M8 3L8 13M8 13L12 9M8 13L4 9",
|
|
287
|
-
stroke: "currentColor",
|
|
288
|
-
strokeWidth: "2",
|
|
289
|
-
strokeLinecap: "round",
|
|
290
|
-
strokeLinejoin: "round"
|
|
291
|
-
}
|
|
292
|
-
)
|
|
293
|
-
}
|
|
294
|
-
)
|
|
295
|
-
]
|
|
296
|
-
}
|
|
297
|
-
) })
|
|
298
|
-
] });
|
|
299
|
-
};
|
|
300
|
-
UpcomingEvents.displayName = "UpcomingEvents";
|
|
301
|
-
var defaultBannerData = {
|
|
302
|
-
title: "See it. Touch it. Make it Locally.",
|
|
303
|
-
subTitle: "Visit your local studio right around the corner.",
|
|
304
|
-
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
305
|
-
backgroundImageMobile: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
|
|
306
|
-
};
|
|
307
|
-
var Banner = ({
|
|
308
|
-
data = defaultBannerData,
|
|
309
|
-
className,
|
|
310
|
-
style,
|
|
311
|
-
...props
|
|
312
|
-
}) => {
|
|
313
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
314
|
-
"div",
|
|
315
|
-
{
|
|
316
|
-
className: cn("relative"),
|
|
317
|
-
style: { aspectRatio: "1920/480", ...style },
|
|
318
|
-
...props,
|
|
319
|
-
children: [
|
|
320
|
-
data?.backgroundImage && /* @__PURE__ */ jsxRuntime.jsx(
|
|
321
|
-
"img",
|
|
322
|
-
{
|
|
323
|
-
src: data.backgroundImage,
|
|
324
|
-
alt: "",
|
|
325
|
-
className: "inset-0 h-full w-full object-cover"
|
|
326
|
-
}
|
|
327
|
-
),
|
|
328
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
329
|
-
"div",
|
|
330
|
-
{
|
|
331
|
-
className: cn(
|
|
332
|
-
"absolute flex flex-col gap-4 justify-center m-auto top-0 bottom-0 left-0 right-0 z-10",
|
|
333
|
-
className
|
|
334
|
-
),
|
|
335
|
-
children: [
|
|
336
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
337
|
-
headlessUi.Text,
|
|
338
|
-
{
|
|
339
|
-
className: "text-[48px] font-bold text-white leading-[1]",
|
|
340
|
-
html: data?.title
|
|
341
|
-
}
|
|
342
|
-
),
|
|
343
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
344
|
-
headlessUi.Text,
|
|
345
|
-
{
|
|
346
|
-
className: "text-[18px] font-bold text-white leading-[1.4]",
|
|
347
|
-
html: data?.subTitle
|
|
348
|
-
}
|
|
349
|
-
)
|
|
350
|
-
]
|
|
351
|
-
}
|
|
352
|
-
)
|
|
353
|
-
]
|
|
354
|
-
}
|
|
355
|
-
);
|
|
356
|
-
};
|
|
357
|
-
Banner.displayName = "Banner";
|
|
358
|
-
var BreadCrumbs = ({
|
|
359
|
-
items,
|
|
360
|
-
className,
|
|
361
|
-
...props
|
|
362
|
-
}) => {
|
|
363
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center py-6 gap-1 text-[18px]", className), ...props, children: items?.map((item, i) => {
|
|
364
|
-
const isLast = i === items?.length - 1;
|
|
365
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
366
|
-
headlessUi.Link,
|
|
367
|
-
{
|
|
368
|
-
className: cn(
|
|
369
|
-
"flex items-center gap-1 text-[#6D6D6F] no-underline",
|
|
370
|
-
isLast && "text-[#080A0F]",
|
|
371
|
-
item?.link ? "cursor-pointer" : "cursor-default hover:text-[#080A0F]"
|
|
372
|
-
),
|
|
373
|
-
href: item?.link,
|
|
374
|
-
children: [
|
|
375
|
-
item?.label,
|
|
376
|
-
!isLast && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "/" })
|
|
377
|
-
]
|
|
378
|
-
},
|
|
379
|
-
i
|
|
380
|
-
);
|
|
381
|
-
}) });
|
|
382
|
-
};
|
|
383
|
-
BreadCrumbs.displayName = "BreadCrumbs";
|
|
384
|
-
var defaultSteps = [
|
|
385
|
-
{
|
|
386
|
-
stepNumber: 1,
|
|
387
|
-
title: 'Find a demo room you would like to visit, and click "Schedule Now"',
|
|
388
|
-
description: 'Find a demo room you would like to visit, and click "Schedule Now"',
|
|
389
|
-
mapImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
|
|
390
|
-
},
|
|
391
|
-
{
|
|
392
|
-
stepNumber: 2,
|
|
393
|
-
title: "Fill out the form and confirm your time of visit",
|
|
394
|
-
description: "Fill out the form and confirm your time of visit",
|
|
395
|
-
mapImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
|
|
396
|
-
},
|
|
397
|
-
{
|
|
398
|
-
stepNumber: 3,
|
|
399
|
-
title: "Once you arrive at the demo room, scan the QR code to check in",
|
|
400
|
-
description: "Once you arrive at the demo room, scan the QR code to check in",
|
|
401
|
-
mapImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
|
|
402
|
-
},
|
|
403
|
-
{
|
|
404
|
-
stepNumber: 4,
|
|
405
|
-
title: "Have fun!",
|
|
406
|
-
description: "Have fun!",
|
|
407
|
-
mapImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
|
|
408
|
-
}
|
|
409
|
-
];
|
|
410
|
-
var EasySteps = ({
|
|
411
|
-
title = "Schedule in 4 Easy Steps",
|
|
412
|
-
steps = defaultSteps,
|
|
413
|
-
className,
|
|
414
|
-
...props
|
|
415
|
-
}) => {
|
|
416
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), ...props, children: [
|
|
417
|
-
/* @__PURE__ */ jsxRuntime.jsx(Title, { title }),
|
|
418
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-2 gap-6", children: steps.map((step) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
419
|
-
"div",
|
|
420
|
-
{
|
|
421
|
-
className: cn(
|
|
422
|
-
"bg-white rounded-2xl overflow-hidden",
|
|
423
|
-
"border border-gray-200",
|
|
424
|
-
"hover:shadow-lg transition-shadow duration-200"
|
|
425
|
-
),
|
|
426
|
-
children: [
|
|
427
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 pb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
|
|
428
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold text-gray-900", children: [
|
|
429
|
-
"Step ",
|
|
430
|
-
step.stepNumber,
|
|
431
|
-
":"
|
|
432
|
-
] }),
|
|
433
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-900 font-medium flex-1", children: step.title })
|
|
434
|
-
] }) }),
|
|
435
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full aspect-[356/220] bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
436
|
-
"img",
|
|
437
|
-
{
|
|
438
|
-
src: step.mapImage,
|
|
439
|
-
alt: `Step ${step.stepNumber} - ${step.title}`,
|
|
440
|
-
className: "w-full h-full object-cover"
|
|
441
|
-
}
|
|
442
|
-
) })
|
|
443
|
-
]
|
|
444
|
-
},
|
|
445
|
-
step.stepNumber
|
|
446
|
-
)) })
|
|
447
|
-
] });
|
|
448
|
-
};
|
|
449
|
-
EasySteps.displayName = "EasySteps";
|
|
450
28
|
var StudioCard = ({
|
|
451
29
|
code,
|
|
452
30
|
name,
|
|
453
31
|
availableTime,
|
|
454
32
|
address,
|
|
455
|
-
city,
|
|
456
|
-
state,
|
|
457
|
-
zipCode,
|
|
458
|
-
country = "United States",
|
|
459
33
|
euifyMakeModel,
|
|
34
|
+
distance,
|
|
460
35
|
onSchedule,
|
|
36
|
+
pageData = {
|
|
37
|
+
scheduleNow: "Schedule Now",
|
|
38
|
+
available: "Available",
|
|
39
|
+
away: "away"
|
|
40
|
+
},
|
|
461
41
|
className,
|
|
42
|
+
style,
|
|
462
43
|
...props
|
|
463
44
|
}) => {
|
|
464
|
-
const
|
|
45
|
+
const [isHovered, setIsHovered] = React2__default.default.useState(false);
|
|
465
46
|
const handleScheduleClick = () => {
|
|
466
47
|
onSchedule?.(code);
|
|
467
48
|
};
|
|
49
|
+
const formatDistance = (dist) => {
|
|
50
|
+
if (dist < 1) {
|
|
51
|
+
return `${Math.round(dist * 1e3)} m`;
|
|
52
|
+
}
|
|
53
|
+
return `${dist.toFixed(1)} km`;
|
|
54
|
+
};
|
|
468
55
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
469
56
|
"div",
|
|
470
57
|
{
|
|
471
|
-
className: cn(
|
|
472
|
-
"p-6",
|
|
473
|
-
"hover:shadow-lg transition-shadow duration-200",
|
|
474
|
-
className
|
|
475
|
-
),
|
|
476
58
|
...props,
|
|
59
|
+
className: cn("p-6 cursor-pointer transition-colors duration-200", className),
|
|
60
|
+
style: {
|
|
61
|
+
backgroundColor: isHovered ? "#f3f4f6" : "transparent",
|
|
62
|
+
...style
|
|
63
|
+
},
|
|
64
|
+
onMouseEnter: (e) => {
|
|
65
|
+
setIsHovered(true);
|
|
66
|
+
props.onMouseEnter?.(e);
|
|
67
|
+
},
|
|
68
|
+
onMouseLeave: (e) => {
|
|
69
|
+
setIsHovered(false);
|
|
70
|
+
props.onMouseLeave?.(e);
|
|
71
|
+
},
|
|
477
72
|
children: [
|
|
478
|
-
/* @__PURE__ */ jsxRuntime.
|
|
73
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-4", children: [
|
|
74
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-gray-900", children: name }),
|
|
75
|
+
distance !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-[#2E8B57] bg-[#E8F5E9] px-3 py-1 rounded-full whitespace-nowrap ml-2", children: [
|
|
76
|
+
formatDistance(distance),
|
|
77
|
+
" ",
|
|
78
|
+
pageData.away
|
|
79
|
+
] })
|
|
80
|
+
] }),
|
|
479
81
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
|
|
480
82
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
481
83
|
"svg",
|
|
@@ -530,7 +132,8 @@ var StudioCard = ({
|
|
|
530
132
|
}
|
|
531
133
|
),
|
|
532
134
|
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-600", children: [
|
|
533
|
-
|
|
135
|
+
pageData.available,
|
|
136
|
+
" ",
|
|
534
137
|
availableTime
|
|
535
138
|
] }) })
|
|
536
139
|
] }),
|
|
@@ -564,7 +167,7 @@ var StudioCard = ({
|
|
|
564
167
|
]
|
|
565
168
|
}
|
|
566
169
|
),
|
|
567
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600", children:
|
|
170
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 break-words", children: address }) })
|
|
568
171
|
] }),
|
|
569
172
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-6", children: [
|
|
570
173
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -624,7 +227,7 @@ var StudioCard = ({
|
|
|
624
227
|
"hover:bg-gray-900 hover:text-white",
|
|
625
228
|
"transition-all duration-200"
|
|
626
229
|
),
|
|
627
|
-
children:
|
|
230
|
+
children: pageData.scheduleNow
|
|
628
231
|
}
|
|
629
232
|
)
|
|
630
233
|
]
|
|
@@ -650,11 +253,18 @@ var defaultLocations = [
|
|
|
650
253
|
var StudioMap = ({
|
|
651
254
|
googleMapsApiKey,
|
|
652
255
|
locations = defaultLocations,
|
|
256
|
+
hoveredLocationId,
|
|
653
257
|
defaultCenter = { lat: 39.8283, lng: -98.5795 },
|
|
654
258
|
// US center
|
|
655
259
|
defaultZoom = 4,
|
|
656
260
|
mapHeight = "600px",
|
|
657
261
|
onSchedule,
|
|
262
|
+
pageData = {
|
|
263
|
+
apiKeyRequired: "Google Maps API Key is required",
|
|
264
|
+
loadingMap: "Loading map...",
|
|
265
|
+
scheduleNow: "Schedule Now",
|
|
266
|
+
available: "Available"
|
|
267
|
+
},
|
|
658
268
|
className,
|
|
659
269
|
...props
|
|
660
270
|
}) => {
|
|
@@ -753,13 +363,13 @@ var StudioMap = ({
|
|
|
753
363
|
<svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
|
|
754
364
|
<path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"/>
|
|
755
365
|
</svg>
|
|
756
|
-
<span style="vertical-align: middle;"
|
|
366
|
+
<span style="vertical-align: middle;">${pageData.available} ${location.availableTime}</span>
|
|
757
367
|
</div>` : ""}
|
|
758
368
|
<div style="margin-bottom: 8px; color: #666;">
|
|
759
369
|
<svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
|
|
760
370
|
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
|
|
761
371
|
</svg>
|
|
762
|
-
<span style="vertical-align: middle;">${location.address}
|
|
372
|
+
<span style="vertical-align: middle;">${location.address}</span>
|
|
763
373
|
</div>
|
|
764
374
|
${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
|
|
765
375
|
<svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
|
|
@@ -783,7 +393,7 @@ var StudioMap = ({
|
|
|
783
393
|
onmouseover="this.style.background='#333'"
|
|
784
394
|
onmouseout="this.style.background='#000'"
|
|
785
395
|
>
|
|
786
|
-
|
|
396
|
+
${pageData.scheduleNow}
|
|
787
397
|
</button>
|
|
788
398
|
</div>
|
|
789
399
|
`;
|
|
@@ -798,7 +408,7 @@ var StudioMap = ({
|
|
|
798
408
|
if (btn) {
|
|
799
409
|
btn.addEventListener("click", () => {
|
|
800
410
|
if (onSchedule) {
|
|
801
|
-
onSchedule(location);
|
|
411
|
+
onSchedule(location.id);
|
|
802
412
|
}
|
|
803
413
|
});
|
|
804
414
|
}
|
|
@@ -819,6 +429,82 @@ var StudioMap = ({
|
|
|
819
429
|
googleMapRef.current.fitBounds(bounds);
|
|
820
430
|
}
|
|
821
431
|
}, [isLoaded, locations, onSchedule]);
|
|
432
|
+
React2__default.default.useEffect(() => {
|
|
433
|
+
if (!isLoaded || !googleMapRef.current || !hoveredLocationId) {
|
|
434
|
+
if (!hoveredLocationId && infoWindowRef.current) {
|
|
435
|
+
infoWindowRef.current.close();
|
|
436
|
+
}
|
|
437
|
+
return;
|
|
438
|
+
}
|
|
439
|
+
const location = locations.find((loc) => loc.id === hoveredLocationId);
|
|
440
|
+
const markerIndex = locations.findIndex(
|
|
441
|
+
(loc) => loc.id === hoveredLocationId
|
|
442
|
+
);
|
|
443
|
+
const marker = markersRef.current[markerIndex];
|
|
444
|
+
if (location && marker) {
|
|
445
|
+
const content = `
|
|
446
|
+
<div style="padding: 16px; max-width: 300px; font-family: system-ui, sans-serif;">
|
|
447
|
+
<h3 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${location.name}</h3>
|
|
448
|
+
${location.availableTime ? `<div style="margin-bottom: 8px; color: #666;">
|
|
449
|
+
<svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
|
|
450
|
+
<path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"/>
|
|
451
|
+
</svg>
|
|
452
|
+
<span style="vertical-align: middle;">${pageData.available} ${location.availableTime}</span>
|
|
453
|
+
</div>` : ""}
|
|
454
|
+
<div style="margin-bottom: 8px; color: #666;">
|
|
455
|
+
<svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
|
|
456
|
+
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
|
|
457
|
+
</svg>
|
|
458
|
+
<span style="vertical-align: middle;">${location.address}</span>
|
|
459
|
+
</div>
|
|
460
|
+
${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
|
|
461
|
+
<svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
|
|
462
|
+
<path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
|
|
463
|
+
</svg>
|
|
464
|
+
<span style="vertical-align: middle;">${location.euifyMakeModel}</span>
|
|
465
|
+
</div>` : ""}
|
|
466
|
+
<button
|
|
467
|
+
id="schedule-btn-hover-${location.id}"
|
|
468
|
+
style="
|
|
469
|
+
width: 100%;
|
|
470
|
+
padding: 10px 16px;
|
|
471
|
+
background: #000;
|
|
472
|
+
color: #fff;
|
|
473
|
+
border: none;
|
|
474
|
+
border-radius: 6px;
|
|
475
|
+
font-weight: 500;
|
|
476
|
+
cursor: pointer;
|
|
477
|
+
font-size: 14px;
|
|
478
|
+
"
|
|
479
|
+
onmouseover="this.style.background='#333'"
|
|
480
|
+
onmouseout="this.style.background='#000'"
|
|
481
|
+
>
|
|
482
|
+
${pageData.scheduleNow}
|
|
483
|
+
</button>
|
|
484
|
+
</div>
|
|
485
|
+
`;
|
|
486
|
+
if (infoWindowRef.current) {
|
|
487
|
+
infoWindowRef.current.setContent(content);
|
|
488
|
+
infoWindowRef.current.open(googleMapRef.current, marker);
|
|
489
|
+
google.maps.event.addListenerOnce(
|
|
490
|
+
infoWindowRef.current,
|
|
491
|
+
"domready",
|
|
492
|
+
() => {
|
|
493
|
+
const btn = document.getElementById(
|
|
494
|
+
`schedule-btn-hover-${location.id}`
|
|
495
|
+
);
|
|
496
|
+
if (btn) {
|
|
497
|
+
btn.addEventListener("click", () => {
|
|
498
|
+
if (onSchedule) {
|
|
499
|
+
onSchedule(location.id);
|
|
500
|
+
}
|
|
501
|
+
});
|
|
502
|
+
}
|
|
503
|
+
}
|
|
504
|
+
);
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
|
+
}, [hoveredLocationId, isLoaded, locations, onSchedule]);
|
|
822
508
|
if (!googleMapsApiKey) {
|
|
823
509
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
824
510
|
"div",
|
|
@@ -829,7 +515,7 @@ var StudioMap = ({
|
|
|
829
515
|
),
|
|
830
516
|
style: { height: mapHeight },
|
|
831
517
|
...props,
|
|
832
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children:
|
|
518
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: pageData.apiKeyRequired })
|
|
833
519
|
}
|
|
834
520
|
);
|
|
835
521
|
}
|
|
@@ -842,7 +528,7 @@ var StudioMap = ({
|
|
|
842
528
|
/* @__PURE__ */ jsxRuntime.jsx("div", { ref: mapRef, style: { height: mapHeight } }),
|
|
843
529
|
!isLoaded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
|
|
844
530
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-block animate-spin rounded-full h-8 w-8 border-4 border-gray-300 border-t-gray-900 mb-2" }),
|
|
845
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children:
|
|
531
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: pageData.loadingMap })
|
|
846
532
|
] }) })
|
|
847
533
|
]
|
|
848
534
|
}
|
|
@@ -938,27 +624,6 @@ var AntdMobileIsolated = ({
|
|
|
938
624
|
AntdMobileIsolated.displayName = "AntdMobileIsolated";
|
|
939
625
|
|
|
940
626
|
// src/components/DemoRoom/utils/addressParser.ts
|
|
941
|
-
function parseAddress(address) {
|
|
942
|
-
const parts = address.split(",").map((part) => part.trim());
|
|
943
|
-
let country = "United States";
|
|
944
|
-
let state = "";
|
|
945
|
-
let city = "";
|
|
946
|
-
if (parts.length >= 3) {
|
|
947
|
-
city = parts[1] || "";
|
|
948
|
-
state = parts[2]?.split(" ")[0] || "";
|
|
949
|
-
country = parts[3] || country;
|
|
950
|
-
} else if (parts.length === 2) {
|
|
951
|
-
city = parts[0] || "";
|
|
952
|
-
state = parts[1]?.split(" ")[0] || "";
|
|
953
|
-
} else if (parts.length === 1) {
|
|
954
|
-
city = parts[0] || "";
|
|
955
|
-
}
|
|
956
|
-
return {
|
|
957
|
-
country: country.trim(),
|
|
958
|
-
state: state.trim(),
|
|
959
|
-
city: city.trim()
|
|
960
|
-
};
|
|
961
|
-
}
|
|
962
627
|
function groupByAlphabet(items) {
|
|
963
628
|
const groups = /* @__PURE__ */ new Map();
|
|
964
629
|
items.forEach((item) => {
|
|
@@ -985,7 +650,15 @@ var LocationFilter = ({
|
|
|
985
650
|
locations,
|
|
986
651
|
onSelect,
|
|
987
652
|
visible = false,
|
|
988
|
-
onClose
|
|
653
|
+
onClose,
|
|
654
|
+
pageData = {
|
|
655
|
+
allLocations: "All Locations",
|
|
656
|
+
clear: "Clear",
|
|
657
|
+
country: "Country",
|
|
658
|
+
state: "State",
|
|
659
|
+
city: "City",
|
|
660
|
+
noStudiosFound: "No studios found in this location"
|
|
661
|
+
}
|
|
989
662
|
}) => {
|
|
990
663
|
const [currentLevel, setCurrentLevel] = React2.useState("country");
|
|
991
664
|
const [selectedCountry, setSelectedCountry] = React2.useState();
|
|
@@ -996,7 +669,7 @@ var LocationFilter = ({
|
|
|
996
669
|
const states = /* @__PURE__ */ new Map();
|
|
997
670
|
const cities = /* @__PURE__ */ new Map();
|
|
998
671
|
locations.forEach((location) => {
|
|
999
|
-
const { country, state, city } =
|
|
672
|
+
const { country, state, city } = location;
|
|
1000
673
|
if (country) {
|
|
1001
674
|
const existing = countries.get(country);
|
|
1002
675
|
countries.set(country, {
|
|
@@ -1039,9 +712,7 @@ var LocationFilter = ({
|
|
|
1039
712
|
items = locationData.countries;
|
|
1040
713
|
break;
|
|
1041
714
|
case "state":
|
|
1042
|
-
items = selectedCountry ? locationData.states.filter(
|
|
1043
|
-
(s) => s.parentCode === selectedCountry
|
|
1044
|
-
) : [];
|
|
715
|
+
items = selectedCountry ? locationData.states.filter((s) => s.parentCode === selectedCountry) : [];
|
|
1045
716
|
break;
|
|
1046
717
|
case "city":
|
|
1047
718
|
items = selectedState ? locationData.cities.filter((c) => c.parentCode === selectedState) : [];
|
|
@@ -1058,6 +729,7 @@ var LocationFilter = ({
|
|
|
1058
729
|
() => groupByAlphabet(filteredItems),
|
|
1059
730
|
[filteredItems]
|
|
1060
731
|
);
|
|
732
|
+
const showIndexBar = filteredItems.length >= 10;
|
|
1061
733
|
const handleItemClick = (item) => {
|
|
1062
734
|
if (currentLevel === "country") {
|
|
1063
735
|
setSelectedCountry(item.code);
|
|
@@ -1101,42 +773,30 @@ var LocationFilter = ({
|
|
|
1101
773
|
style: { background: "#F8F8F8" },
|
|
1102
774
|
className: "rounded-[12px] rounded-b-none h-[72px] font-bold text-[14px] flex flex-col",
|
|
1103
775
|
children: [
|
|
1104
|
-
/* @__PURE__ */ jsxRuntime.
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1129
|
-
"path",
|
|
1130
|
-
{
|
|
1131
|
-
d: "M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z",
|
|
1132
|
-
fill: "#1D1D1F"
|
|
1133
|
-
}
|
|
1134
|
-
)
|
|
1135
|
-
}
|
|
1136
|
-
)
|
|
1137
|
-
}
|
|
1138
|
-
)
|
|
1139
|
-
] }),
|
|
776
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end px-[20px] pt-[12px] pb-[8px]", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
777
|
+
"button",
|
|
778
|
+
{
|
|
779
|
+
onClick: onClose,
|
|
780
|
+
className: "ml-[12px] w-[24px] h-[24px] flex items-center justify-end",
|
|
781
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
782
|
+
"svg",
|
|
783
|
+
{
|
|
784
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
785
|
+
width: "24",
|
|
786
|
+
height: "24",
|
|
787
|
+
viewBox: "0 0 24 24",
|
|
788
|
+
fill: "none",
|
|
789
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
790
|
+
"path",
|
|
791
|
+
{
|
|
792
|
+
d: "M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z",
|
|
793
|
+
fill: "#1D1D1F"
|
|
794
|
+
}
|
|
795
|
+
)
|
|
796
|
+
}
|
|
797
|
+
)
|
|
798
|
+
}
|
|
799
|
+
) }),
|
|
1140
800
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center px-[20px] gap-[16px] pb-[8px]", children: [
|
|
1141
801
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1142
802
|
"button",
|
|
@@ -1146,7 +806,7 @@ var LocationFilter = ({
|
|
|
1146
806
|
"pb-[4px] transition-colors",
|
|
1147
807
|
currentLevel === "country" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]"
|
|
1148
808
|
),
|
|
1149
|
-
children:
|
|
809
|
+
children: pageData.country
|
|
1150
810
|
}
|
|
1151
811
|
),
|
|
1152
812
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1159,7 +819,7 @@ var LocationFilter = ({
|
|
|
1159
819
|
currentLevel === "state" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
|
|
1160
820
|
!selectedCountry && "opacity-50 cursor-not-allowed"
|
|
1161
821
|
),
|
|
1162
|
-
children:
|
|
822
|
+
children: pageData.state
|
|
1163
823
|
}
|
|
1164
824
|
),
|
|
1165
825
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1172,55 +832,69 @@ var LocationFilter = ({
|
|
|
1172
832
|
currentLevel === "city" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
|
|
1173
833
|
!selectedState && "opacity-50 cursor-not-allowed"
|
|
1174
834
|
),
|
|
1175
|
-
children:
|
|
835
|
+
children: pageData.city
|
|
1176
836
|
}
|
|
1177
837
|
)
|
|
1178
838
|
] })
|
|
1179
839
|
]
|
|
1180
840
|
}
|
|
1181
841
|
),
|
|
1182
|
-
/* @__PURE__ */ jsxRuntime.jsx(AntdMobileIsolated, { style: { height: "calc(100% - 72px)" }, children: /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default, { style: { height: "100%" }, children: groupedItems.map((group) => {
|
|
842
|
+
/* @__PURE__ */ jsxRuntime.jsx(AntdMobileIsolated, { style: { height: "calc(100% - 72px)" }, children: showIndexBar ? /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default, { style: { height: "100%" }, children: groupedItems.map((group) => {
|
|
1183
843
|
const { title, items } = group;
|
|
1184
844
|
return /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default.Panel, { index: title, title, children: /* @__PURE__ */ jsxRuntime.jsx(List__default.default, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1185
845
|
List__default.default.Item,
|
|
1186
846
|
{
|
|
1187
|
-
clickable: true,
|
|
1188
847
|
onClick: () => handleItemClick(item),
|
|
1189
|
-
|
|
1190
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[#767880] text-[14px]", children: item.count }),
|
|
1191
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1192
|
-
"svg",
|
|
1193
|
-
{
|
|
1194
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1195
|
-
width: "16",
|
|
1196
|
-
height: "16",
|
|
1197
|
-
viewBox: "0 0 16 16",
|
|
1198
|
-
fill: "none",
|
|
1199
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1200
|
-
"path",
|
|
1201
|
-
{
|
|
1202
|
-
d: "M6.4 12L5.6 11.2L9.06667 7.73333L5.6 4.26667L6.4 3.46667L10.6667 7.73333L6.4 12Z",
|
|
1203
|
-
fill: "#767880"
|
|
1204
|
-
}
|
|
1205
|
-
)
|
|
1206
|
-
}
|
|
1207
|
-
)
|
|
1208
|
-
] }),
|
|
848
|
+
style: { cursor: "pointer" },
|
|
1209
849
|
children: item.name
|
|
1210
850
|
},
|
|
1211
851
|
item.code
|
|
1212
852
|
)) }) }, title);
|
|
1213
|
-
}) }) })
|
|
853
|
+
}) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(List__default.default, { children: filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
854
|
+
List__default.default.Item,
|
|
855
|
+
{
|
|
856
|
+
onClick: () => handleItemClick(item),
|
|
857
|
+
style: { cursor: "pointer" },
|
|
858
|
+
children: item.name
|
|
859
|
+
},
|
|
860
|
+
item.code
|
|
861
|
+
)) }) }) })
|
|
1214
862
|
]
|
|
1215
863
|
}
|
|
1216
864
|
);
|
|
1217
865
|
};
|
|
1218
866
|
LocationFilter.displayName = "LocationFilter";
|
|
867
|
+
var defaultPageData = {
|
|
868
|
+
title: "Find a Studio Near You",
|
|
869
|
+
loadingText: "Loading demo rooms...",
|
|
870
|
+
errorTitle: "Failed to load demo rooms",
|
|
871
|
+
locationFilter: {
|
|
872
|
+
allLocations: "All Locations",
|
|
873
|
+
clear: "Clear",
|
|
874
|
+
country: "Country",
|
|
875
|
+
state: "State",
|
|
876
|
+
city: "City",
|
|
877
|
+
noStudiosFound: "No studios found in this location"
|
|
878
|
+
},
|
|
879
|
+
studioCard: {
|
|
880
|
+
scheduleNow: "Schedule Now",
|
|
881
|
+
available: "Available",
|
|
882
|
+
away: "away"
|
|
883
|
+
},
|
|
884
|
+
map: {
|
|
885
|
+
apiKeyRequired: "Google Maps API Key is required",
|
|
886
|
+
loadingMap: "Loading map...",
|
|
887
|
+
scheduleNow: "Schedule Now",
|
|
888
|
+
available: "Available"
|
|
889
|
+
},
|
|
890
|
+
defaultCountry: "United States",
|
|
891
|
+
noAvailableTime: "No available time"
|
|
892
|
+
};
|
|
1219
893
|
var defaultStudioLocations = [
|
|
1220
894
|
{
|
|
1221
895
|
id: "1",
|
|
1222
896
|
name: "Design District Demo Room",
|
|
1223
|
-
address: "111 8th St",
|
|
897
|
+
address: "111 8th St, San Francisco, CA, United States",
|
|
1224
898
|
city: "San Francisco",
|
|
1225
899
|
state: "CA",
|
|
1226
900
|
zipCode: "94108",
|
|
@@ -1233,7 +907,7 @@ var defaultStudioLocations = [
|
|
|
1233
907
|
{
|
|
1234
908
|
id: "2",
|
|
1235
909
|
name: "Brooklyn Creative Studio",
|
|
1236
|
-
address: "456 Broadway",
|
|
910
|
+
address: "456 Broadway, Brooklyn, NY, United States",
|
|
1237
911
|
city: "Brooklyn",
|
|
1238
912
|
state: "NY",
|
|
1239
913
|
zipCode: "11211",
|
|
@@ -1246,7 +920,7 @@ var defaultStudioLocations = [
|
|
|
1246
920
|
{
|
|
1247
921
|
id: "3",
|
|
1248
922
|
name: "Austin Innovation Hub",
|
|
1249
|
-
address: "789 Tech Blvd",
|
|
923
|
+
address: "789 Tech Blvd, Austin, TX, United States",
|
|
1250
924
|
city: "Austin",
|
|
1251
925
|
state: "TX",
|
|
1252
926
|
zipCode: "78701",
|
|
@@ -1259,7 +933,7 @@ var defaultStudioLocations = [
|
|
|
1259
933
|
{
|
|
1260
934
|
id: "4",
|
|
1261
935
|
name: "Seattle Maker Space",
|
|
1262
|
-
address: "321 Pine St",
|
|
936
|
+
address: "321 Pine St, Seattle, WA, United States",
|
|
1263
937
|
city: "Seattle",
|
|
1264
938
|
state: "WA",
|
|
1265
939
|
zipCode: "98101",
|
|
@@ -1272,7 +946,7 @@ var defaultStudioLocations = [
|
|
|
1272
946
|
{
|
|
1273
947
|
id: "5",
|
|
1274
948
|
name: "Chicago Design Center",
|
|
1275
|
-
address: "654 Michigan Ave",
|
|
949
|
+
address: "654 Michigan Ave, Chicago, IL, United States",
|
|
1276
950
|
city: "Chicago",
|
|
1277
951
|
state: "IL",
|
|
1278
952
|
zipCode: "60611",
|
|
@@ -1285,7 +959,7 @@ var defaultStudioLocations = [
|
|
|
1285
959
|
{
|
|
1286
960
|
id: "6",
|
|
1287
961
|
name: "Miami Beach Studio",
|
|
1288
|
-
address: "987 Ocean Drive",
|
|
962
|
+
address: "987 Ocean Drive, Miami Beach, FL, United States",
|
|
1289
963
|
city: "Miami Beach",
|
|
1290
964
|
state: "FL",
|
|
1291
965
|
zipCode: "33139",
|
|
@@ -1298,7 +972,7 @@ var defaultStudioLocations = [
|
|
|
1298
972
|
{
|
|
1299
973
|
id: "7",
|
|
1300
974
|
name: "Denver Mountain Studio",
|
|
1301
|
-
address: "147 16th St",
|
|
975
|
+
address: "147 16th St, Denver, CO, United States",
|
|
1302
976
|
city: "Denver",
|
|
1303
977
|
state: "CO",
|
|
1304
978
|
zipCode: "80202",
|
|
@@ -1311,7 +985,7 @@ var defaultStudioLocations = [
|
|
|
1311
985
|
{
|
|
1312
986
|
id: "8",
|
|
1313
987
|
name: "Los Angeles Creative Lab",
|
|
1314
|
-
address: "258 Main St",
|
|
988
|
+
address: "258 Main St, Los Angeles, CA, United States",
|
|
1315
989
|
city: "Los Angeles",
|
|
1316
990
|
state: "CA",
|
|
1317
991
|
zipCode: "90012",
|
|
@@ -1329,10 +1003,25 @@ var RoomsList = ({
|
|
|
1329
1003
|
teamCode,
|
|
1330
1004
|
brandWebsite,
|
|
1331
1005
|
onSchedule,
|
|
1006
|
+
pageData,
|
|
1332
1007
|
...props
|
|
1333
1008
|
}) => {
|
|
1009
|
+
const mergedPageData = React2.useMemo(
|
|
1010
|
+
() => ({
|
|
1011
|
+
...defaultPageData,
|
|
1012
|
+
...pageData,
|
|
1013
|
+
locationFilter: {
|
|
1014
|
+
...defaultPageData.locationFilter,
|
|
1015
|
+
...pageData?.locationFilter
|
|
1016
|
+
},
|
|
1017
|
+
studioCard: { ...defaultPageData.studioCard, ...pageData?.studioCard },
|
|
1018
|
+
map: { ...defaultPageData.map, ...pageData?.map }
|
|
1019
|
+
}),
|
|
1020
|
+
[pageData]
|
|
1021
|
+
);
|
|
1334
1022
|
const [showLocationFilter, setShowLocationFilter] = React2.useState(false);
|
|
1335
1023
|
const [selectedLocation, setSelectedLocation] = React2.useState();
|
|
1024
|
+
const [hoveredRoomId, setHoveredRoomId] = React2.useState(null);
|
|
1336
1025
|
const {
|
|
1337
1026
|
data: demoRooms,
|
|
1338
1027
|
loading,
|
|
@@ -1345,37 +1034,25 @@ var RoomsList = ({
|
|
|
1345
1034
|
const studioLocations = React2.useMemo(() => {
|
|
1346
1035
|
if (!demoRooms) return defaultStudioLocations;
|
|
1347
1036
|
return demoRooms.map((room) => {
|
|
1348
|
-
const
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
},
|
|
1357
|
-
{
|
|
1358
|
-
id: 131,
|
|
1359
|
-
start_time: "2026-01-13T14:00:00-05:00",
|
|
1360
|
-
end_time: "2026-01-13T15:00:00-05:00",
|
|
1361
|
-
capacity: 5,
|
|
1362
|
-
booked_count: 5,
|
|
1363
|
-
status: "full"
|
|
1364
|
-
}
|
|
1365
|
-
];
|
|
1366
|
-
const nextAvailableTimeslot = (room.timeslots?.length ? room.timeslots : timeslots)?.find((slot) => slot.status === "available");
|
|
1367
|
-
const { country, state, city } = parseAddress(room.address);
|
|
1037
|
+
const nextAvailableTimeslot = room?.timeslots?.find(
|
|
1038
|
+
(slot) => slot.status === "available"
|
|
1039
|
+
);
|
|
1040
|
+
const country = room.location?.country || mergedPageData.defaultCountry;
|
|
1041
|
+
const state = room.location?.state || "";
|
|
1042
|
+
const city = room.location?.city || "";
|
|
1043
|
+
const addressParts = [room.address, city, state, country].filter(Boolean);
|
|
1044
|
+
const fullAddress = addressParts.join(", ");
|
|
1368
1045
|
return {
|
|
1369
1046
|
id: room.code,
|
|
1370
1047
|
name: room.name,
|
|
1371
|
-
address:
|
|
1048
|
+
address: fullAddress,
|
|
1372
1049
|
city,
|
|
1373
1050
|
state,
|
|
1374
1051
|
zipCode: "",
|
|
1375
1052
|
country,
|
|
1376
1053
|
lat: Number(room.latitude) || 34.0522,
|
|
1377
1054
|
lng: Number(room.longitude) || -118.2437,
|
|
1378
|
-
availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` :
|
|
1055
|
+
availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : mergedPageData.noAvailableTime,
|
|
1379
1056
|
euifyMakeModel: room?.description
|
|
1380
1057
|
};
|
|
1381
1058
|
});
|
|
@@ -1383,25 +1060,24 @@ var RoomsList = ({
|
|
|
1383
1060
|
const filteredStudioLocations = React2.useMemo(() => {
|
|
1384
1061
|
if (!selectedLocation) return studioLocations;
|
|
1385
1062
|
return studioLocations.filter((location) => {
|
|
1386
|
-
const { country, state, city } = parseAddress(location.address);
|
|
1387
1063
|
if (selectedLocation.city) {
|
|
1388
|
-
return country === selectedLocation.country && state === selectedLocation.state && city === selectedLocation.city;
|
|
1064
|
+
return location.country === selectedLocation.country && location.state === selectedLocation.state && location.city === selectedLocation.city;
|
|
1389
1065
|
}
|
|
1390
1066
|
if (selectedLocation.state) {
|
|
1391
|
-
return country === selectedLocation.country && state === selectedLocation.state;
|
|
1067
|
+
return location.country === selectedLocation.country && location.state === selectedLocation.state;
|
|
1392
1068
|
}
|
|
1393
1069
|
if (selectedLocation.country) {
|
|
1394
|
-
return country === selectedLocation.country;
|
|
1070
|
+
return location.country === selectedLocation.country;
|
|
1395
1071
|
}
|
|
1396
1072
|
return true;
|
|
1397
1073
|
});
|
|
1398
1074
|
}, [studioLocations, selectedLocation]);
|
|
1399
1075
|
const getSelectedLocationName = () => {
|
|
1400
|
-
if (!selectedLocation) return
|
|
1076
|
+
if (!selectedLocation) return mergedPageData.locationFilter.allLocations;
|
|
1401
1077
|
if (selectedLocation.city) return selectedLocation.city;
|
|
1402
1078
|
if (selectedLocation.state) return selectedLocation.state;
|
|
1403
1079
|
if (selectedLocation.country) return selectedLocation.country;
|
|
1404
|
-
return
|
|
1080
|
+
return mergedPageData.locationFilter.allLocations;
|
|
1405
1081
|
};
|
|
1406
1082
|
const handleLocationSelect = (selection) => {
|
|
1407
1083
|
setSelectedLocation(selection);
|
|
@@ -1412,20 +1088,20 @@ var RoomsList = ({
|
|
|
1412
1088
|
};
|
|
1413
1089
|
console.log(filteredStudioLocations);
|
|
1414
1090
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, ...props, children: [
|
|
1415
|
-
/* @__PURE__ */ jsxRuntime.jsx(Title, { title:
|
|
1416
|
-
loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium", children:
|
|
1417
|
-
error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center
|
|
1418
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium", children:
|
|
1091
|
+
/* @__PURE__ */ jsxRuntime.jsx(Title, { title: mergedPageData.title }),
|
|
1092
|
+
loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium", children: mergedPageData.loadingText }) }) }),
|
|
1093
|
+
error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", style: { color: "#FF4D4D" }, children: [
|
|
1094
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium", children: mergedPageData.errorTitle }),
|
|
1419
1095
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm mt-2", children: error.message })
|
|
1420
1096
|
] }) }),
|
|
1421
|
-
!loading && !error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[794px]
|
|
1097
|
+
!loading && !error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[794px] gap-4", children: [
|
|
1422
1098
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1423
1099
|
"div",
|
|
1424
1100
|
{
|
|
1425
|
-
className: "flex-none relative w-[420px]",
|
|
1101
|
+
className: "flex-none relative w-[420px] l:!w-full",
|
|
1426
1102
|
style: { height: "794px" },
|
|
1427
1103
|
children: [
|
|
1428
|
-
/* @__PURE__ */ jsxRuntime.
|
|
1104
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-[12px] mb-4 bg-white border border-[#E4E5E6] px-[20px] py-[16px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[40px] font-bold text-[16px] gap-10 flex items-center", children: [
|
|
1429
1105
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1430
1106
|
"button",
|
|
1431
1107
|
{
|
|
@@ -1458,7 +1134,7 @@ var RoomsList = ({
|
|
|
1458
1134
|
{
|
|
1459
1135
|
onClick: handleClearFilter,
|
|
1460
1136
|
className: "ml-auto text-[14px] text-[#2E8B57] hover:underline",
|
|
1461
|
-
children:
|
|
1137
|
+
children: mergedPageData.locationFilter.clear
|
|
1462
1138
|
}
|
|
1463
1139
|
),
|
|
1464
1140
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex text-[#767880] cursor-not-allowed", children: [
|
|
@@ -1481,13 +1157,13 @@ var RoomsList = ({
|
|
|
1481
1157
|
}
|
|
1482
1158
|
)
|
|
1483
1159
|
] })
|
|
1484
|
-
] }),
|
|
1160
|
+
] }) }),
|
|
1485
1161
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1486
1162
|
"div",
|
|
1487
1163
|
{
|
|
1488
1164
|
style: { maxHeight: "706px", overflow: "auto" },
|
|
1489
1165
|
className: "rounded-[12px] bg-white border border-[#E4E5E6]",
|
|
1490
|
-
children: filteredStudioLocations.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[200px] text-[#767880]", children:
|
|
1166
|
+
children: filteredStudioLocations.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[200px] text-[#767880]", children: mergedPageData.locationFilter.noStudiosFound }) : filteredStudioLocations.map((item) => {
|
|
1491
1167
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1492
1168
|
StudioCard,
|
|
1493
1169
|
{
|
|
@@ -1499,7 +1175,10 @@ var RoomsList = ({
|
|
|
1499
1175
|
state: item?.state,
|
|
1500
1176
|
zipCode: item?.zipCode,
|
|
1501
1177
|
euifyMakeModel: item?.euifyMakeModel || "",
|
|
1502
|
-
onSchedule
|
|
1178
|
+
onSchedule,
|
|
1179
|
+
onMouseEnter: () => setHoveredRoomId(item.id),
|
|
1180
|
+
onMouseLeave: () => setHoveredRoomId(null),
|
|
1181
|
+
pageData: mergedPageData.studioCard
|
|
1503
1182
|
},
|
|
1504
1183
|
item.id
|
|
1505
1184
|
);
|
|
@@ -1510,26 +1189,29 @@ var RoomsList = ({
|
|
|
1510
1189
|
LocationFilter,
|
|
1511
1190
|
{
|
|
1512
1191
|
locations: studioLocations.map((loc) => ({
|
|
1513
|
-
|
|
1514
|
-
|
|
1192
|
+
id: loc.id,
|
|
1193
|
+
country: loc.country,
|
|
1194
|
+
state: loc.state,
|
|
1195
|
+
city: loc.city
|
|
1515
1196
|
})),
|
|
1516
1197
|
visible: showLocationFilter,
|
|
1517
1198
|
onSelect: handleLocationSelect,
|
|
1518
|
-
onClose: () => setShowLocationFilter(false)
|
|
1199
|
+
onClose: () => setShowLocationFilter(false),
|
|
1200
|
+
pageData: mergedPageData.locationFilter
|
|
1519
1201
|
}
|
|
1520
1202
|
)
|
|
1521
1203
|
]
|
|
1522
1204
|
}
|
|
1523
1205
|
),
|
|
1524
|
-
googleMapsApiKey && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1"), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1206
|
+
googleMapsApiKey && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 l:!hidden"), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1525
1207
|
StudioMap,
|
|
1526
1208
|
{
|
|
1527
1209
|
googleMapsApiKey,
|
|
1528
1210
|
locations: filteredStudioLocations,
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1211
|
+
hoveredLocationId: hoveredRoomId,
|
|
1212
|
+
onSchedule,
|
|
1213
|
+
mapHeight: "794px",
|
|
1214
|
+
pageData: mergedPageData.map
|
|
1533
1215
|
}
|
|
1534
1216
|
) })
|
|
1535
1217
|
] })
|
|
@@ -1705,49 +1387,236 @@ function createDemoRoomApi(config) {
|
|
|
1705
1387
|
}
|
|
1706
1388
|
var DemoRoom = ({
|
|
1707
1389
|
className,
|
|
1708
|
-
layoutClassName
|
|
1390
|
+
layoutClassName,
|
|
1709
1391
|
googleMapsApiKey,
|
|
1710
1392
|
apiConfig,
|
|
1711
1393
|
teamCode,
|
|
1712
1394
|
brandWebsite,
|
|
1713
1395
|
onSchedule,
|
|
1396
|
+
pageData,
|
|
1714
1397
|
...props
|
|
1715
1398
|
}) => {
|
|
1716
1399
|
const apiClient = React2.useMemo(
|
|
1717
1400
|
() => createDemoRoomApi(apiConfig),
|
|
1718
1401
|
[apiConfig]
|
|
1719
1402
|
);
|
|
1720
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1403
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1404
|
+
RoomsList,
|
|
1405
|
+
{
|
|
1406
|
+
className: layoutClassName,
|
|
1407
|
+
googleMapsApiKey,
|
|
1408
|
+
apiClient,
|
|
1409
|
+
teamCode,
|
|
1410
|
+
brandWebsite,
|
|
1411
|
+
onSchedule,
|
|
1412
|
+
pageData
|
|
1413
|
+
}
|
|
1414
|
+
) });
|
|
1415
|
+
};
|
|
1416
|
+
DemoRoom.displayName = "DemoRoom";
|
|
1417
|
+
var EventCard = ({
|
|
1418
|
+
title,
|
|
1419
|
+
description,
|
|
1420
|
+
backgroundImage,
|
|
1421
|
+
aspectRatio,
|
|
1422
|
+
variant = "medium",
|
|
1423
|
+
buttons = [],
|
|
1424
|
+
subtitle,
|
|
1425
|
+
className,
|
|
1426
|
+
...props
|
|
1427
|
+
}) => {
|
|
1428
|
+
const isLarge = variant === "large";
|
|
1429
|
+
const isMedium = variant === "medium";
|
|
1430
|
+
const isProduct = variant === "product";
|
|
1431
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1432
|
+
"div",
|
|
1433
|
+
{
|
|
1434
|
+
className: cn("rounded-3xl overflow-hidden relative", className),
|
|
1435
|
+
style: {
|
|
1436
|
+
backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
|
|
1437
|
+
backgroundSize: "cover",
|
|
1438
|
+
backgroundPosition: "center",
|
|
1439
|
+
aspectRatio
|
|
1440
|
+
},
|
|
1441
|
+
...props,
|
|
1442
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1443
|
+
"div",
|
|
1444
|
+
{
|
|
1445
|
+
className: cn(
|
|
1446
|
+
"relative h-full flex flex-col",
|
|
1447
|
+
isLarge && "justify-center pl-8",
|
|
1448
|
+
!isLarge && "justify-end pl-8 pb-8"
|
|
1449
|
+
),
|
|
1450
|
+
children: [
|
|
1451
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
1452
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1453
|
+
"h3",
|
|
1454
|
+
{
|
|
1455
|
+
className: cn(
|
|
1456
|
+
"font-semibold mb-3",
|
|
1457
|
+
isLarge && "text-3xl text-gray-900",
|
|
1458
|
+
isMedium && "text-2xl text-white",
|
|
1459
|
+
isProduct && "text-2xl text-gray-900"
|
|
1460
|
+
),
|
|
1461
|
+
children: title
|
|
1462
|
+
}
|
|
1463
|
+
),
|
|
1464
|
+
subtitle && isProduct && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 mb-4", children: subtitle }),
|
|
1465
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1466
|
+
"p",
|
|
1467
|
+
{
|
|
1468
|
+
className: cn(
|
|
1469
|
+
"text-sm leading-relaxed",
|
|
1470
|
+
isMedium && "text-white/90",
|
|
1471
|
+
(isLarge || isProduct) && "text-gray-600"
|
|
1472
|
+
),
|
|
1473
|
+
children: description
|
|
1474
|
+
}
|
|
1475
|
+
)
|
|
1476
|
+
] }),
|
|
1477
|
+
buttons.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 mt-6", children: buttons.map((button, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1478
|
+
"button",
|
|
1479
|
+
{
|
|
1480
|
+
onClick: button.onClick,
|
|
1481
|
+
className: cn(
|
|
1482
|
+
"px-6 py-3 rounded-full font-medium text-sm transition-all duration-200",
|
|
1483
|
+
button.variant === "primary" && "bg-gray-900 text-white hover:bg-gray-800",
|
|
1484
|
+
button.variant === "secondary" && "bg-white text-gray-900 border border-gray-300 hover:bg-gray-50"
|
|
1485
|
+
),
|
|
1486
|
+
children: button.label
|
|
1487
|
+
},
|
|
1488
|
+
index
|
|
1489
|
+
)) })
|
|
1490
|
+
]
|
|
1491
|
+
}
|
|
1492
|
+
)
|
|
1493
|
+
}
|
|
1494
|
+
);
|
|
1495
|
+
};
|
|
1496
|
+
EventCard.displayName = "EventCard";
|
|
1497
|
+
var defaultEvents = [
|
|
1498
|
+
{
|
|
1499
|
+
variant: "large",
|
|
1500
|
+
title: "IFA 2025 Event Name Event Name",
|
|
1501
|
+
description: "Corem ipsum dolor sit amet, consectetur adipiscing elit.",
|
|
1502
|
+
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
1503
|
+
buttons: [
|
|
1504
|
+
{
|
|
1505
|
+
label: "Schedule Now",
|
|
1506
|
+
variant: "primary"
|
|
1507
|
+
}
|
|
1508
|
+
],
|
|
1509
|
+
aspectRatio: "1664 / 640"
|
|
1510
|
+
},
|
|
1511
|
+
{
|
|
1512
|
+
variant: "medium",
|
|
1513
|
+
title: "Local Event Name Local Event Name Local Event Name",
|
|
1514
|
+
description: "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
|
|
1515
|
+
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
1516
|
+
buttons: [
|
|
1517
|
+
{
|
|
1518
|
+
label: "Schedule Now",
|
|
1519
|
+
variant: "primary"
|
|
1520
|
+
}
|
|
1521
|
+
],
|
|
1522
|
+
aspectRatio: "824 / 640"
|
|
1523
|
+
},
|
|
1524
|
+
{
|
|
1525
|
+
variant: "product",
|
|
1526
|
+
title: "Anker Prime",
|
|
1527
|
+
subtitle: "Anker Prime 240W GaN Desktop Charger (4 Ports) Feb. 5th - 16th",
|
|
1528
|
+
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
1529
|
+
buttons: [
|
|
1530
|
+
{
|
|
1531
|
+
label: "Learn More",
|
|
1532
|
+
variant: "secondary"
|
|
1533
|
+
},
|
|
1534
|
+
{
|
|
1535
|
+
label: "Shop Now",
|
|
1536
|
+
variant: "primary"
|
|
1537
|
+
}
|
|
1538
|
+
],
|
|
1539
|
+
aspectRatio: "824 / 640"
|
|
1540
|
+
},
|
|
1541
|
+
{
|
|
1542
|
+
variant: "medium",
|
|
1543
|
+
title: "Local Event Name Local Event Name Local Event Name",
|
|
1544
|
+
description: "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
|
|
1545
|
+
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
1546
|
+
buttons: [
|
|
1547
|
+
{
|
|
1548
|
+
label: "Schedule Now",
|
|
1549
|
+
variant: "primary"
|
|
1550
|
+
}
|
|
1551
|
+
],
|
|
1552
|
+
aspectRatio: "824 / 640"
|
|
1553
|
+
},
|
|
1554
|
+
{
|
|
1555
|
+
variant: "product",
|
|
1556
|
+
title: "Anker Prime",
|
|
1557
|
+
subtitle: "Anker Prime 240W GaN Desktop Charger (4 Ports) Feb. 5th - 16th",
|
|
1558
|
+
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
1559
|
+
buttons: [
|
|
1560
|
+
{
|
|
1561
|
+
label: "Learn More",
|
|
1562
|
+
variant: "secondary"
|
|
1563
|
+
},
|
|
1724
1564
|
{
|
|
1725
|
-
|
|
1726
|
-
|
|
1565
|
+
label: "Shop Now",
|
|
1566
|
+
variant: "primary"
|
|
1727
1567
|
}
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1568
|
+
],
|
|
1569
|
+
aspectRatio: "824 / 640"
|
|
1570
|
+
}
|
|
1571
|
+
];
|
|
1572
|
+
var UpcomingEvents = ({
|
|
1573
|
+
title = "Upcoming Events",
|
|
1574
|
+
events = defaultEvents,
|
|
1575
|
+
showViewMore = true,
|
|
1576
|
+
onViewMore,
|
|
1577
|
+
className,
|
|
1578
|
+
...props
|
|
1579
|
+
}) => {
|
|
1580
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), ...props, children: [
|
|
1581
|
+
/* @__PURE__ */ jsxRuntime.jsx(Title, { title }),
|
|
1582
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-6 mb-[64px]", children: events.map((event, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(index === 0 ? "col-span-2" : ""), children: /* @__PURE__ */ jsxRuntime.jsx(EventCard, { ...event }) }, index)) }),
|
|
1583
|
+
showViewMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1584
|
+
"button",
|
|
1733
1585
|
{
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
|
|
1586
|
+
onClick: onViewMore,
|
|
1587
|
+
className: "inline-flex items-center gap-2 text-gray-700 hover:text-gray-900 transition-colors duration-200",
|
|
1588
|
+
children: [
|
|
1589
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-bold", children: "View More" }),
|
|
1590
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1591
|
+
"svg",
|
|
1592
|
+
{
|
|
1593
|
+
width: "16",
|
|
1594
|
+
height: "16",
|
|
1595
|
+
viewBox: "0 0 16 16",
|
|
1596
|
+
fill: "none",
|
|
1597
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1598
|
+
className: "transition-transform duration-200 group-hover:translate-y-0.5",
|
|
1599
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1600
|
+
"path",
|
|
1601
|
+
{
|
|
1602
|
+
d: "M8 3L8 13M8 13L12 9M8 13L4 9",
|
|
1603
|
+
stroke: "currentColor",
|
|
1604
|
+
strokeWidth: "2",
|
|
1605
|
+
strokeLinecap: "round",
|
|
1606
|
+
strokeLinejoin: "round"
|
|
1607
|
+
}
|
|
1608
|
+
)
|
|
1609
|
+
}
|
|
1610
|
+
)
|
|
1611
|
+
]
|
|
1740
1612
|
}
|
|
1741
|
-
)
|
|
1742
|
-
/* @__PURE__ */ jsxRuntime.jsx(EasySteps, { className: layoutClassName })
|
|
1613
|
+
) })
|
|
1743
1614
|
] });
|
|
1744
1615
|
};
|
|
1745
|
-
|
|
1616
|
+
UpcomingEvents.displayName = "UpcomingEvents";
|
|
1746
1617
|
|
|
1747
1618
|
exports.DemoRoom = DemoRoom;
|
|
1748
|
-
exports.EasySteps = EasySteps;
|
|
1749
1619
|
exports.EventCard = EventCard;
|
|
1750
|
-
exports.HelpNav = HelpNav;
|
|
1751
1620
|
exports.StudioCard = StudioCard;
|
|
1752
1621
|
exports.StudioMap = StudioMap;
|
|
1753
1622
|
exports.UpcomingEvents = UpcomingEvents;
|