quirk-ui 0.0.322 → 0.0.323
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/next/blocks/HeroBlock/index.js +74 -119
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { useHeroContext as
|
|
4
|
-
import { I as
|
|
5
|
-
import { usePrefersReducedMotion as
|
|
6
|
-
import { c as
|
|
1
|
+
import { jsx as e, jsxs as i, Fragment as y } from "react/jsx-runtime";
|
|
2
|
+
import { useState as $, useRef as B, useEffect as C } from "react";
|
|
3
|
+
import { useHeroContext as T } from "./HeroContext.js";
|
|
4
|
+
import { I as k } from "../../../image-BVWU7eO6.js";
|
|
5
|
+
import { usePrefersReducedMotion as P } from "../../hooks/usePrefersReducedMotion.js";
|
|
6
|
+
import { c as I } from "../../../createLucideIcon-C8GTh_Qx.js";
|
|
7
7
|
import { P as z } from "../../../play-DYgKiSaf.js";
|
|
8
8
|
import '../../../assets/index46.css';/**
|
|
9
9
|
* @license lucide-react v0.488.0 - ISC
|
|
@@ -11,138 +11,93 @@ import '../../../assets/index46.css';/**
|
|
|
11
11
|
* This source code is licensed under the ISC license.
|
|
12
12
|
* See the LICENSE file in the root directory of this source tree.
|
|
13
13
|
*/
|
|
14
|
-
const
|
|
14
|
+
const F = [
|
|
15
15
|
["rect", { x: "14", y: "4", width: "4", height: "16", rx: "1", key: "zuxfzm" }],
|
|
16
16
|
["rect", { x: "6", y: "4", width: "4", height: "16", rx: "1", key: "1okwgv" }]
|
|
17
|
-
],
|
|
18
|
-
hero:
|
|
19
|
-
container:
|
|
20
|
-
text:
|
|
21
|
-
articleDetails:
|
|
22
|
-
articleType:
|
|
23
|
-
articleCategories:
|
|
24
|
-
category:
|
|
25
|
-
number:
|
|
17
|
+
], R = I("pause", F), j = "_hero_c7i2h_1", L = "_container_c7i2h_7", S = "_text_c7i2h_36", U = "_articleDetails_c7i2h_43", E = "_articleType_c7i2h_56", H = "_articleCategories_c7i2h_69", M = "_category_c7i2h_75", V = "_number_c7i2h_90", Y = "_blog_c7i2h_117", A = "_overlay_c7i2h_141", q = "_fullBleed_c7i2h_211", G = "_split_c7i2h_305", J = "_videoControl_c7i2h_333", K = "_videoBackground_c7i2h_374", Q = "_iframe_c7i2h_375", l = {
|
|
18
|
+
hero: j,
|
|
19
|
+
container: L,
|
|
20
|
+
text: S,
|
|
21
|
+
articleDetails: U,
|
|
22
|
+
articleType: E,
|
|
23
|
+
articleCategories: H,
|
|
24
|
+
category: M,
|
|
25
|
+
number: V,
|
|
26
26
|
default: "_default_c7i2h_113",
|
|
27
|
-
blog:
|
|
28
|
-
overlay:
|
|
29
|
-
fullBleed:
|
|
30
|
-
split:
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
videoBackground: Z,
|
|
35
|
-
iframe: O
|
|
27
|
+
blog: Y,
|
|
28
|
+
overlay: A,
|
|
29
|
+
fullBleed: q,
|
|
30
|
+
split: G,
|
|
31
|
+
videoControl: J,
|
|
32
|
+
videoBackground: K,
|
|
33
|
+
iframe: Q
|
|
36
34
|
};
|
|
37
|
-
function
|
|
35
|
+
function le({
|
|
38
36
|
// heading,
|
|
39
37
|
image: r,
|
|
40
|
-
video:
|
|
38
|
+
video: c,
|
|
41
39
|
//callToAction,
|
|
42
|
-
pageData:
|
|
43
|
-
styleOptions:
|
|
40
|
+
pageData: t,
|
|
41
|
+
styleOptions: a
|
|
44
42
|
}) {
|
|
45
|
-
var
|
|
46
|
-
const n =
|
|
43
|
+
var x, w;
|
|
44
|
+
const n = P(), [_, m] = $(!n), { setIsFullbleedHeroAtTop: v } = T(), u = B(null), s = (a == null ? void 0 : a.layout) ?? "default", h = {
|
|
47
45
|
default: l.default,
|
|
48
46
|
split: l.split,
|
|
49
47
|
"full-bleed": l.fullBleed,
|
|
50
48
|
blog: l.blog
|
|
51
|
-
}[
|
|
52
|
-
|
|
49
|
+
}[s], p = (x = t == null ? void 0 : t.categories) != null && x.length ? t == null ? void 0 : t.categories[0] : null, d = (w = t == null ? void 0 : t.categories) != null && w.length ? t == null ? void 0 : t.categories[1] : null;
|
|
50
|
+
C(() => {
|
|
53
51
|
const o = () => {
|
|
54
|
-
|
|
52
|
+
v(window.scrollY === 0);
|
|
55
53
|
};
|
|
56
|
-
if (
|
|
57
|
-
return
|
|
58
|
-
}, [
|
|
54
|
+
if (s === "full-bleed" && typeof window < "u")
|
|
55
|
+
return v(!0), window.addEventListener("scroll", o), () => window.removeEventListener("scroll", o);
|
|
56
|
+
}, [s]), C(() => {
|
|
59
57
|
const o = u.current;
|
|
60
58
|
o && (n ? o.pause() : o.play());
|
|
61
59
|
}, [n]);
|
|
62
|
-
const
|
|
60
|
+
const b = () => /* @__PURE__ */ e(
|
|
63
61
|
"button",
|
|
64
62
|
{
|
|
65
|
-
title: `${
|
|
63
|
+
title: `${_ ? "Pause the video" : "Play the video"}`,
|
|
66
64
|
className: l.videoControl,
|
|
67
65
|
onClick: () => {
|
|
68
66
|
const o = u.current;
|
|
69
67
|
o && (o.paused ? (o.play().catch(() => {
|
|
70
|
-
}),
|
|
68
|
+
}), m(!0)) : (o.pause(), m(!1)));
|
|
71
69
|
},
|
|
72
|
-
children:
|
|
70
|
+
children: _ ? /* @__PURE__ */ e(R, { size: 18 }) : /* @__PURE__ */ e(z, { size: 18 })
|
|
73
71
|
}
|
|
74
|
-
)
|
|
75
|
-
|
|
76
|
-
const
|
|
77
|
-
return
|
|
78
|
-
"iframe",
|
|
79
|
-
{
|
|
80
|
-
src: o ? `${t}?autoplay=1&muted=1&loop=1&background=1` : `${t}?autoplay=1&mute=1&loop=1&playlist=${m(
|
|
81
|
-
t
|
|
82
|
-
)}`,
|
|
83
|
-
allow: "autoplay; fullscreen",
|
|
84
|
-
allowFullScreen: !0
|
|
85
|
-
}
|
|
86
|
-
) }) : /* @__PURE__ */ s("div", { className: l.videoWrapper, children: [
|
|
87
|
-
/* @__PURE__ */ e(f, {}),
|
|
88
|
-
/* @__PURE__ */ e(
|
|
89
|
-
"video",
|
|
90
|
-
{
|
|
91
|
-
ref: u,
|
|
92
|
-
src: t,
|
|
93
|
-
autoPlay: !n,
|
|
94
|
-
loop: !0,
|
|
95
|
-
muted: !0,
|
|
96
|
-
playsInline: !0,
|
|
97
|
-
poster: (r == null ? void 0 : r.imageUrl) || void 0
|
|
98
|
-
}
|
|
99
|
-
)
|
|
100
|
-
] });
|
|
101
|
-
};
|
|
102
|
-
function m(o) {
|
|
103
|
-
const d = o.match(/(?:youtube\.com\/.*v=|youtu\.be\/)([^&?/]+)/);
|
|
104
|
-
return (d == null ? void 0 : d[1]) || "";
|
|
72
|
+
);
|
|
73
|
+
function N(o) {
|
|
74
|
+
const f = o.match(/(?:youtube\.com\/.*v=|youtu\.be\/)([^&?/]+)/);
|
|
75
|
+
return (f == null ? void 0 : f[1]) || "";
|
|
105
76
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
priority: !0
|
|
114
|
-
}
|
|
115
|
-
) }) : null;
|
|
116
|
-
if (i === "split")
|
|
117
|
-
return /* @__PURE__ */ e("section", { className: `${l.hero} ${l.split}`, children: /* @__PURE__ */ s("article", { className: l.container, children: [
|
|
118
|
-
/* @__PURE__ */ e("div", { className: l.text, children: /* @__PURE__ */ e("div", {}) }),
|
|
119
|
-
t ? /* @__PURE__ */ e(x, {}) : /* @__PURE__ */ e(k, {})
|
|
120
|
-
] }) });
|
|
121
|
-
if (i === "default")
|
|
122
|
-
return /* @__PURE__ */ e("section", { className: `${l.hero} ${y}`, children: /* @__PURE__ */ s("article", { className: l.container, children: [
|
|
123
|
-
t ? /* @__PURE__ */ e(x, {}) : /* @__PURE__ */ e(k, {}),
|
|
124
|
-
/* @__PURE__ */ e("div", { className: l.text, children: /* @__PURE__ */ e("div", {}) })
|
|
125
|
-
] }) });
|
|
126
|
-
if (i === "full-bleed")
|
|
127
|
-
return /* @__PURE__ */ e("section", { className: `${l.hero} ${y}`, children: /* @__PURE__ */ s("article", { className: l.container, children: [
|
|
128
|
-
t ? t.includes("vimeo.com") || t.includes("youtube.com") || t.includes("youtu.be") ? /* @__PURE__ */ e("div", { className: l.videoBackground, children: /* @__PURE__ */ e(
|
|
77
|
+
if (s === "split")
|
|
78
|
+
return /* @__PURE__ */ e("section", { className: `${l.hero} ${l.split}`, children: /* @__PURE__ */ e("article", { className: l.container, children: /* @__PURE__ */ e("div", { className: l.text, children: /* @__PURE__ */ e("div", {}) }) }) });
|
|
79
|
+
if (s === "default")
|
|
80
|
+
return /* @__PURE__ */ e("section", { className: `${l.hero} ${h}`, children: /* @__PURE__ */ e("article", { className: l.container, children: /* @__PURE__ */ e("div", { className: l.text, children: /* @__PURE__ */ e("div", {}) }) }) });
|
|
81
|
+
if (s === "full-bleed")
|
|
82
|
+
return /* @__PURE__ */ e("section", { className: `${l.hero} ${h}`, children: /* @__PURE__ */ i("article", { className: l.container, children: [
|
|
83
|
+
c ? c.includes("vimeo.com") || c.includes("youtube.com") || c.includes("youtu.be") ? /* @__PURE__ */ e("div", { className: l.videoBackground, children: /* @__PURE__ */ e(
|
|
129
84
|
"iframe",
|
|
130
85
|
{
|
|
131
|
-
src:
|
|
132
|
-
|
|
86
|
+
src: c.includes("vimeo.com") ? `${c}?autoplay=1&muted=1&loop=1&background=1` : `${c}?autoplay=1&mute=1&loop=1&playlist=${N(
|
|
87
|
+
c
|
|
133
88
|
)}`,
|
|
134
89
|
className: l.iframe,
|
|
135
90
|
allow: "autoplay; fullscreen",
|
|
136
91
|
allowFullScreen: !0
|
|
137
92
|
}
|
|
138
|
-
) }) : /* @__PURE__ */
|
|
139
|
-
/* @__PURE__ */ e(
|
|
93
|
+
) }) : /* @__PURE__ */ i(y, { children: [
|
|
94
|
+
/* @__PURE__ */ e(b, {}),
|
|
140
95
|
/* @__PURE__ */ e(
|
|
141
96
|
"video",
|
|
142
97
|
{
|
|
143
98
|
ref: u,
|
|
144
99
|
className: l.videoBackground,
|
|
145
|
-
src:
|
|
100
|
+
src: c,
|
|
146
101
|
autoPlay: !n,
|
|
147
102
|
loop: !0,
|
|
148
103
|
muted: !0,
|
|
@@ -151,7 +106,7 @@ function oe({
|
|
|
151
106
|
}
|
|
152
107
|
)
|
|
153
108
|
] }) : /* @__PURE__ */ e(
|
|
154
|
-
|
|
109
|
+
k,
|
|
155
110
|
{
|
|
156
111
|
src: (r == null ? void 0 : r.imageUrl) ?? "",
|
|
157
112
|
alt: (r == null ? void 0 : r.asset.altText) || (r == null ? void 0 : r.asset.description) || "Card image",
|
|
@@ -164,26 +119,26 @@ function oe({
|
|
|
164
119
|
),
|
|
165
120
|
/* @__PURE__ */ e("div", { className: l.overlay, children: /* @__PURE__ */ e("div", { className: l.text, children: /* @__PURE__ */ e("div", {}) }) })
|
|
166
121
|
] }) });
|
|
167
|
-
if (
|
|
168
|
-
return /* @__PURE__ */ e("section", { className: `${l.hero} ${
|
|
169
|
-
|
|
122
|
+
if (s === "blog")
|
|
123
|
+
return /* @__PURE__ */ e("section", { className: `${l.hero} ${h}`, children: /* @__PURE__ */ i("article", { className: l.container, children: [
|
|
124
|
+
c ? c.includes("vimeo.com") || c.includes("youtube.com") || c.includes("youtu.be") ? /* @__PURE__ */ e("div", { className: l.videoBackground, children: /* @__PURE__ */ e(
|
|
170
125
|
"iframe",
|
|
171
126
|
{
|
|
172
|
-
src:
|
|
173
|
-
|
|
127
|
+
src: c.includes("vimeo.com") ? `${c}?autoplay=1&muted=1&loop=1&background=1` : `${c}?autoplay=1&mute=1&loop=1&playlist=${N(
|
|
128
|
+
c
|
|
174
129
|
)}`,
|
|
175
130
|
className: l.iframe,
|
|
176
131
|
allow: "autoplay; fullscreen",
|
|
177
132
|
allowFullScreen: !0
|
|
178
133
|
}
|
|
179
|
-
) }) : /* @__PURE__ */
|
|
180
|
-
/* @__PURE__ */ e(
|
|
134
|
+
) }) : /* @__PURE__ */ i(y, { children: [
|
|
135
|
+
/* @__PURE__ */ e(b, {}),
|
|
181
136
|
/* @__PURE__ */ e(
|
|
182
137
|
"video",
|
|
183
138
|
{
|
|
184
139
|
ref: u,
|
|
185
140
|
className: l.videoBackground,
|
|
186
|
-
src:
|
|
141
|
+
src: c,
|
|
187
142
|
autoPlay: !n,
|
|
188
143
|
loop: !0,
|
|
189
144
|
muted: !0,
|
|
@@ -192,7 +147,7 @@ function oe({
|
|
|
192
147
|
}
|
|
193
148
|
)
|
|
194
149
|
] }) : /* @__PURE__ */ e(
|
|
195
|
-
|
|
150
|
+
k,
|
|
196
151
|
{
|
|
197
152
|
src: (r == null ? void 0 : r.imageUrl) ?? "",
|
|
198
153
|
alt: (r == null ? void 0 : r.asset.altText) || (r == null ? void 0 : r.asset.description) || "Card image",
|
|
@@ -203,21 +158,21 @@ function oe({
|
|
|
203
158
|
sizes: "(min-width: 500px) 500px, 100vw"
|
|
204
159
|
}
|
|
205
160
|
),
|
|
206
|
-
/* @__PURE__ */ e("div", { className: l.overlay, children: /* @__PURE__ */ e("div", { className: l.text, children: /* @__PURE__ */ e("div", { children:
|
|
207
|
-
|
|
208
|
-
/* @__PURE__ */
|
|
209
|
-
|
|
210
|
-
|
|
161
|
+
/* @__PURE__ */ e("div", { className: l.overlay, children: /* @__PURE__ */ e("div", { className: l.text, children: /* @__PURE__ */ e("div", { children: t && /* @__PURE__ */ i("div", { className: l.articleDetails, children: [
|
|
162
|
+
t.articleType && /* @__PURE__ */ e("div", { className: l.articleType, children: t.articleType }),
|
|
163
|
+
/* @__PURE__ */ i("div", { className: l.articleCategories, children: [
|
|
164
|
+
p && /* @__PURE__ */ e("span", { className: l.category, children: p.title }),
|
|
165
|
+
d && d.title.toLowerCase() !== "library" && !d.slug.current.includes(
|
|
211
166
|
"keywords"
|
|
212
|
-
) && /* @__PURE__ */ e("span", { className: l.category, children:
|
|
167
|
+
) && /* @__PURE__ */ e("span", { className: l.category, children: d.title })
|
|
213
168
|
] }),
|
|
214
|
-
|
|
215
|
-
/* @__PURE__ */ e("span", { className: l.number, children:
|
|
169
|
+
t.timeToRead && /* @__PURE__ */ e(y, { children: /* @__PURE__ */ i("span", { children: [
|
|
170
|
+
/* @__PURE__ */ e("span", { className: l.number, children: t.timeToRead }),
|
|
216
171
|
"min read"
|
|
217
172
|
] }) })
|
|
218
173
|
] }) }) }) })
|
|
219
174
|
] }) });
|
|
220
175
|
}
|
|
221
176
|
export {
|
|
222
|
-
|
|
177
|
+
le as HeroBlock
|
|
223
178
|
};
|