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