@blocklet/pages-kit-inner-components 0.4.115 → 0.4.117

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.
@@ -1,2136 +0,0 @@
1
- import { jsx as o, jsxs as w, Fragment as J } from "react/jsx-runtime";
2
- import "@mui/icons-material";
3
- import { Box as g, Tooltip as Ft, styled as bt, Stack as yt, Typography as P, Container as Vt, useTheme as Ut, createTheme as Ht, ThemeProvider as Dt, Card as Mt, CircularProgress as Yt, Grid as lt, CardMedia as Jt, CardContent as Gt } from "@mui/material";
4
- import wt, { createContext as vt, useMemo as R, useCallback as E, useContext as kt, forwardRef as Kt, useState as T, useRef as G, Fragment as Xt, isValidElement as _t, useEffect as O } from "react";
5
- import K from "lodash/keyBy";
6
- import { h as j, b as N, E as qt, i as ot, m as nt } from "./state-BgKqNapt.js";
7
- import { AIForm as ct, AIFormResult as dt } from "@blocklet/ai-runtime/components";
8
- import { deepmerge as Qt } from "@mui/utils";
9
- import rt from "lodash/pick";
10
- import { ErrorBoundary as Zt } from "react-error-boundary";
11
- import { useColorConvert as $t } from "@blocklet/pages-kit/contexts/color";
12
- import { cx as b, css as q } from "@emotion/css";
13
- import { Icon as Q } from "@iconify/react";
14
- import te from "react-markdown";
15
- import ee from "remark-gfm";
16
- import { LoadingButton as oe } from "@mui/lab";
17
- import { useTheme as St, styled as _ } from "@arcblock/ux/lib/Theme";
18
- import ne from "@arcblock/react-hooks/lib/useBrowser";
19
- import mt from "@arcblock/ux/lib/Colors";
20
- import { ResponsiveImage as Nt, CustomComponentRenderer as re } from "@blocklet/pages-kit/components";
21
- import { isGradient as ie, isColorString as ae } from "@blocklet/pages-kit/utils/style";
22
- import Ct from "@mui/material/useMediaQuery";
23
- import C from "lodash/omit";
24
- import { Icon as Pt } from "@iconify-icon/react";
25
- import se from "@arcblock/ux/lib/Screenshot";
26
- import { Link as le, NavLink as ce, useNavigate as de } from "react-router-dom";
27
- import me from "@arcblock/ux/lib/Button";
28
- import Z from "is-uri";
29
- import { join as M } from "pathe";
30
- import { withoutTrailingSlash as X, isRelative as ue, parseURL as pe } from "ufo";
31
- import { useMessage as he } from "@blocklet/embed/message";
32
- import { useLatest as fe } from "ahooks";
33
- import ge from "lodash/isEqual";
34
- import { EmbedIframe as xe } from "@blocklet/embed/react";
35
- import { TwitterTimelineEmbed as be } from "react-twitter-embed";
36
- import { useUpdate as ye, useMount as we } from "react-use";
37
- const Bt = "{{CUSTOM_VALUE}}", ve = [
38
- {
39
- title: "None",
40
- value: "none",
41
- sx: { py: 0 }
42
- },
43
- {
44
- title: "Small",
45
- value: "small",
46
- sx: { py: { xs: 2.5, md: 4, lg: 4, xl: 6 } }
47
- },
48
- {
49
- title: "Normal",
50
- value: "normal",
51
- sx: { py: { xs: 5, md: 7.5, lg: 10, xl: 12.5 } }
52
- },
53
- {
54
- title: "Large",
55
- value: "large",
56
- sx: { py: { xs: 7.5, md: 10, lg: 12.5, xl: 15 } }
57
- }
58
- ], ke = [
59
- {
60
- title: "None",
61
- value: "none",
62
- sx: { py: 0 }
63
- },
64
- {
65
- title: "Small",
66
- value: "small",
67
- sx: { py: { xs: 2.5, md: 4, lg: 4, xl: 6 } }
68
- },
69
- {
70
- title: "Normal",
71
- value: "normal",
72
- sx: { py: { xs: 5, md: 7, lg: 7, xl: 9 } }
73
- },
74
- {
75
- title: "Large",
76
- value: "large",
77
- sx: { py: { xs: 6, md: 9, lg: 9, xl: 11 } }
78
- }
79
- ], _e = [
80
- {
81
- title: "None",
82
- value: "none",
83
- sx: { px: 0 }
84
- },
85
- {
86
- title: "Small",
87
- value: "small",
88
- sx: { px: { xs: 2.5, md: 4, lg: 4, xl: 6 } }
89
- },
90
- {
91
- title: "Normal",
92
- value: "normal",
93
- sx: { px: { xs: 5, md: 7.5, lg: 10, xl: 12.5 } }
94
- },
95
- {
96
- title: "Large",
97
- value: "large",
98
- sx: { px: { xs: 7.5, md: 10, lg: 12.5, xl: 15 } }
99
- }
100
- ], Y = (t, e, n) => {
101
- const i = t.breakpoints.values[n];
102
- return `${e}${i ? ` (${i}px)` : ""}`;
103
- }, $e = [
104
- {
105
- title: "100%",
106
- value: "full",
107
- sx: { maxWidth: "100%" }
108
- },
109
- {
110
- title: (t) => Y(t, "Small", "sm"),
111
- value: "sm",
112
- sx: {
113
- maxWidth: (t) => t.breakpoints.values.sm,
114
- width: "100%",
115
- mx: "auto"
116
- }
117
- },
118
- {
119
- title: (t) => Y(t, "Normal", "md"),
120
- value: "md",
121
- sx: { maxWidth: (t) => t.breakpoints.values.md, width: "100%", mx: "auto" }
122
- },
123
- {
124
- title: (t) => Y(t, "Large", "lg"),
125
- value: "lg",
126
- sx: { maxWidth: (t) => t.breakpoints.values.lg, width: "100%", mx: "auto" }
127
- },
128
- {
129
- title: (t) => Y(t, "Extra Large", "xl"),
130
- value: "xl",
131
- sx: { maxWidth: (t) => t.breakpoints.values.xl, width: "100%", mx: "auto" }
132
- },
133
- {
134
- title: "Custom",
135
- value: "custom",
136
- sx: {
137
- maxWidth: Bt,
138
- width: "100%",
139
- mx: "auto"
140
- }
141
- }
142
- ], Se = K(ve, "value"), Ne = K(ke, "value"), Ce = K(_e, "value"), Pe = K($e, "value"), Be = /* @__PURE__ */ new Map([
143
- ["baseSectionPaddingY", Se],
144
- ["maxWidth", Pe],
145
- ["paddingY", Ne],
146
- ["paddingX", Ce]
147
- ]);
148
- function It(t) {
149
- var l;
150
- const { type: e, value: n, format: i = "sx", defaultValue: r = null } = t, a = Be.get(e);
151
- if (!a)
152
- return r;
153
- const c = n.startsWith("custom:"), s = c ? "custom" : n;
154
- if (a != null && a[s] && ((l = a == null ? void 0 : a[s]) != null && l[i])) {
155
- const d = a[s][i];
156
- if (c) {
157
- const m = n.replace("custom:", "");
158
- try {
159
- return JSON.parse(JSON.stringify(d || {}).replaceAll(Bt, m));
160
- } catch {
161
- }
162
- }
163
- return d;
164
- }
165
- return r;
166
- }
167
- const Wt = vt({
168
- page: null,
169
- getPageMeta: () => ({}),
170
- getPageMetaStyle: () => ({})
171
- });
172
- function Ie() {
173
- return kt(Wt);
174
- }
175
- function wn({
176
- page: t,
177
- children: e,
178
- defaultLocale: n = "en",
179
- currentLocale: i
180
- }) {
181
- const r = R(() => t ? JSON.parse(JSON.stringify(t)) : null, [JSON.stringify(t)]), a = E(() => {
182
- var d;
183
- if (!r) return {};
184
- const l = i || n;
185
- return ((d = r.locales) == null ? void 0 : d[l]) ?? {};
186
- }, [r, n, i]), c = E(
187
- (l = "sx") => {
188
- const d = a();
189
- return !d || !d.style ? {} : Object.entries(d.style || {}).reduce((u, [h, p]) => {
190
- if (!p) return u;
191
- const x = `${h}Custom`;
192
- d.style[x];
193
- const y = It({
194
- type: h,
195
- value: p,
196
- format: l
197
- });
198
- return y ? { ...u, ...y } : u;
199
- }, {});
200
- },
201
- [a]
202
- ), s = R(
203
- () => ({
204
- page: r,
205
- getPageMeta: a,
206
- getPageMetaStyle: c
207
- }),
208
- [r, a, c]
209
- );
210
- return /* @__PURE__ */ o(Wt.Provider, { value: s, children: e });
211
- }
212
- const We = Kt(({ onClick: t, ...e }, n) => {
213
- const [i, r] = T(!1), a = E(
214
- async (c) => {
215
- try {
216
- r(!0), await (t == null ? void 0 : t(c));
217
- } finally {
218
- r(!1);
219
- }
220
- },
221
- [t]
222
- );
223
- return /* @__PURE__ */ o(oe, { ref: n, ...e, loading: e.loading || i, onClick: a });
224
- });
225
- function Re({
226
- tip: t,
227
- tipSucceed: e,
228
- title: n,
229
- titleSucceed: i,
230
- icon: r,
231
- iconSucceed: a,
232
- autoReset: c,
233
- placement: s = "top",
234
- ...l
235
- }) {
236
- const [d, m] = T(!1), [u, h] = T(), p = G(), x = () => {
237
- h(void 0), c && (p.current = window.setTimeout(() => {
238
- m(!1);
239
- }, 3e3));
240
- }, y = () => {
241
- clearTimeout(p.current);
242
- }, f = d ? a : r, v = u ? /* @__PURE__ */ o(g, { color: "error", children: u.message }) : d && e || t;
243
- return /* @__PURE__ */ o(Ft, { title: v, disableInteractive: !0, placement: s, onClose: x, onOpen: y, children: /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(
244
- We,
245
- {
246
- startIcon: f && (typeof f == "string" ? /* @__PURE__ */ o(Q, { icon: f }) : f),
247
- loadingPosition: f ? "start" : void 0,
248
- ...l,
249
- onClick: async (S) => {
250
- if (l.onClick)
251
- try {
252
- await l.onClick(S), m(!0);
253
- } catch (B) {
254
- h(B);
255
- }
256
- },
257
- children: d ? i : n
258
- }
259
- ) }) });
260
- }
261
- const Te = wt.lazy(() => import("react-syntax-highlighter").then((t) => ({ default: t.Prism }))), je = bt((t) => /* @__PURE__ */ o(
262
- te,
263
- {
264
- ...t,
265
- remarkPlugins: [ee],
266
- components: {
267
- pre: ze,
268
- code: ({ node: e, inline: n, className: i, children: r, ...a }) => {
269
- if (!r) return null;
270
- const c = /language-(\w+)/.exec(i || "");
271
- return n ? /* @__PURE__ */ o(g, { component: "code", className: i, ...a, children: r }) : /* @__PURE__ */ o(g, { component: Te, language: c == null ? void 0 : c[1], ...a, sx: { borderRadius: 1 }, children: String(r).replace(/\n$/, "") });
272
- },
273
- table: ({ className: e, children: n }) => /* @__PURE__ */ o(g, { sx: { overflow: "auto", my: 1 }, children: /* @__PURE__ */ o("table", { className: e, children: n }) })
274
- }
275
- }
276
- ))`
277
- width: 100%;
278
- overflow: hidden;
279
- word-break: break-word;
280
-
281
- > * {
282
- &:first-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ {
283
- margin-top: 0;
284
- }
285
- &:last-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ {
286
- margin-bottom: 0;
287
- }
288
- }
289
-
290
- pre {
291
- overflow: auto;
292
- }
293
-
294
- li {
295
- margin: 0;
296
- padding: 0;
297
- }
298
-
299
- li p {
300
- display: inline-block;
301
- vertical-align: top;
302
- margin: 0;
303
- padding: 0;
304
- }
305
-
306
- table {
307
- border-collapse: collapse;
308
- white-space: nowrap;
309
-
310
- th,
311
- td {
312
- border: 1px solid grey;
313
- padding: 4px 8px;
314
- }
315
- }
316
-
317
- a {
318
- color: ${({ theme: t }) => t.palette.primary.main};
319
-
320
- :hover {
321
- text-decoration: underline;
322
- }
323
- }
324
-
325
- &.writing > *:last-child {
326
- &:after {
327
- content: '';
328
- display: inline-block;
329
- vertical-align: middle;
330
- height: 1.2em;
331
- margin-top: -0.2em;
332
- margin-left: 0.1em;
333
- border-right: 0.2em solid orange;
334
- border-radius: 10px;
335
- animation: blink-caret 0.75s step-end infinite;
336
-
337
- @keyframes blink-caret {
338
- from,
339
- to {
340
- border-color: transparent;
341
- }
342
- 50% {
343
- border-color: ${({ theme: t }) => t.palette.secondary.main};
344
- }
345
- }
346
- }
347
- }
348
- `;
349
- function ze({ children: t }) {
350
- const e = t == null ? void 0 : t.props;
351
- if (!(e != null && e.children)) return null;
352
- const n = /language-(\w+)/.exec(e.className || ""), i = n == null ? void 0 : n[1];
353
- return /* @__PURE__ */ w(
354
- g,
355
- {
356
- component: "div",
357
- sx: {
358
- fontSize: 14,
359
- borderRadius: 1,
360
- bgcolor: "rgb(245, 242, 240)",
361
- "> pre": { mt: "0 !important" }
362
- },
363
- children: [
364
- /* @__PURE__ */ w(yt, { direction: "row", alignItems: "center", p: 0.5, pl: 1.5, borderBottom: 1, borderColor: "grey.200", children: [
365
- /* @__PURE__ */ o(g, { children: i }),
366
- /* @__PURE__ */ o(g, { flex: 1 }),
367
- /* @__PURE__ */ o(
368
- Re,
369
- {
370
- autoReset: !0,
371
- title: /* @__PURE__ */ o(Q, { icon: "tabler:copy" }),
372
- titleSucceed: /* @__PURE__ */ o(Q, { icon: "tabler:copy-check" }),
373
- sx: { minWidth: 32, minHeight: 32, p: 0, fontSize: 18 },
374
- onClick: () => {
375
- window.navigator.clipboard.writeText(e.children);
376
- }
377
- }
378
- )
379
- ] }),
380
- t
381
- ]
382
- }
383
- );
384
- }
385
- function z({ actions: t, center: e, className: n, align: i }) {
386
- return t && (t != null && t.length) ? /* @__PURE__ */ o(
387
- g,
388
- {
389
- className: b(
390
- "flex gap-4 flex-wrap",
391
- "lg:flex-row lg:gap-8",
392
- (e || i === "center") && "justify-center",
393
- !e && i === "right" && "justify-end",
394
- !e && i === "left" && "justify-start",
395
- n
396
- ),
397
- sx: { alignItems: "center" },
398
- children: t
399
- }
400
- ) : null;
401
- }
402
- const Le = "section", Ee = bt(g)`
403
- overflow: hidden;
404
-
405
- .section__title {
406
- margin-top: 0;
407
- font-weight: 700;
408
- }
409
- .section__title_non_big {
410
- font-size: 32px;
411
- @media (max-width: 600px) {
412
- font-size: 24px;
413
- }
414
- }
415
- &.base-info .section__tag {
416
- margin-top: 0;
417
- margin-bottom: 2vw;
418
- background-color: ${({ theme: t }) => t.palette.primary.main};
419
- white-space: nowrap;
420
- max-width: 100%;
421
- display: inline-block;
422
- padding: 0 10px;
423
- justify-content: flex-start;
424
- overflow: hidden;
425
- text-overflow: ellipsis;
426
- font-size: 12px;
427
- color: #fff;
428
- border-radius: 4px;
429
- line-height: 20px;
430
- }
431
- .section__title {
432
- a {
433
- color: ${({ theme: t }) => t.palette.primary.main};
434
- }
435
- p {
436
- margin-top: 0;
437
- margin-bottom: 0;
438
- }
439
- }
440
- .section__description {
441
- margin-bottom: 4vw;
442
- margin-top: 0;
443
- a {
444
- color: ${({ theme: t }) => t.palette.primary.main};
445
- }
446
- p {
447
- margin-top: 0;
448
- margin-bottom: 0.5rem;
449
- }
450
- }
451
- @media (min-width: ${({ theme: t }) => t.breakpoints.values[Le]}px) {
452
- .section__tag {
453
- margin-bottom: 32px;
454
- }
455
- .section__title {
456
- margin-bottom: 32px;
457
- }
458
- .section__description {
459
- margin-bottom: 40px;
460
- }
461
- }
462
- `;
463
- function A({
464
- title: t,
465
- description: e,
466
- descriptionMarkdown: n,
467
- actions: i,
468
- className: r = "",
469
- classes: a = {},
470
- prepend: c,
471
- append: s,
472
- level: l = 2,
473
- tag: d,
474
- badge: m,
475
- center: u,
476
- logo: h,
477
- titleAppearance: p,
478
- descriptionAppearance: x,
479
- ...y
480
- }) {
481
- const f = $t();
482
- if (!t && !e && !i && !m && !d && !c && !s && !h) return null;
483
- const v = Math.max(Math.min(5, l + 1), 1), k = {
484
- 1: "xl:!text-3xl lg:!text-2xl md:!text-xl",
485
- 2: "xl:!text-2xl lg:!text-xl md:!text-lg",
486
- 3: "xl:!text-2xl lg:!text-xl md:!text-lg",
487
- 4: "xl:!text-xl lg:!text-lg md:!text-md",
488
- 5: "xl:!text-lg md:!text-md sm:!text-sm",
489
- 6: "!text-sm"
490
- }, S = l === 0 ? "big" : `h${v}`, B = l === 0;
491
- return /* @__PURE__ */ w(Ee, { className: b("base-info", "lg:text-left", u && "!text-center", r), ...y, children: [
492
- c && /* @__PURE__ */ o("div", { children: c }),
493
- (d || m) && /* @__PURE__ */ o("div", { className: b("section__tag", (a == null ? void 0 : a.tag) || (a == null ? void 0 : a.badge)), children: d || m }),
494
- h && /* @__PURE__ */ o("img", { className: "w-[120px] m-auto mb-8", src: h, alt: "info", loading: "lazy" }),
495
- t && /* @__PURE__ */ o(
496
- P,
497
- {
498
- sx: {
499
- whiteSpace: "pre-wrap",
500
- mb: e ? "2vw" : 0,
501
- ...(p == null ? void 0 : p.color) && { color: `${f(p.color)} !important` }
502
- },
503
- className: b(
504
- "section__title",
505
- "text-gray-800",
506
- "dark:text-gray-50",
507
- a.title,
508
- "page-kit-section__title",
509
- B ? "" : "section__title_non_big"
510
- ),
511
- component: `h${Math.max(l, 1)}`,
512
- variant: S,
513
- children: t
514
- }
515
- ),
516
- e && (n ? /* @__PURE__ */ o(
517
- g,
518
- {
519
- sx: {
520
- ...(x == null ? void 0 : x.color) && { color: `${f(x.color)} !important` }
521
- },
522
- component: je,
523
- className: b(
524
- "section__description",
525
- "text-gray-800",
526
- "dark:text-gray-100",
527
- k[v],
528
- a.description,
529
- "page-kit-section__description"
530
- ),
531
- children: e
532
- }
533
- ) : /* @__PURE__ */ o(
534
- P,
535
- {
536
- sx: {
537
- whiteSpace: "pre-wrap",
538
- ...(x == null ? void 0 : x.color) && { color: `${f(x.color)} !important` }
539
- },
540
- className: b(
541
- "section__description",
542
- "text-gray-800",
543
- "dark:text-gray-100",
544
- k[v],
545
- a.description,
546
- "page-kit-section__description"
547
- ),
548
- component: "div",
549
- variant: "body1",
550
- gutterBottom: !0,
551
- children: e
552
- }
553
- )),
554
- /* @__PURE__ */ o(z, { actions: i, center: u, className: "mt-8" }),
555
- s && /* @__PURE__ */ o("div", { children: s })
556
- ] });
557
- }
558
- const F = [
559
- "actions",
560
- "append",
561
- "badge",
562
- "tag",
563
- "center",
564
- "description",
565
- "descriptionMarkdown",
566
- "level",
567
- "logo",
568
- "prepend",
569
- "title",
570
- "titleAppearance",
571
- "descriptionAppearance"
572
- ];
573
- function Rt(t) {
574
- if (t.type === Xt) {
575
- const n = (t.props.children || []).filter((i) => _t(i));
576
- return n.length === 1 ? Rt(n[0]) : n.length > 1;
577
- }
578
- return Array.isArray(t);
579
- }
580
- const I = "&>*";
581
- function it({ children: t, col: e, gap: n, className: i, align: r, sx: a, type: c, ...s } = {
582
- children: null,
583
- className: "",
584
- col: 3,
585
- gap: void 0,
586
- sx: {},
587
- align: "center",
588
- type: "default"
589
- }) {
590
- const l = St(), d = Number(Math.floor(100 / e * 100) / 100), m = {
591
- center: "justify-center items-center",
592
- left: "justify-start items-center",
593
- right: "justify-end items-center",
594
- top: "justify-center items-start",
595
- bottom: "justify-center items-end",
596
- "top-left": "justify-start items-start",
597
- "top-right": "justify-end items-start",
598
- "bottom-left": "justify-start items-end",
599
- "bottom-right": "justify-end items-end"
600
- }, u = m[r] || m.center;
601
- let p = n ?? ({
602
- 2: 6,
603
- 3: 4,
604
- 4: 4,
605
- 5: 3,
606
- 6: 3
607
- }[e] || 0);
608
- Rt(t) || (p = 0);
609
- const y = (e - 1) * p / e;
610
- let f = { ...a, gap: `${p}rem` };
611
- const v = { [I]: { width: "100%" } }, k = {}, S = {}, B = {};
612
- switch (v.gap = "1rem", k.gap = `${p / 2}rem`, e) {
613
- case 3:
614
- case 4:
615
- k[I] = {
616
- width: `calc(50% - ${p / 2}rem)`
617
- };
618
- break;
619
- case 5:
620
- case 6:
621
- v[I] = {
622
- width: `calc(50% - ${p / 2 / 2}rem)`
623
- }, k[I] = {
624
- width: `calc(50% - ${p / 2 / 2}rem)`
625
- }, S[I] = {
626
- width: `calc(33.33% - ${p * 2 / 3}rem)`
627
- };
628
- break;
629
- }
630
- return f[I] = { width: `calc(${d}% - ${y}rem)` }, f[`@media (max-width: ${l.breakpoints.values.xl}px)`] = B, f[`@media (max-width: ${l.breakpoints.values.lg}px)`] = S, f[`@media (max-width: ${l.breakpoints.values.md}px)`] = k, f[`@media (max-width: ${l.breakpoints.values.sm}px)`] = v, c === "wall" && (f = { ...a, gap: `${p}rem` }, f[I] = { width: `calc(${d}% - ${y}rem)` }, v[I] = { width: `calc(45% - ${p / 2 / 2}rem)` }, f[`@media (max-width: ${l.breakpoints.values.sm}px)`] = v), /* @__PURE__ */ o(g, { className: b("flex flex-wrap flex-row h-full", u, i), sx: f, ...s, children: t });
631
- }
632
- function Oe() {
633
- const t = navigator.userAgent.toLowerCase();
634
- return t.includes("safari") && !t.includes("chrome");
635
- }
636
- function Ae(t = "") {
637
- if (t.startsWith("data:image/svg+xml,")) return !0;
638
- const e = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/, n = /^(\/|\.\/|\.\.\/)(?:[^/]+\/)*[^/]+$/;
639
- return e.test(t) || n.test(t);
640
- }
641
- function tt(t) {
642
- return (t == null ? void 0 : t.endsWith(".mp4")) || (t == null ? void 0 : t.endsWith(".m4v")) || (t == null ? void 0 : t.endsWith(".webm"));
643
- }
644
- function Fe(t) {
645
- return t != null && t.endsWith(".mp4") || t != null && t.endsWith(".m4v") ? "video/mp4" : t != null && t.endsWith(".webm") ? "video/webm" : void 0;
646
- }
647
- function Ve(t) {
648
- let e = {};
649
- return typeof t == "string" ? ie(t) ? e.image = t : (e.image = N(t), ae(t) && (e.color = t, e.image = "")) : e = t, e;
650
- }
651
- function Ue() {
652
- const [t, e] = T(Date.now());
653
- return O(() => {
654
- const n = () => {
655
- e(Date.now());
656
- };
657
- return document.addEventListener("visibilitychange", n), () => {
658
- document.removeEventListener("visibilitychange", n);
659
- };
660
- }, []), t;
661
- }
662
- function ut(t, e, n, i, r) {
663
- let a = null;
664
- const { color: c = "", image: s } = Ve(e);
665
- return s && Ae(s) ? (delete n.backgroundColor, !(t.mobile.apple.device || Oe()) && tt(s) ? a = /* @__PURE__ */ o(
666
- g,
667
- {
668
- component: "video",
669
- className: "section-bg",
670
- width: "100%",
671
- autoPlay: !0,
672
- loop: !0,
673
- muted: !0,
674
- controls: !1,
675
- playsInline: !0,
676
- poster: j(N(i), 1200, "quality"),
677
- src: tt(s) ? s : j(s, 1200, "quality"),
678
- sx: {
679
- position: "absolute",
680
- zIndex: -9999,
681
- right: 0,
682
- left: 0,
683
- top: 0,
684
- width: "100%",
685
- height: "100%",
686
- objectFit: "cover"
687
- }
688
- },
689
- s
690
- ) : a = /* @__PURE__ */ o(
691
- Nt,
692
- {
693
- src: s,
694
- sizesAttr: {
695
- sm: 600,
696
- md: 900,
697
- lg: 1200
698
- },
699
- className: "section-bg",
700
- alt: "",
701
- width: "100%",
702
- loading: "lazy",
703
- sx: {
704
- position: "absolute",
705
- zIndex: -9999,
706
- right: 0,
707
- left: 0,
708
- top: 0,
709
- width: "100%",
710
- height: "100%",
711
- objectFit: "cover"
712
- }
713
- },
714
- r || s
715
- )) : s ? n.backgroundImage = `${s} !important` : c && (n.backgroundColor = `${c} !important`), a;
716
- }
717
- function He({ autoWidth: t, children: e, ...n }) {
718
- return t ? /* @__PURE__ */ o(g, { display: "flex", ...n, children: e }) : /* @__PURE__ */ o(Vt, { ...n, children: e });
719
- }
720
- function V({
721
- dark: t = !1,
722
- children: e,
723
- className: n,
724
- sx: i = {},
725
- boxed: r = { show: !1 },
726
- padding: a = "normal",
727
- boxProps: c,
728
- type: s,
729
- ...l
730
- }) {
731
- const d = { ...i }, m = Ct((p) => p.breakpoints.down("md"));
732
- t && (d.color = mt.common.white, d.backgroundColor = `${mt.grey[900]} !important`), r.show && (d.display = "flex");
733
- const u = R(() => !Number(l.boxMaxWidth) || m ? {
734
- width: "100%"
735
- } : s === "wall" && l.boxMaxWidth ? {
736
- maxWidth: `${l.boxMaxWidth}px !important`,
737
- width: "100%"
738
- } : {
739
- width: "100%"
740
- }, [l.boxMaxWidth, m, s]), h = It({
741
- type: "baseSectionPaddingY",
742
- value: a || "normal",
743
- // section default is normal
744
- defaultValue: ""
745
- });
746
- return /* @__PURE__ */ o(
747
- De,
748
- {
749
- component: "section",
750
- styles: { ...d, ...h },
751
- className: b("base-section", "px-2 md:px-5 lg:px-5 xl:px-10", n, {
752
- dark: t
753
- }),
754
- ...C(
755
- l,
756
- "hoverStyle",
757
- "boxMaxWidth",
758
- "embedUrl",
759
- "autoWidth",
760
- "paddingXY",
761
- "iframeHeight",
762
- "titleAppearance",
763
- "descriptionAppearance"
764
- ),
765
- children: /* @__PURE__ */ o(He, { autoWidth: l == null ? void 0 : l.autoWidth, className: b("section-content h-full"), sx: u, children: r.show ? /* @__PURE__ */ o(Tt, { ...c, boxed: r, children: e }) : e })
766
- }
767
- );
768
- }
769
- function Tt({
770
- background: t = "",
771
- backgroundVideoPoster: e,
772
- children: n,
773
- sx: i = {},
774
- boxed: r = { show: !1 },
775
- className: a = "",
776
- styles: c = {},
777
- ...s
778
- }) {
779
- const l = { ...c, ...i }, d = $t();
780
- let m = null;
781
- const u = Ct((x) => x.breakpoints.up("sm")), h = ne(), p = Ue();
782
- return t && (m = ut(
783
- h,
784
- typeof t == "string" ? d(t) : t,
785
- l,
786
- e,
787
- p
788
- )), r.show && (l.borderRadius = "10px", l.padding === void 0 && (l.padding = u ? "50px" : "20px"), r != null && r.border && (l.border = "1px solid #c0c0c0"), r != null && r.background && (m = ut(
789
- h,
790
- typeof (r == null ? void 0 : r.background) == "string" ? d(r == null ? void 0 : r.background) : r == null ? void 0 : r.background,
791
- l,
792
- r == null ? void 0 : r.backgroundVideoPoster,
793
- p
794
- ))), /* @__PURE__ */ w(
795
- g,
796
- {
797
- ...s,
798
- sx: {
799
- ...l,
800
- ...m ? { position: "relative", overflow: "hidden", zIndex: 0 } : {}
801
- },
802
- className: b(a, (r == null ? void 0 : r.boxShadow) && "shadow-xl"),
803
- children: [
804
- m,
805
- n
806
- ]
807
- }
808
- );
809
- }
810
- const De = _(Tt)`
811
- &:nth-of-type(even) {
812
- background: #f8f8f8;
813
- }
814
-
815
- @media (max-width: 600px) {
816
- .section__title {
817
- font-size: 24px;
818
- }
819
-
820
- .base-info {
821
- > *:last-child {
822
- margin-bottom: 0;
823
- }
824
- }
825
- }
826
- `;
827
- function jt({ icon: t, ...e }) {
828
- return /* @__PURE__ */ o(Pt, { icon: t, ...e, ref: null });
829
- }
830
- function $(t, e) {
831
- const n = rt(t, e), i = C(t, e);
832
- return [n, i];
833
- }
834
- const zt = ["title", "description", "actions", "badge", "tag", "prepend", "append", "logo"];
835
- function Me({
836
- image: t,
837
- imageBorder: e,
838
- imageShadow: n,
839
- className: i,
840
- reverse: r = !1,
841
- fullSizeImage: a,
842
- ...c
843
- }) {
844
- const [s, l] = $(c, F), d = Object.keys(s).length > 0 && Object.values(rt(s, zt)).filter(Boolean).length > 0 && /* @__PURE__ */ o(A, { ...s }), m = _t(t) ? t : /* @__PURE__ */ o(g, { component: "img", src: t, alt: "", className: "block" }), u = ["phone", "macbook"].includes(e), h = t && /* @__PURE__ */ o(
845
- g,
846
- {
847
- className: b(
848
- "section__image",
849
- "m-auto, leading-[1] text-center",
850
- n && "shadow-xl",
851
- s != null && s.center ? "flex justify-center items-center" : ""
852
- ),
853
- sx: {
854
- border: e === !0 ? "1px solid #c0c0c0" : void 0,
855
- borderRadius: 2,
856
- overflow: "hidden",
857
- // FIXME: Screenshot 组件无法设置最外层 div 的样式,只能通过父元素设置
858
- "> div": u ? { width: "100%", video: { borderRadius: "0 !important" } } : void 0
859
- },
860
- children: u ? (
861
- // @ts-ignore
862
- /* @__PURE__ */ o(se, { type: e, sx: { width: "100%" }, children: m })
863
- ) : m
864
- }
865
- );
866
- return /* @__PURE__ */ o(
867
- V,
868
- {
869
- className: b(
870
- "section--block",
871
- i,
872
- a && !r && q`
873
- .section-bg {
874
- height: 80%;
875
- }
876
- `
877
- ),
878
- ...l,
879
- boxProps: a ? { sx: { padding: 0, overflow: "hidden" } } : void 0,
880
- children: /* @__PURE__ */ o(
881
- it,
882
- {
883
- col: t ? 2 : 1,
884
- className: a ? q`
885
- display: flex;
886
- flex-direction: column;
887
-
888
- > .base-info,
889
- > .section__image {
890
- width: 100%;
891
-
892
- > img,
893
- > video {
894
- width: 100%;
895
- }
896
- }
897
- ` : void 0,
898
- children: r ? /* @__PURE__ */ w(J, { children: [
899
- h,
900
- d
901
- ] }) : /* @__PURE__ */ w(J, { children: [
902
- d,
903
- h
904
- ] })
905
- }
906
- )
907
- }
908
- );
909
- }
910
- const U = ["editing", "height", "locale", "dev", "sx"];
911
- function Ye(t) {
912
- const { className: e, ...n } = t;
913
- return /* @__PURE__ */ o(Je, { ...n, className: b("BlockBase-root", e) });
914
- }
915
- const Je = _(g)`
916
- position: relative;
917
- `;
918
- function Ge({
919
- widget: t,
920
- reverse: e,
921
- projectId: n,
922
- assistantId: i,
923
- working: r,
924
- submitTitle: a,
925
- submitIcon: c,
926
- submitColor: s,
927
- placeholder: l,
928
- loadingIndicator: d,
929
- section: m,
930
- ...u
931
- }) {
932
- const [{ editing: h }, p] = $(u, U), [x, y] = $(p, F), f = n && i ? { projectId: n, gitRef: "main", assistantId: i, working: !0 } : void 0, v = {
933
- children: a,
934
- endIcon: c ? /* @__PURE__ */ o(jt, { icon: c }) : void 0,
935
- sx: {
936
- background: s || void 0,
937
- ":hover": {
938
- background: s || void 0,
939
- opacity: 0.8
940
- }
941
- }
942
- }, k = [], S = l && /* @__PURE__ */ o(P, { variant: "caption", color: "text.disabled", children: l }), B = d && /* @__PURE__ */ o(P, { variant: "caption", color: "text.disabled", children: d });
943
- Object.keys(x).length > 0 && Object.values(rt(x, zt)).filter(Boolean).length > 0 && k.push(/* @__PURE__ */ o(A, { ...x }, "base-info")), f && (t === "form" ? k.push(/* @__PURE__ */ o(ct, { identifier: f, SubmitProps: v }, "form")) : t === "result" ? k.push(
944
- /* @__PURE__ */ o(
945
- dt,
946
- {
947
- identifier: f,
948
- placeholder: S,
949
- loadingIndicator: B
950
- },
951
- "result"
952
- )
953
- ) : k.push(
954
- /* @__PURE__ */ w(yt, { width: "100%", gap: 2, direction: "row", children: [
955
- /* @__PURE__ */ o(ct, { identifier: f, BoxProps: { flex: 1 }, SubmitProps: v }),
956
- /* @__PURE__ */ o(
957
- dt,
958
- {
959
- identifier: f,
960
- BoxProps: { flex: 1 },
961
- placeholder: S,
962
- loadingIndicator: B
963
- }
964
- )
965
- ] }, "form-result")
966
- )), e && k.reverse();
967
- const st = Ut(), At = R(
968
- () => Ht(Qt(st, { palette: { primary: s ? { main: s } : void 0 } })),
969
- [s, st]
970
- );
971
- return /* @__PURE__ */ o(Zt, { fallbackRender: qt, children: /* @__PURE__ */ o(Dt, { theme: At, children: /* @__PURE__ */ o(V, { ...y, sx: h ? { pointerEvents: "none" } : {}, children: /* @__PURE__ */ o(it, { col: k.length, children: k }) }) }) });
972
- }
973
- const Lt = vt({
974
- pages: [],
975
- project: void 0
976
- }), { Provider: vn, Consumer: kn } = Lt;
977
- function Et() {
978
- return kt(Lt);
979
- }
980
- function Ke({ icon: t, className: e = "", size: n = "1rem", ...i }) {
981
- return /* @__PURE__ */ o(Xe, { component: jt, className: b("css-icon", e), size: n, ...i, icon: t });
982
- }
983
- const Xe = _(g)`
984
- &.css-icon {
985
- display: inline-block;
986
- width: ${({ size: t }) => t};
987
- height: ${({ size: t }) => t};
988
- }
989
- `;
990
- function qe({ icon: t, className: e = "", size: n = "1rem", imageMeta: i, ...r }) {
991
- const a = j(N(t), 540), [c, s] = T(!1), l = St();
992
- return c ? /* @__PURE__ */ o(Ke, { icon: "i-mdi:image", color: l.palette.grey[500], size: n, className: e, ...r }) : /* @__PURE__ */ o(Qe, { className: b("image-icon", e), size: n, ...r, children: /* @__PURE__ */ o(
993
- "img",
994
- {
995
- className: "image-icon__image",
996
- src: a,
997
- onError: () => s(!0),
998
- width: i == null ? void 0 : i.naturalWidth,
999
- height: i == null ? void 0 : i.naturalHeight,
1000
- alt: (i == null ? void 0 : i.filename) || "card-icon",
1001
- loading: "lazy"
1002
- }
1003
- ) });
1004
- }
1005
- const Qe = _(g)`
1006
- display: inline-block;
1007
- width: ${({ size: t }) => t};
1008
- height: ${({ size: t }) => t};
1009
- .image-icon__image {
1010
- object-fit: contain;
1011
- height: 100%;
1012
- width: 100%;
1013
- }
1014
- `, at = (t) => typeof t == "string" && /^[\w-_]+:[\w-_]+$/.test(t);
1015
- function et({ icon: t, size: e = "1rem", imageMeta: n, ...i }) {
1016
- const r = window.isNaN(e) ? e : `${e}px`;
1017
- return at(t) ? /* @__PURE__ */ o(Pt, { icon: t }) : /* @__PURE__ */ o(Ze, { component: qe, imageMeta: n, className: "base-icon", icon: t, size: r, ...i });
1018
- }
1019
- const Ze = _(g)`
1020
- flex-shrink: 0;
1021
- `;
1022
- function L({ text: t, children: e, icon: n = "", endIcon: i, color: r = "primary", link: a = "", href: c = "", ...s }) {
1023
- const l = n ? /* @__PURE__ */ o(et, { icon: n }) : null, d = i ? /* @__PURE__ */ o(et, { icon: i }) : null, m = a || c, u = { ...s };
1024
- return m && (u.href = m, Z(m) && (u.target = u.target || "_blank")), /* @__PURE__ */ o(me, { startIcon: l, endIcon: d, color: r, ...u, children: t || e });
1025
- }
1026
- function Ot({ editing: t, text: e, ...n }) {
1027
- const { pages: i = [] } = Et(), r = i.find((a) => a.id === (n.link || n.linkId));
1028
- if (t)
1029
- return /* @__PURE__ */ o(L, { ...C(n, ["link", "linkId"]), children: e });
1030
- if (r) {
1031
- const a = r.path || "/";
1032
- return /* @__PURE__ */ o(le, { to: a, children: /* @__PURE__ */ o(L, { ...C(n, ["link", "linkId"]), children: e }) });
1033
- }
1034
- return /* @__PURE__ */ o(L, { ...C(n, "linkId"), children: e });
1035
- }
1036
- function W({ type: t = "", icon: e = "", size: n = "3rem", className: i = "", ...r }) {
1037
- return /* @__PURE__ */ o(et, { icon: e || t, size: n, className: b("content-icon", i), ...r });
1038
- }
1039
- W.propTypes = {};
1040
- W.defaultProps = {
1041
- type: "",
1042
- icon: "",
1043
- size: "3rem",
1044
- color: "inherit",
1045
- className: ""
1046
- };
1047
- function to({
1048
- to: t,
1049
- base: e,
1050
- children: n,
1051
- className: i,
1052
- activeClassName: r = "active",
1053
- target: a = "auto",
1054
- autoExternalMark: c = !1,
1055
- useRouterLink: s,
1056
- ...l
1057
- }) {
1058
- const { pages: d = [], locale: m = "" } = {}, u = e ? M("/", e) : e || "";
1059
- let h = a === "auto" ? "_self" : a, p = M(u, t);
1060
- const x = c ? Z(p) : !1;
1061
- if (e)
1062
- return p = M(u, m, t), /* @__PURE__ */ o(
1063
- "a",
1064
- {
1065
- className: `no-underline ${i}`,
1066
- href: X(p),
1067
- rel: "noreferrer noopener",
1068
- target: h,
1069
- ...l,
1070
- children: n
1071
- }
1072
- );
1073
- if (Z(t))
1074
- a === "auto" && (h = "_blank"), p = t;
1075
- else {
1076
- ue(p) && (p = M(window.location.pathname, p));
1077
- const y = pe(`${window.location.origin}${p}`), f = d.some((v) => v.pathname === y.pathname);
1078
- if (s || f)
1079
- return /* @__PURE__ */ o(
1080
- ce,
1081
- {
1082
- end: !0,
1083
- to: X(p),
1084
- className: ({ isActive: v }) => b(i, v ? r : ""),
1085
- ...l,
1086
- children: n
1087
- }
1088
- );
1089
- }
1090
- return /* @__PURE__ */ w(
1091
- "a",
1092
- {
1093
- className: `no-underline ${i}`,
1094
- href: X(p),
1095
- rel: "noreferrer noopener",
1096
- target: h,
1097
- ...l,
1098
- children: [
1099
- n,
1100
- x && /* @__PURE__ */ o(W, { icon: "i-mdi:arrow-top-right", size: "0.9em", className: "smart-link__mark", style: { marginLeft: 5 } })
1101
- ]
1102
- }
1103
- );
1104
- }
1105
- function H({
1106
- prepend: t,
1107
- append: e,
1108
- children: n,
1109
- className: i = "",
1110
- dark: r = !1,
1111
- border: a = !0,
1112
- ...c
1113
- }) {
1114
- let s = {};
1115
- const { pages: l = [] } = Et(), d = l.find((h) => h.id === c.link), m = !n || wt.Children.toArray(n).every((h) => h === null);
1116
- return c.link && (s = {
1117
- component: to,
1118
- to: (d == null ? void 0 : d.path) || c.link,
1119
- useRouterLink: !0
1120
- }), /* @__PURE__ */ w(
1121
- eo,
1122
- {
1123
- className: b(
1124
- "base-card card",
1125
- { "border-gray-200": a },
1126
- { "dark:border-gray-500": r && a },
1127
- { dark: r, "border-transparent": !a },
1128
- i
1129
- ),
1130
- ...s,
1131
- ...C(c, ["listType", "dark", "iconColor", "link", "hoverStyle", "imageSize"]),
1132
- children: [
1133
- t,
1134
- !m && /* @__PURE__ */ o("div", { className: "card__body", children: n }),
1135
- e
1136
- ]
1137
- }
1138
- );
1139
- }
1140
- const eo = _(g)`
1141
- &.base-card {
1142
- text-align: left;
1143
- border-width: 1px;
1144
- border-style: solid;
1145
- border-radius: 12px;
1146
- overflow: hidden;
1147
- &,
1148
- &:hover {
1149
- text-decoration: none;
1150
- }
1151
- }
1152
- .card__body {
1153
- padding: 15px 15px;
1154
- }
1155
- `;
1156
- function D({
1157
- align: t = "left",
1158
- title: e,
1159
- titleProps: n = {},
1160
- description: i,
1161
- descriptionProps: r = {}
1162
- }) {
1163
- return /* @__PURE__ */ w(J, { children: [
1164
- e && /* @__PURE__ */ o(
1165
- P,
1166
- {
1167
- className: b("card__title text-gray-800", "dark:text-gray-50"),
1168
- component: "h5",
1169
- variant: "h5",
1170
- gutterBottom: !0,
1171
- align: t,
1172
- ...n,
1173
- children: e
1174
- }
1175
- ),
1176
- i && /* @__PURE__ */ o(
1177
- P,
1178
- {
1179
- className: b("card__description", "text-gray-500", "dark:text-gray-400"),
1180
- component: "div",
1181
- variant: "body1",
1182
- gutterBottom: !0,
1183
- align: t,
1184
- ...r,
1185
- children: i
1186
- }
1187
- )
1188
- ] });
1189
- }
1190
- function oo({
1191
- image: t,
1192
- title: e,
1193
- description: n,
1194
- imageProps: i = {},
1195
- imageMeta: r,
1196
- imageSize: a,
1197
- titleProps: c = {},
1198
- descriptionProps: s = {},
1199
- actions: l,
1200
- align: d,
1201
- ...m
1202
- }) {
1203
- const u = at(t), h = j(N(t), 540);
1204
- return /* @__PURE__ */ w(
1205
- no,
1206
- {
1207
- className: "card-article",
1208
- ...m,
1209
- prepend: /* @__PURE__ */ o("div", { className: "card__image__wrap", children: u && t ? /* @__PURE__ */ o(
1210
- g,
1211
- {
1212
- sx: {
1213
- position: "absolute",
1214
- left: 0,
1215
- top: 0,
1216
- right: 0,
1217
- bottom: 0,
1218
- display: "flex",
1219
- alignItems: "center",
1220
- justifyContent: "center"
1221
- },
1222
- children: /* @__PURE__ */ o(W, { icon: t, color: "primary.main" })
1223
- }
1224
- ) : h && /* @__PURE__ */ o(
1225
- "img",
1226
- {
1227
- className: "card__image",
1228
- src: h,
1229
- ...i,
1230
- alt: i.alt || (r == null ? void 0 : r.filename) || "card-image",
1231
- width: r == null ? void 0 : r.naturalWidth,
1232
- height: r == null ? void 0 : r.naturalHeight,
1233
- style: { width: "100%", height: "100%", objectFit: a || "cover", objectPosition: "center" },
1234
- loading: "lazy"
1235
- }
1236
- ) }),
1237
- children: [
1238
- e || n ? /* @__PURE__ */ o(
1239
- D,
1240
- {
1241
- align: d,
1242
- title: e,
1243
- titleProps: c,
1244
- description: n,
1245
- descriptionProps: s
1246
- }
1247
- ) : null,
1248
- l != null && l.length ? /* @__PURE__ */ o(z, { align: d, actions: l, className: "mt-4" }) : null
1249
- ]
1250
- }
1251
- );
1252
- }
1253
- const no = _(H)`
1254
- ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
1255
- &:hover {
1256
- box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
1257
- }` : ""}
1258
-
1259
- .card__image__wrap {
1260
- padding-top: 61.8%;
1261
- width: 100%;
1262
- position: relative;
1263
- }
1264
- .card__image {
1265
- position: absolute;
1266
- top: 0;
1267
- left: 0;
1268
- bottom: 0;
1269
- right: 0;
1270
- width: 100%;
1271
- height: 100%;
1272
- object-position: top center;
1273
- }
1274
- `, pt = "section";
1275
- function ht({
1276
- title: t,
1277
- image: e,
1278
- imageMeta: n,
1279
- description: i,
1280
- actions: r,
1281
- align: a,
1282
- listType: c = "",
1283
- className: s = "",
1284
- ...l
1285
- }) {
1286
- return /* @__PURE__ */ w(ro, { className: b("card", `list-type-${c}`, s), align: a, ...l, children: [
1287
- e && /* @__PURE__ */ o(
1288
- W,
1289
- {
1290
- icon: e,
1291
- color: "primary.main",
1292
- size: c === "icon-title" ? "1.2rem" : "3rem",
1293
- imageMeta: n
1294
- }
1295
- ),
1296
- t || i ? /* @__PURE__ */ o(D, { align: a, title: t, description: i }) : null,
1297
- r != null && r.length ? /* @__PURE__ */ o(z, { align: a, actions: r, className: "mt-4" }) : null
1298
- ] });
1299
- }
1300
- const ro = _(H)`
1301
- padding: 5vw 4vw;
1302
- box-sizing: border-box;
1303
- /* min-height: 320px; */
1304
- color: inherit !important;
1305
- border-radius: 0.5rem;
1306
- /* ${({ dark: t, theme: e }) => `background-color:${t ? e.palette.grey[900] : e.palette.common.white};`} */
1307
- @media (max-width: ${({ theme: t }) => t.breakpoints.values[pt]}px) {
1308
- padding: 1.5rem 2rem;
1309
- }
1310
- @media (max-width: ${({ theme: t }) => t.breakpoints.values.sm}px) {
1311
- height: auto;
1312
- min-height: unset;
1313
- }
1314
-
1315
- ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
1316
- &:hover {
1317
- box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
1318
- }` : ""}
1319
-
1320
- .card__title {
1321
- font-weight: 700;
1322
- margin-top: 24px;
1323
- margin-bottom: 12px;
1324
- a {
1325
- color: ${({ theme: t }) => t.palette.primary.main};
1326
- }
1327
- }
1328
- .card__description {
1329
- a {
1330
- color: ${({ theme: t }) => t.palette.primary.main};
1331
- }
1332
- }
1333
- .card__body {
1334
- padding: 0;
1335
- ${({ align: t }) => `text-align:${t || "left"};`}
1336
- }
1337
-
1338
- &.list-type-icon-title {
1339
- padding: 1.2rem;
1340
- .title-line {
1341
- display: flex;
1342
- }
1343
- .card__title {
1344
- margin: 0;
1345
- font-size: 1em;
1346
- }
1347
- .css-icon {
1348
- margin-right: 0.5rem;
1349
- }
1350
- }
1351
-
1352
- @media (min-width: ${({ theme: t }) => t.breakpoints.values[pt]}px) {
1353
- padding: 2rem 2rem;
1354
- text-align: left;
1355
- box-sizing: border-box;
1356
- }
1357
- `;
1358
- function io({
1359
- image: t,
1360
- title: e,
1361
- description: n,
1362
- imageProps: i = {},
1363
- imageMeta: r,
1364
- imageSize: a,
1365
- titleProps: c = {},
1366
- descriptionProps: s = {},
1367
- actions: l,
1368
- align: d,
1369
- ...m
1370
- }) {
1371
- const u = at(t), h = j(N(t), 540);
1372
- return /* @__PURE__ */ w(
1373
- ao,
1374
- {
1375
- className: "card-article",
1376
- ...m,
1377
- prepend: /* @__PURE__ */ o("div", { className: "card__image__wrap", children: u && t ? /* @__PURE__ */ o(
1378
- g,
1379
- {
1380
- sx: {
1381
- position: "absolute",
1382
- left: 0,
1383
- top: 0,
1384
- right: 0,
1385
- bottom: 0,
1386
- display: "flex",
1387
- alignItems: "center",
1388
- justifyContent: "center"
1389
- },
1390
- children: /* @__PURE__ */ o(W, { icon: t, color: "primary.main" })
1391
- }
1392
- ) : h && /* @__PURE__ */ o(
1393
- g,
1394
- {
1395
- component: "img",
1396
- className: "card__image",
1397
- src: h,
1398
- ...i,
1399
- alt: i.alt || (r == null ? void 0 : r.filename) || "card-image",
1400
- width: r == null ? void 0 : r.naturalWidth,
1401
- height: r == null ? void 0 : r.naturalHeight,
1402
- style: { width: "100%", height: "100%", objectFit: a || "contain", objectPosition: "center" },
1403
- loading: "lazy"
1404
- }
1405
- ) }),
1406
- children: [
1407
- e || n ? /* @__PURE__ */ o(
1408
- D,
1409
- {
1410
- align: d,
1411
- title: e,
1412
- titleProps: c,
1413
- description: n,
1414
- descriptionProps: s
1415
- }
1416
- ) : null,
1417
- l != null && l.length ? /* @__PURE__ */ o(z, { align: d, actions: l, className: "mt-4" }) : null
1418
- ]
1419
- }
1420
- );
1421
- }
1422
- const ao = _(H)`
1423
- ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
1424
- &:hover {
1425
- box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
1426
- }` : ""}
1427
-
1428
- border-radius: 0 !important;
1429
-
1430
- .card__body {
1431
- ${({ align: t }) => `text-align:${t || "left"};`}
1432
- }
1433
-
1434
- .card__image__wrap {
1435
- width: 100%;
1436
- height: 100%;
1437
- position: relative;
1438
- display: flex;
1439
- justify-content: center;
1440
- align-items: center;
1441
- }
1442
-
1443
- .card__image {
1444
- max-height: 60px;
1445
- }
1446
- `, ft = "section";
1447
- function so({
1448
- title: t,
1449
- image: e,
1450
- imageMeta: n,
1451
- iconSize: i = 100,
1452
- description: r,
1453
- actions: a,
1454
- align: c,
1455
- className: s = "",
1456
- ...l
1457
- }) {
1458
- return /* @__PURE__ */ o(lo, { className: b("card", s), ...l, children: /* @__PURE__ */ w(g, { className: "flex items-center", children: [
1459
- e && /* @__PURE__ */ o(W, { icon: e, color: "primary.main", size: i, imageMeta: n }),
1460
- /* @__PURE__ */ w(g, { className: "flex-1 ml-4", children: [
1461
- /* @__PURE__ */ o(D, { align: c, title: t, description: r }),
1462
- /* @__PURE__ */ o(z, { align: c, actions: a, className: "mt-4" })
1463
- ] })
1464
- ] }) });
1465
- }
1466
- const lo = _(H)`
1467
- padding: 5vw 4vw;
1468
- text-align: left;
1469
- box-sizing: border-box;
1470
- /* min-height: 320px; */
1471
- color: inherit !important;
1472
- border-radius: 0.5rem;
1473
- /* ${({ dark: t, theme: e }) => `background-color:${t ? e.palette.grey[900] : e.palette.common.white};`} */
1474
- @media (max-width: ${({ theme: t }) => t.breakpoints.values[ft]}px) {
1475
- padding: 1.5rem 2rem;
1476
- }
1477
- @media (max-width: ${({ theme: t }) => t.breakpoints.values.sm}px) {
1478
- height: auto;
1479
- min-height: unset;
1480
- }
1481
-
1482
- ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
1483
- &:hover {
1484
- box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
1485
- }` : ""}
1486
-
1487
- .card__title {
1488
- font-weight: 700;
1489
- margin-bottom: 12px;
1490
- a {
1491
- color: ${({ theme: t }) => t.palette.primary.main};
1492
- }
1493
- }
1494
- .card__description {
1495
- a {
1496
- color: ${({ theme: t }) => t.palette.primary.main};
1497
- }
1498
- }
1499
- .card__body {
1500
- padding: 0;
1501
- }
1502
-
1503
- &.list-type-icon-title {
1504
- padding: 1.2rem;
1505
- .title-line {
1506
- display: flex;
1507
- }
1508
- .card__title {
1509
- margin: 0;
1510
- font-size: 1em;
1511
- }
1512
- .css-icon {
1513
- margin-right: 0.5rem;
1514
- }
1515
- }
1516
-
1517
- @media (min-width: ${({ theme: t }) => t.breakpoints.values[ft]}px) {
1518
- padding: 2rem 2rem;
1519
- text-align: left;
1520
- box-sizing: border-box;
1521
- }
1522
- `;
1523
- function co({
1524
- title: t,
1525
- titleProps: e = {},
1526
- description: n,
1527
- descriptionProps: i = {},
1528
- image: r,
1529
- imageMeta: a,
1530
- className: c = "",
1531
- align: s,
1532
- hoverStyle: l,
1533
- ...d
1534
- }) {
1535
- return /* @__PURE__ */ w(mo, { className: b("card-simple", c, `hover-style__${l}`), align: s, ...d, children: [
1536
- r && /* @__PURE__ */ o(W, { icon: r, color: "primary.main", imageMeta: a }),
1537
- t || n ? /* @__PURE__ */ o(
1538
- D,
1539
- {
1540
- align: s,
1541
- title: t,
1542
- titleProps: e,
1543
- description: n,
1544
- descriptionProps: i
1545
- }
1546
- ) : null
1547
- ] });
1548
- }
1549
- const mo = _(H)`
1550
- ${({ dark: t, theme: e }) => `background-color:${t ? e.palette.grey[900] : e.palette.common.white};`}
1551
-
1552
- &.hover-style__default {
1553
- &.card-simple {
1554
- &:hover {
1555
- border-top-right-radius: 36px;
1556
- }
1557
- }
1558
- .card__body {
1559
- &:hover {
1560
- &::before {
1561
- width: 42px;
1562
- height: 42px;
1563
- transform: translate(50%, -50%) rotate(45deg);
1564
- }
1565
- &::after {
1566
- transform: none;
1567
- }
1568
- }
1569
- }
1570
- }
1571
-
1572
- &.card-simple {
1573
- border-radius: 8px;
1574
- border-top-right-radius: 26px;
1575
-
1576
- .card__body {
1577
- ${({ align: t }) => `text-align:${t || "left"};`}
1578
- }
1579
-
1580
- ${(t) => t.link ? `
1581
- cursor: pointer;
1582
- ` : ""}
1583
- /* cursor: pointer; */
1584
- /* &:hover {
1585
- border-top-right-radius: 36px;
1586
- } */
1587
- transition: all 180ms ease 0s;
1588
- overflow: visible;
1589
- .card__title {
1590
- margin: 12px 0;
1591
- }
1592
- .card__body {
1593
- position: relative;
1594
- padding: 20px 16px 18px;
1595
- overflow: hidden;
1596
- transition: all 180ms ease 0s;
1597
- /* &:hover {
1598
- &::before {
1599
- width: 42px;
1600
- height: 42px;
1601
- transform: translate(50%, -50%) rotate(45deg);
1602
- }
1603
- &::after {
1604
- transform: none;
1605
- }
1606
- } */
1607
- &::before,
1608
- &::after {
1609
- content: ${({ border: t }) => t ? '""' : ""};
1610
- transition: inherit;
1611
- position: absolute;
1612
- top: 0px;
1613
- right: 0px;
1614
- }
1615
- &::before {
1616
- z-index: 3;
1617
- background: #fff;
1618
- width: 30px;
1619
- height: 30px;
1620
- transform: translate(50%, -50%) rotate(45deg);
1621
- box-shadow: 0 1px 0 0 #e9eaec;
1622
- }
1623
- &::after {
1624
- z-index: 2;
1625
- width: 28px;
1626
- height: 28px;
1627
- border-bottom-left-radius: 6px;
1628
- background: #fcfcfd;
1629
- box-shadow: -1px 1px 0 0 #e9eaec;
1630
- transform: translate(8px, -8px);
1631
- }
1632
- }
1633
- }
1634
- `;
1635
- function uo({ type: t = "default", ...e }) {
1636
- const i = {
1637
- article: oo,
1638
- simple: co,
1639
- news: so,
1640
- default: ht,
1641
- wall: io
1642
- }[t] || ht;
1643
- return /* @__PURE__ */ o(i, { ...t === "news" ? e : C(e, "iconSize") });
1644
- }
1645
- function po({
1646
- list: t = [],
1647
- align: e = "top",
1648
- cards: n,
1649
- listBorder: i = !0,
1650
- listType: r = "",
1651
- col: a = 3,
1652
- gap: c,
1653
- iconColor: s,
1654
- className: l = "",
1655
- type: d = "default",
1656
- dark: m = !1,
1657
- textAlign: u = "left",
1658
- hoverStyle: h,
1659
- ...p
1660
- }) {
1661
- return /* @__PURE__ */ o(
1662
- it,
1663
- {
1664
- type: d,
1665
- className: b("card-list py-1", l, "items-stretch"),
1666
- col: a,
1667
- gap: c,
1668
- align: e,
1669
- ...p,
1670
- children: n || t.map((x) => /* @__PURE__ */ o(
1671
- uo,
1672
- {
1673
- borderColor: i,
1674
- iconColor: s,
1675
- type: d,
1676
- listType: r,
1677
- dark: m,
1678
- ...x,
1679
- align: u,
1680
- sx: {
1681
- bgcolor: d === "wall" ? void 0 : m ? "grey.900" : "common.white"
1682
- },
1683
- style: c === 0 && t.length > 1 ? {
1684
- borderRadius: 0,
1685
- marginRight: "-1px",
1686
- marginBottom: "-1px"
1687
- } : {}
1688
- },
1689
- x.id
1690
- ))
1691
- }
1692
- );
1693
- }
1694
- const ho = [
1695
- "align",
1696
- "cards",
1697
- "list",
1698
- "listBorder",
1699
- "listType",
1700
- "col",
1701
- "gap",
1702
- "iconColor",
1703
- "type",
1704
- "textAlign"
1705
- ], fo = _(V)`
1706
- a .card {
1707
- color: #404040;
1708
- cursor: pointer;
1709
- }
1710
- a:not(.MuiButton-root) {
1711
- color: ${({ theme: t }) => t.palette.primary.main};
1712
- &:hover,
1713
- &:active {
1714
- color: ${({ theme: t }) => t.palette.primary.main};
1715
- }
1716
- }
1717
- a:hover .card {
1718
- color: #404040;
1719
- }
1720
- `;
1721
- function go({ className: t, ...e }) {
1722
- const [n, i] = $(e, F), [r, a] = $(i, ho);
1723
- return /* @__PURE__ */ w(fo, { className: b("section--card-list", t), type: e.type, ...a, children: [
1724
- Object.keys(n).length > 0 && /* @__PURE__ */ o(A, { center: !0, ...n, className: "mb-[2.5vw]" }),
1725
- /* @__PURE__ */ o(po, { ...r, dark: !!e.dark })
1726
- ] });
1727
- }
1728
- const xo = _(go)`
1729
- .card__description {
1730
- white-space: pre-wrap;
1731
- }
1732
- .section__description {
1733
- }
1734
- .card {
1735
- /* background: inherit !important; */
1736
- }
1737
- &.dark .card-simple .card__body::before {
1738
- background: #212121 !important;
1739
- }
1740
- .card-simple .card__body::after {
1741
- background: inherit !important;
1742
- }
1743
- `;
1744
- function bo({ section: t, ...e }) {
1745
- const [{ editing: n }, i] = $(e, U), r = R(() => {
1746
- var a;
1747
- return {
1748
- ...C(i, ["listBorder", "list", "iconSize", "imageSize"]),
1749
- list: (a = i.list) == null ? void 0 : a.map((c) => {
1750
- var s, l;
1751
- return {
1752
- ...C(c, "icon", "iconColor"),
1753
- image: ["news", "simple", "default"].includes(i.type) && c.icon ? c.icon : c.image,
1754
- actions: (l = (s = c.actions) == null ? void 0 : s.map) == null ? void 0 : l.call(s, (d) => /* @__PURE__ */ o(Ot, { ...d, editing: n }, d.id)),
1755
- border: i.listBorder,
1756
- iconSize: i.iconSize,
1757
- imageSize: i.imageSize,
1758
- hoverStyle: i.hoverStyle
1759
- };
1760
- })
1761
- };
1762
- }, [i]);
1763
- return /* @__PURE__ */ o(xo, { style: n ? { pointerEvents: "none" } : {}, ...r });
1764
- }
1765
- function yo({
1766
- properties: t,
1767
- section: e,
1768
- locale: n,
1769
- dev: i
1770
- }) {
1771
- var r;
1772
- return (r = e == null ? void 0 : e.config) != null && r.componentId ? /* @__PURE__ */ o(
1773
- re,
1774
- {
1775
- instanceId: e.id,
1776
- componentId: e.config.componentId,
1777
- blockletId: e.config.blockletId,
1778
- blockletTitle: e.config.blockletTitle,
1779
- componentName: e.config.componentName,
1780
- locale: n,
1781
- properties: t,
1782
- dev: i
1783
- }
1784
- ) : /* @__PURE__ */ o(g, { textAlign: "center", py: 2, children: /* @__PURE__ */ o(P, { variant: "caption", color: "text.secondary", children: "Please select component to render" }) });
1785
- }
1786
- function wo({
1787
- src: t,
1788
- dataId: e,
1789
- isEdit: n = !1,
1790
- height: i = "100%",
1791
- onLoad: r = () => {
1792
- }
1793
- }) {
1794
- return /* @__PURE__ */ o(
1795
- xe,
1796
- {
1797
- isEdit: n,
1798
- embedId: e,
1799
- src: t,
1800
- height: i,
1801
- onLoad: () => {
1802
- r();
1803
- }
1804
- }
1805
- );
1806
- }
1807
- function vo({ dataId: t, src: e, actions: n, center: i, onLoad: r, ...a }) {
1808
- const [c, s] = $(a, F);
1809
- return /* @__PURE__ */ w(V, { ...s, children: [
1810
- Object.keys(c).length > 0 && /* @__PURE__ */ o(A, { center: i, ...c }),
1811
- /* @__PURE__ */ o(
1812
- wo,
1813
- {
1814
- dataId: t,
1815
- src: e,
1816
- onLoad: r,
1817
- height: a.iframeHeight ? `${a.iframeHeight}px` : "100%"
1818
- }
1819
- ),
1820
- /* @__PURE__ */ o(z, { actions: n, center: i })
1821
- ] });
1822
- }
1823
- const _n = {
1824
- src: "",
1825
- embedUrl: "",
1826
- title: "",
1827
- description: "",
1828
- dark: !1,
1829
- background: "",
1830
- center: !0,
1831
- config: {},
1832
- id: ""
1833
- };
1834
- function ko({ section: t, id: e, src: n, ...i }) {
1835
- const r = `${e}-${i.locale}`, [{ editing: a }, c] = $(i, U), s = G({}), l = JSON.parse(JSON.stringify(c)), { message: d } = he(r, "server"), m = fe(JSON.parse(JSON.stringify(c.config) || "{}"));
1836
- return O(() => {
1837
- d && d.onInit(() => m.current);
1838
- }, [d]), O(() => {
1839
- const u = JSON.parse(JSON.stringify(c.config) || "{}");
1840
- ge(s.current, u) || (s.current = u, d == null || d.send("config-set", u));
1841
- }, [d, c.config]), n ? /* @__PURE__ */ o(vo, { ...l, dataId: r, src: n, style: a ? { pointerEvents: "none" } : {} }) : /* @__PURE__ */ o(_o, { children: 'Please set the "src" attribute for this block' });
1842
- }
1843
- const _o = _("div")`
1844
- user-select: none;
1845
- color: #999;
1846
- padding: 8px;
1847
- height: 200px;
1848
- `, $o = [
1849
- /youtu\.be\/([^#&?]{11})/,
1850
- // youtu.be/<id>
1851
- /\?v=([^#&?]{11})/,
1852
- // ?v=<id>
1853
- /&v=([^#&?]{11})/,
1854
- // &v=<id>
1855
- /embed\/([^#&?]{11})/,
1856
- // embed/<id>
1857
- /\/v\/([^#&?]{11})/
1858
- // /v/<id>
1859
- ];
1860
- function So(t) {
1861
- var e;
1862
- if (/youtu\.?be/.test(t))
1863
- for (const n of $o) {
1864
- const i = (e = n.exec(t)) == null ? void 0 : e[1];
1865
- if (i)
1866
- return i;
1867
- }
1868
- }
1869
- function No(t) {
1870
- const e = So(t);
1871
- if (e)
1872
- return `https://youtube.com/embed/${e}`;
1873
- }
1874
- function Co({ src: t }) {
1875
- return O(() => {
1876
- import("@lottiefiles/lottie-player");
1877
- }, []), /* @__PURE__ */ o("lottie-player", { autoplay: !0, loop: !0, mode: "normal", src: t });
1878
- }
1879
- function Po(t) {
1880
- return /* @__PURE__ */ o(g, { maxHeight: 400, overflow: "hidden auto", children: /* @__PURE__ */ o(be, { ...t }) });
1881
- }
1882
- function Bo({ url: t }) {
1883
- const e = G(null), n = 495, [i, r] = T(
1884
- e.current ? e.current.offsetWidth * 0.5625 : n
1885
- ), a = E(() => {
1886
- const c = window.innerWidth > 990 ? 1 : window.innerWidth > 522 ? 1.2 : window.innerWidth > 400 ? 1.45 : 1.85, s = e.current ? e.current.offsetWidth * 0.5625 : n;
1887
- return r(Math.floor(s * c));
1888
- }, []);
1889
- return O(() => {
1890
- window.addEventListener("resize", a);
1891
- const c = window.innerWidth > 990 ? 1 : window.innerWidth > 522 ? 1.2 : window.innerWidth > 400 ? 1.45 : 1.85, s = e.current ? e.current.offsetWidth * 0.5625 : n;
1892
- return r(Math.floor(s * c)), function() {
1893
- window.removeEventListener("resize", a);
1894
- };
1895
- }, [i, a]), /* @__PURE__ */ o(
1896
- g,
1897
- {
1898
- component: "iframe",
1899
- ref: e,
1900
- title: "youtube",
1901
- width: "100%",
1902
- height: `${i}px`,
1903
- src: t,
1904
- frameBorder: "0",
1905
- allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
1906
- allowFullScreen: !0,
1907
- sx: { display: "block" }
1908
- }
1909
- );
1910
- }
1911
- const $n = {
1912
- image: "https://www.arcblock.io/static/ead0cabde7f2b7ff34db8f3e8ceca271/afc4b/builder.png",
1913
- badge: "Develop · Deploy · Run",
1914
- title: "The Future is Here: Blockchain and Decentralized Application Development",
1915
- description: "ArcBlock, your exclusive new decentralized development platform, makes developing decentralized applications, blockchain, and distributed ledger technology straightforward.",
1916
- reverse: !1,
1917
- dark: !1,
1918
- background: "",
1919
- actions: void 0,
1920
- hasImage: !0,
1921
- center: !1
1922
- }, Io = _(Me)`
1923
- .section__description {
1924
- }
1925
- `;
1926
- function Wo({
1927
- hasImage: t,
1928
- fullSizeImage: e,
1929
- boxed: n,
1930
- videoPoster: i,
1931
- imageMeta: r,
1932
- imageOptimization: a,
1933
- imageSize: c,
1934
- section: s,
1935
- ...l
1936
- }) {
1937
- var p, x;
1938
- const [{ editing: d }, m] = $({ ...l, boxed: e ? void 0 : n }, U);
1939
- let u = Ro(m.image, i, e, r, a, c);
1940
- t || (u = null);
1941
- let h = null;
1942
- return m.actions && (h = (x = (p = m.actions) == null ? void 0 : p.map) == null ? void 0 : x.call(p, (y, f) => /* @__PURE__ */ o(Ot, { ...y, editing: d }, f))), /* @__PURE__ */ o(
1943
- Io,
1944
- {
1945
- ...m,
1946
- style: d ? { pointerEvents: "none" } : {},
1947
- image: u,
1948
- fullSizeImage: t && e,
1949
- actions: h
1950
- }
1951
- );
1952
- }
1953
- function Ro(t, e, n, i, r, a) {
1954
- if (t) {
1955
- if (t.endsWith(".json"))
1956
- return /* @__PURE__ */ o(Co, { src: t });
1957
- if (t.indexOf("twitter.com") !== -1)
1958
- return /* @__PURE__ */ o(Po, { sourceType: "url", url: t });
1959
- const c = No(t);
1960
- if (c)
1961
- return /* @__PURE__ */ o(Bo, { url: c });
1962
- const { naturalWidth: s, naturalHeight: l, filename: d } = i || {};
1963
- if (tt(t))
1964
- return /* @__PURE__ */ o(
1965
- "video",
1966
- {
1967
- width: s && `${s}px`,
1968
- height: l && `${l}px`,
1969
- controls: !0,
1970
- autoPlay: !0,
1971
- muted: !0,
1972
- style: {
1973
- display: "block",
1974
- objectFit: a || "contain",
1975
- borderRadius: "8px",
1976
- width: "100%",
1977
- height: "100%"
1978
- },
1979
- poster: j(N(e), n ? 1200 : 540, r),
1980
- children: /* @__PURE__ */ o("source", { src: N(t), type: Fe(t) })
1981
- },
1982
- t
1983
- );
1984
- const m = r === "quality" ? 1 : 0.6;
1985
- return /* @__PURE__ */ o(
1986
- Nt,
1987
- {
1988
- src: N(t),
1989
- sizesAttr: {
1990
- sm: 600 * m,
1991
- md: 450 * m,
1992
- lg: 540 * m,
1993
- ...n && {
1994
- md: 900 * m,
1995
- lg: 1200 * m
1996
- }
1997
- },
1998
- width: s && `${s}px`,
1999
- height: l && `${l}px`,
2000
- alt: d ?? t,
2001
- style: { objectFit: a || "contain", display: "block", width: "100%", height: "100%" },
2002
- loading: "lazy"
2003
- }
2004
- );
2005
- }
2006
- return null;
2007
- }
2008
- const Sn = ["production", "draft"];
2009
- function Nn({ mode: t, version: e } = {}) {
2010
- const n = e && typeof e == "number" ? { mode: t, version: e } : { mode: t };
2011
- return ot.get(`/api/${nt()}/pages`, { params: n }).then((i) => i.data);
2012
- }
2013
- function Cn({ mode: t, pages: e }) {
2014
- return ot.post(`/api/${nt()}/pages/publish`, { mode: t, pages: e }).then((n) => n.data);
2015
- }
2016
- function To({
2017
- locale: t,
2018
- sort: e,
2019
- page: n,
2020
- limit: i,
2021
- mode: r
2022
- } = {}) {
2023
- return ot.get(`/api/${nt()}/pages/toc`, { params: { locale: t, sort: e, page: n, limit: i, mode: r } }).then((a) => a.data);
2024
- }
2025
- const Pn = {
2026
- style: "list",
2027
- sort: "-updatedAt"
2028
- }, gt = 20;
2029
- function jo({ style: t, sort: e, section: n, ...i }) {
2030
- const [{ editing: r, locale: a }, c] = $(i, U), [s, l] = $(c, F), [d, m] = T(), u = G(!1), h = ye(), p = de(), x = E(async () => {
2031
- if (!u.current) {
2032
- u.current = !0, h();
2033
- try {
2034
- const y = d ? Math.floor(d.list.length / gt) + 1 : 1, { list: f, total: v } = await To({ locale: a, sort: e, page: y, limit: gt });
2035
- m((k) => ({
2036
- list: ((k == null ? void 0 : k.list) ?? []).concat(f),
2037
- total: v
2038
- }));
2039
- } finally {
2040
- u.current = !1, h();
2041
- }
2042
- }
2043
- }, [d, a, e, h]);
2044
- return we(() => {
2045
- x();
2046
- }), /* @__PURE__ */ w(V, { ...l, sx: r ? { pointerEvents: "none" } : {}, children: [
2047
- Object.keys(s).length > 0 && /* @__PURE__ */ o(A, { ...s }),
2048
- d ? /* @__PURE__ */ w(J, { children: [
2049
- /* @__PURE__ */ o(lt, { container: !0, spacing: 2, justifyContent: "center", children: d == null ? void 0 : d.list.map((y) => /* @__PURE__ */ o(lt, { item: !0, xs: 12, sm: t === "card" ? 6 : 12, md: t === "card" ? 3 : 12, children: /* @__PURE__ */ w(
2050
- zo,
2051
- {
2052
- elevation: 0,
2053
- className: b(t === "card" && "style-card"),
2054
- onClick: r ? void 0 : () => p(y.slug),
2055
- children: [
2056
- !!y.image && /* @__PURE__ */ o(
2057
- Jt,
2058
- {
2059
- component: "img",
2060
- alt: "",
2061
- image: j(N(y.image), 540),
2062
- loading: "lazy"
2063
- }
2064
- ),
2065
- /* @__PURE__ */ w(Gt, { children: [
2066
- /* @__PURE__ */ o(P, { variant: "h6", component: "div", className: xt, children: y.title || y.id }),
2067
- /* @__PURE__ */ o(P, { variant: "body2", className: xt, children: y.description })
2068
- ] })
2069
- ]
2070
- }
2071
- ) }, y.id)) }),
2072
- /* @__PURE__ */ o(g, { textAlign: "center", mt: 2, children: d.total > d.list.length ? /* @__PURE__ */ o(L, { variant: "outlined", color: "secondary", onClick: x, loading: u.current, children: "More" }) : /* @__PURE__ */ o(L, { variant: "outlined", color: "secondary", disabled: !0, children: "No More" }) })
2073
- ] }) : /* @__PURE__ */ o(g, { p: 2, textAlign: "center", children: /* @__PURE__ */ o(Yt, { size: 24 }) })
2074
- ] });
2075
- }
2076
- const xt = q`
2077
- display: -webkit-box;
2078
- -webkit-box-orient: vertical;
2079
- -webkit-line-clamp: 2;
2080
- overflow: hidden;
2081
- text-overflow: ellipsis;
2082
- `, zo = _(Mt)`
2083
- border: 1px solid #e0e0e0;
2084
- background-color: transparent;
2085
- cursor: pointer;
2086
- display: flex;
2087
- color: inherit;
2088
-
2089
- > .MuiCardMedia-root {
2090
- width: 30vw;
2091
- max-height: 50vw;
2092
- }
2093
-
2094
- &.style-card {
2095
- display: block;
2096
-
2097
- > .MuiCardMedia-root {
2098
- width: 100%;
2099
- max-height: 50vw;
2100
- }
2101
- }
2102
- `, Lo = {
2103
- iframe: ko,
2104
- section: Wo,
2105
- "section-card-list": bo,
2106
- toc: jo,
2107
- "ai-runtime": Ge,
2108
- "custom-component": yo
2109
- };
2110
- function Bn({ id: t, type: e, mode: n, config: i, section: r, ...a }) {
2111
- const c = Lo[e], { getPageMetaStyle: s } = Ie(), l = R(() => {
2112
- const { height: u, ...h } = i;
2113
- return h;
2114
- }, [i]), d = R(() => {
2115
- const u = {};
2116
- return e !== "custom-component" && (u.height = i.height), u.sx = s("sx"), u;
2117
- }, [i.height, e, s]), m = c && /* @__PURE__ */ o(c, { mode: n, ...l, id: t, section: r });
2118
- return /* @__PURE__ */ o(Ye, { ...a, ...d, children: m });
2119
- }
2120
- function In(t) {
2121
- return t != null;
2122
- }
2123
- export {
2124
- Ot as A,
2125
- Bn as B,
2126
- jt as I,
2127
- vn as P,
2128
- Sn as S,
2129
- Pn as T,
2130
- wn as a,
2131
- _n as b,
2132
- $n as c,
2133
- Nn as g,
2134
- In as n,
2135
- Cn as p
2136
- };