@stackshift-ui/header 6.0.7 → 6.0.8-beta.1
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/header.js +1 -572
- package/dist/header.mjs +1 -6
- package/dist/header_a.js +1 -174
- package/dist/header_a.mjs +1 -7
- package/dist/header_b.js +1 -150
- package/dist/header_b.mjs +1 -7
- package/dist/header_c.js +1 -90
- package/dist/header_c.mjs +1 -7
- package/dist/header_d.js +1 -124
- package/dist/header_d.mjs +1 -7
- package/dist/header_e.js +1 -89
- package/dist/header_e.mjs +1 -7
- package/dist/index.js +1 -591
- package/dist/index.mjs +1 -27
- package/dist/types.js +1 -18
- package/package.json +14 -14
- package/dist/chunk-35OWV2LA.mjs +0 -89
- package/dist/chunk-3SLHYG4E.mjs +0 -33
- package/dist/chunk-534QIB7N.mjs +0 -65
- package/dist/chunk-6DDP6YE5.mjs +0 -54
- package/dist/chunk-OIGPQF35.mjs +0 -139
- package/dist/chunk-QKD3MWOT.mjs +0 -115
package/dist/types.js
CHANGED
|
@@ -1,18 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __copyProps = (to, from, except, desc) => {
|
|
7
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
-
for (let key of __getOwnPropNames(from))
|
|
9
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
-
}
|
|
12
|
-
return to;
|
|
13
|
-
};
|
|
14
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
-
|
|
16
|
-
// src/types.ts
|
|
17
|
-
var types_exports = {};
|
|
18
|
-
module.exports = __toCommonJS(types_exports);
|
|
1
|
+
"use strict";var l=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var o=Object.prototype.hasOwnProperty;var g=(n,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of a(t))!o.call(n,e)&&e!==r&&l(n,e,{get:()=>t[e],enumerable:!(i=s(t,e))||i.enumerable});return n};var u=n=>g(l({},"__esModule",{value:!0}),n);var c={};module.exports=u(c);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stackshift-ui/header",
|
|
3
3
|
"description": "",
|
|
4
|
-
"version": "6.0.
|
|
4
|
+
"version": "6.0.8-beta.1",
|
|
5
5
|
"private": false,
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"main": "./dist/index.js",
|
|
@@ -29,27 +29,27 @@
|
|
|
29
29
|
"typescript": "^5.6.2",
|
|
30
30
|
"vite-tsconfig-paths": "^5.0.1",
|
|
31
31
|
"vitest": "^2.1.1",
|
|
32
|
-
"@stackshift-ui/typescript-config": "6.0.
|
|
33
|
-
"@stackshift-ui/eslint-config": "6.0.
|
|
32
|
+
"@stackshift-ui/typescript-config": "6.0.3-beta.1",
|
|
33
|
+
"@stackshift-ui/eslint-config": "6.0.3-beta.1"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@stackshift-ui/
|
|
37
|
-
"@stackshift-ui/
|
|
38
|
-
"@stackshift-ui/
|
|
39
|
-
"@stackshift-ui/
|
|
40
|
-
"@stackshift-ui/
|
|
41
|
-
"@stackshift-ui/
|
|
42
|
-
"@stackshift-ui/
|
|
43
|
-
"@stackshift-ui/
|
|
44
|
-
"@stackshift-ui/
|
|
45
|
-
"@stackshift-ui/container": "6.0.
|
|
36
|
+
"@stackshift-ui/button": "6.0.4-beta.1",
|
|
37
|
+
"@stackshift-ui/scripts": "6.0.3-beta.1",
|
|
38
|
+
"@stackshift-ui/heading": "6.0.4-beta.1",
|
|
39
|
+
"@stackshift-ui/signin-signup": "6.0.7-beta.1",
|
|
40
|
+
"@stackshift-ui/section": "6.0.4-beta.1",
|
|
41
|
+
"@stackshift-ui/flex": "6.0.4-beta.1",
|
|
42
|
+
"@stackshift-ui/image": "6.0.4-beta.1",
|
|
43
|
+
"@stackshift-ui/system": "6.0.4-beta.1",
|
|
44
|
+
"@stackshift-ui/text": "6.0.4-beta.1",
|
|
45
|
+
"@stackshift-ui/container": "6.0.4-beta.1"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"@types/react": "16.8 - 19",
|
|
49
49
|
"next": "10 - 14",
|
|
50
50
|
"react": "16.8 - 19",
|
|
51
51
|
"react-dom": "16.8 - 19",
|
|
52
|
-
"@stackshift-ui/system": ">=
|
|
52
|
+
"@stackshift-ui/system": ">=6.0.4-beta.1"
|
|
53
53
|
},
|
|
54
54
|
"peerDependenciesMeta": {
|
|
55
55
|
"next": {
|
package/dist/chunk-35OWV2LA.mjs
DELETED
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
// src/header_d.tsx
|
|
2
|
-
import { Button } from "@stackshift-ui/button";
|
|
3
|
-
import { Container } from "@stackshift-ui/container";
|
|
4
|
-
import { Flex } from "@stackshift-ui/flex";
|
|
5
|
-
import { Heading } from "@stackshift-ui/heading";
|
|
6
|
-
import { Image } from "@stackshift-ui/image";
|
|
7
|
-
import { Section } from "@stackshift-ui/section";
|
|
8
|
-
import { Text } from "@stackshift-ui/text";
|
|
9
|
-
import React from "react";
|
|
10
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
-
function Header_D({
|
|
12
|
-
title,
|
|
13
|
-
description,
|
|
14
|
-
primaryButton,
|
|
15
|
-
secondaryButton,
|
|
16
|
-
mainImage
|
|
17
|
-
}) {
|
|
18
|
-
return /* @__PURE__ */ jsx(Section, { className: "py-20 bg-background", children: /* @__PURE__ */ jsx(Container, { maxWidth: 1280, children: /* @__PURE__ */ jsxs(Flex, { align: "center", className: "flex-col lg:flex-row", gap: 4, children: [
|
|
19
|
-
/* @__PURE__ */ jsx(Flex, { align: "center", className: "w-full basis-1/2", direction: "col", children: /* @__PURE__ */ jsxs(Container, { className: "mx-auto items-center text-center lg:text-left", maxWidth: "md", children: [
|
|
20
|
-
/* @__PURE__ */ jsx(TitleAndDescription, { title, description }),
|
|
21
|
-
/* @__PURE__ */ jsx(Buttons, { primaryButton, secondaryButton })
|
|
22
|
-
] }) }),
|
|
23
|
-
/* @__PURE__ */ jsx(MainImage, { mainImage })
|
|
24
|
-
] }) }) });
|
|
25
|
-
}
|
|
26
|
-
function TitleAndDescription({ title, description }) {
|
|
27
|
-
return /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
|
28
|
-
title ? /* @__PURE__ */ jsx(Heading, { fontSize: "3xl", className: "mb-3", type: "h1", children: title }) : null,
|
|
29
|
-
description ? /* @__PURE__ */ jsx(Text, { className: "my-6", muted: true, children: description }) : null
|
|
30
|
-
] });
|
|
31
|
-
}
|
|
32
|
-
function Buttons({
|
|
33
|
-
primaryButton,
|
|
34
|
-
secondaryButton
|
|
35
|
-
}) {
|
|
36
|
-
var _a, _b;
|
|
37
|
-
return /* @__PURE__ */ jsxs(
|
|
38
|
-
Flex,
|
|
39
|
-
{
|
|
40
|
-
align: "center",
|
|
41
|
-
className: "flex items-center justify-center lg:justify-start gap-2 flex-col md:flex-row",
|
|
42
|
-
gap: 2,
|
|
43
|
-
children: [
|
|
44
|
-
(primaryButton == null ? void 0 : primaryButton.label) ? /* @__PURE__ */ jsx(
|
|
45
|
-
Button,
|
|
46
|
-
{
|
|
47
|
-
as: "link",
|
|
48
|
-
link: primaryButton,
|
|
49
|
-
ariaLabel: (_a = primaryButton == null ? void 0 : primaryButton.ariaLabel) != null ? _a : primaryButton == null ? void 0 : primaryButton.label,
|
|
50
|
-
variant: "solid",
|
|
51
|
-
className: "bg-primary hover:bg-primary/50 rounded-global px-6 py-3 text-white",
|
|
52
|
-
children: primaryButton.label
|
|
53
|
-
}
|
|
54
|
-
) : null,
|
|
55
|
-
(secondaryButton == null ? void 0 : secondaryButton.label) ? /* @__PURE__ */ jsx(
|
|
56
|
-
Button,
|
|
57
|
-
{
|
|
58
|
-
as: "link",
|
|
59
|
-
link: secondaryButton,
|
|
60
|
-
ariaLabel: (_b = secondaryButton.ariaLabel) != null ? _b : secondaryButton == null ? void 0 : secondaryButton.label,
|
|
61
|
-
variant: "solid",
|
|
62
|
-
className: "bg-secondary hover:bg-secondary/50 rounded-global px-6 py-3",
|
|
63
|
-
children: secondaryButton.label
|
|
64
|
-
}
|
|
65
|
-
) : null
|
|
66
|
-
]
|
|
67
|
-
}
|
|
68
|
-
);
|
|
69
|
-
}
|
|
70
|
-
function MainImage({ mainImage }) {
|
|
71
|
-
var _a;
|
|
72
|
-
if (!(mainImage == null ? void 0 : mainImage.image)) return null;
|
|
73
|
-
return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsx(
|
|
74
|
-
Image,
|
|
75
|
-
{
|
|
76
|
-
alt: (_a = mainImage.alt) != null ? _a : "header-main-image",
|
|
77
|
-
className: "rounded-md",
|
|
78
|
-
height: 700,
|
|
79
|
-
sizes: "100vw",
|
|
80
|
-
src: `${mainImage == null ? void 0 : mainImage.image}`,
|
|
81
|
-
style: { objectFit: "contain" },
|
|
82
|
-
width: 1050
|
|
83
|
-
}
|
|
84
|
-
) });
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
export {
|
|
88
|
-
Header_D
|
|
89
|
-
};
|
package/dist/chunk-3SLHYG4E.mjs
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
// src/header.tsx
|
|
2
|
-
import { lazy } from "react";
|
|
3
|
-
import { jsx } from "react/jsx-runtime";
|
|
4
|
-
var Variants = {
|
|
5
|
-
variant_a: lazy(() => import("./header_a.mjs")),
|
|
6
|
-
variant_b: lazy(() => import("./header_b.mjs")),
|
|
7
|
-
variant_c: lazy(() => import("./header_c.mjs")),
|
|
8
|
-
variant_d: lazy(() => import("./header_d.mjs")),
|
|
9
|
-
variant_e: lazy(() => import("./header_e.mjs"))
|
|
10
|
-
};
|
|
11
|
-
var displayName = "Header";
|
|
12
|
-
var Header = ({ data }) => {
|
|
13
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
|
|
14
|
-
const variant = data == null ? void 0 : data.variant;
|
|
15
|
-
const Variant = variant && Variants[variant];
|
|
16
|
-
const props = {
|
|
17
|
-
mainImage: (_b = (_a = data == null ? void 0 : data.variants) == null ? void 0 : _a.mainImage) != null ? _b : void 0,
|
|
18
|
-
images: (_d = (_c = data == null ? void 0 : data.variants) == null ? void 0 : _c.images) != null ? _d : void 0,
|
|
19
|
-
title: (_f = (_e = data == null ? void 0 : data.variants) == null ? void 0 : _e.title) != null ? _f : void 0,
|
|
20
|
-
description: (_h = (_g = data == null ? void 0 : data.variants) == null ? void 0 : _g.description) != null ? _h : void 0,
|
|
21
|
-
primaryButton: (_j = (_i = data == null ? void 0 : data.variants) == null ? void 0 : _i.primaryButton) != null ? _j : void 0,
|
|
22
|
-
secondaryButton: (_l = (_k = data == null ? void 0 : data.variants) == null ? void 0 : _k.secondaryButton) != null ? _l : void 0,
|
|
23
|
-
videoLink: (_n = (_m = data == null ? void 0 : data.variants) == null ? void 0 : _m.youtubeLink) != null ? _n : void 0,
|
|
24
|
-
formLinks: (_p = (_o = data == null ? void 0 : data.variants) == null ? void 0 : _o.formLinks) != null ? _p : void 0,
|
|
25
|
-
form: (_r = (_q = data == null ? void 0 : data.variants) == null ? void 0 : _q.form) != null ? _r : void 0
|
|
26
|
-
};
|
|
27
|
-
return Variant ? /* @__PURE__ */ jsx(Variant, { ...props }) : null;
|
|
28
|
-
};
|
|
29
|
-
Header.displayName = displayName;
|
|
30
|
-
|
|
31
|
-
export {
|
|
32
|
-
Header
|
|
33
|
-
};
|
package/dist/chunk-534QIB7N.mjs
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
// src/header_c.tsx
|
|
2
|
-
import { Button } from "@stackshift-ui/button";
|
|
3
|
-
import { Container } from "@stackshift-ui/container";
|
|
4
|
-
import { Flex } from "@stackshift-ui/flex";
|
|
5
|
-
import { Heading } from "@stackshift-ui/heading";
|
|
6
|
-
import { Section } from "@stackshift-ui/section";
|
|
7
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
function Header_C({
|
|
9
|
-
videoLink,
|
|
10
|
-
title,
|
|
11
|
-
primaryButton,
|
|
12
|
-
secondaryButton
|
|
13
|
-
}) {
|
|
14
|
-
let videoLinkId;
|
|
15
|
-
if (videoLink) {
|
|
16
|
-
if (videoLink.includes("embed")) {
|
|
17
|
-
videoLinkId = videoLink.split("/")[4];
|
|
18
|
-
} else {
|
|
19
|
-
videoLinkId = videoLink.split("/watch?v=")[1] || videoLink.split("/")[3];
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
return /* @__PURE__ */ jsx(Section, { className: "py-20 md:py-52 bg-background", children: /* @__PURE__ */ jsxs(Container, { maxWidth: 1280, children: [
|
|
23
|
-
/* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto mb-12 text-center md:mb-20", children: [
|
|
24
|
-
title && /* @__PURE__ */ jsx(Heading, { fontSize: "3xl", className: "mb-10", children: title }),
|
|
25
|
-
/* @__PURE__ */ jsx(Buttons, { primaryButton, secondaryButton })
|
|
26
|
-
] }),
|
|
27
|
-
/* @__PURE__ */ jsx("div", { className: "md:mx-20 lg:mx-60 xl:mx-60", children: videoLinkId && /* @__PURE__ */ jsx(VideoPlayer, { videoLinkId, title }) })
|
|
28
|
-
] }) });
|
|
29
|
-
}
|
|
30
|
-
function VideoPlayer({ videoLinkId, title }) {
|
|
31
|
-
return /* @__PURE__ */ jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsx(
|
|
32
|
-
"iframe",
|
|
33
|
-
{
|
|
34
|
-
"aria-label": "Show Video Frame",
|
|
35
|
-
className: "w-full h-full border-4 rounded-3xl border-primary",
|
|
36
|
-
src: `https://www.youtube.com/embed/${videoLinkId}`,
|
|
37
|
-
srcDoc: `<style>*{padding:0;margin:0;overflow:hidden;border-radius:24px}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=${`https://www.youtube.com/embed/${videoLinkId}`}><img src=${`https://i.ytimg.com/vi_webp/${videoLinkId}/maxresdefault.webp`} alt=${title} loading="lazy" /><span>\u25B6</span></a>`,
|
|
38
|
-
loading: "lazy",
|
|
39
|
-
allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
|
|
40
|
-
allowFullScreen: true
|
|
41
|
-
}
|
|
42
|
-
) });
|
|
43
|
-
}
|
|
44
|
-
function Buttons({
|
|
45
|
-
primaryButton,
|
|
46
|
-
secondaryButton
|
|
47
|
-
}) {
|
|
48
|
-
return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, justify: "center", className: "flex-col lg:flex-row", children: [
|
|
49
|
-
(primaryButton == null ? void 0 : primaryButton.label) && /* @__PURE__ */ jsx(Button, { as: "link", ariaLabel: primaryButton == null ? void 0 : primaryButton.label, link: primaryButton, children: primaryButton == null ? void 0 : primaryButton.label }),
|
|
50
|
-
(secondaryButton == null ? void 0 : secondaryButton.label) && /* @__PURE__ */ jsx(
|
|
51
|
-
Button,
|
|
52
|
-
{
|
|
53
|
-
as: "link",
|
|
54
|
-
ariaLabel: secondaryButton == null ? void 0 : secondaryButton.label,
|
|
55
|
-
link: secondaryButton,
|
|
56
|
-
className: "bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-3 py-4",
|
|
57
|
-
children: secondaryButton == null ? void 0 : secondaryButton.label
|
|
58
|
-
}
|
|
59
|
-
)
|
|
60
|
-
] });
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
export {
|
|
64
|
-
Header_C
|
|
65
|
-
};
|
package/dist/chunk-6DDP6YE5.mjs
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
// src/header_e.tsx
|
|
2
|
-
import { Button } from "@stackshift-ui/button";
|
|
3
|
-
import { Container } from "@stackshift-ui/container";
|
|
4
|
-
import { Flex } from "@stackshift-ui/flex";
|
|
5
|
-
import { Heading } from "@stackshift-ui/heading";
|
|
6
|
-
import { Section } from "@stackshift-ui/section";
|
|
7
|
-
import { SigninSignup_A } from "@stackshift-ui/signin-signup";
|
|
8
|
-
import { Text } from "@stackshift-ui/text";
|
|
9
|
-
import React from "react";
|
|
10
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
-
function Header_E({
|
|
12
|
-
title,
|
|
13
|
-
description,
|
|
14
|
-
primaryButton,
|
|
15
|
-
secondaryButton,
|
|
16
|
-
formLinks,
|
|
17
|
-
form
|
|
18
|
-
}) {
|
|
19
|
-
return /* @__PURE__ */ jsx(Section, { className: "relative py-20 bg-background", children: /* @__PURE__ */ jsx(Container, { maxWidth: 1280, children: /* @__PURE__ */ jsxs(Flex, { align: "center", className: "flex-col lg:flex-row", gap: 4, children: [
|
|
20
|
-
/* @__PURE__ */ jsx(Flex, { align: "center", direction: "col", className: "w-full basis-1/2", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto text-center lg:text-left", children: [
|
|
21
|
-
/* @__PURE__ */ jsx(TitleAndDescription, { title, description }),
|
|
22
|
-
/* @__PURE__ */ jsx(Buttons, { primaryButton, secondaryButton })
|
|
23
|
-
] }) }),
|
|
24
|
-
/* @__PURE__ */ jsx("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ jsx("div", { className: "max-w-sm mx-auto text-center", children: /* @__PURE__ */ jsx(SigninSignup_A, { form, formLinks }) }) })
|
|
25
|
-
] }) }) });
|
|
26
|
-
}
|
|
27
|
-
function TitleAndDescription({ title, description }) {
|
|
28
|
-
return /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
|
29
|
-
title && /* @__PURE__ */ jsx(Heading, { fontSize: "3xl", className: "mb-3", children: title }),
|
|
30
|
-
description && /* @__PURE__ */ jsx(Text, { muted: true, className: "my-6", children: description })
|
|
31
|
-
] });
|
|
32
|
-
}
|
|
33
|
-
function Buttons({
|
|
34
|
-
primaryButton,
|
|
35
|
-
secondaryButton
|
|
36
|
-
}) {
|
|
37
|
-
return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, className: "flex-col md:flex-row justify-center lg:justify-start", children: [
|
|
38
|
-
(primaryButton == null ? void 0 : primaryButton.label) && /* @__PURE__ */ jsx(Button, { as: "link", link: primaryButton, ariaLabel: primaryButton == null ? void 0 : primaryButton.label, children: primaryButton == null ? void 0 : primaryButton.label }),
|
|
39
|
-
(secondaryButton == null ? void 0 : secondaryButton.label) && /* @__PURE__ */ jsx(
|
|
40
|
-
Button,
|
|
41
|
-
{
|
|
42
|
-
as: "link",
|
|
43
|
-
link: secondaryButton,
|
|
44
|
-
className: "bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-6 py-3",
|
|
45
|
-
ariaLabel: secondaryButton == null ? void 0 : secondaryButton.label,
|
|
46
|
-
children: secondaryButton == null ? void 0 : secondaryButton.label
|
|
47
|
-
}
|
|
48
|
-
)
|
|
49
|
-
] });
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
export {
|
|
53
|
-
Header_E
|
|
54
|
-
};
|
package/dist/chunk-OIGPQF35.mjs
DELETED
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
// src/header_a.tsx
|
|
2
|
-
import { Button } from "@stackshift-ui/button";
|
|
3
|
-
import { Container } from "@stackshift-ui/container";
|
|
4
|
-
import { Flex } from "@stackshift-ui/flex";
|
|
5
|
-
import { Heading } from "@stackshift-ui/heading";
|
|
6
|
-
import { Image } from "@stackshift-ui/image";
|
|
7
|
-
import { Section } from "@stackshift-ui/section";
|
|
8
|
-
import { Text } from "@stackshift-ui/text";
|
|
9
|
-
import React from "react";
|
|
10
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
-
function Header_A({
|
|
12
|
-
mainImage,
|
|
13
|
-
title,
|
|
14
|
-
description,
|
|
15
|
-
primaryButton,
|
|
16
|
-
secondaryButton
|
|
17
|
-
}) {
|
|
18
|
-
return /* @__PURE__ */ jsx(Section, { className: "py-20 bg-background", children: /* @__PURE__ */ jsx(Container, { maxWidth: 1280, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, className: "flex-col lg:flex-row", children: [
|
|
19
|
-
/* @__PURE__ */ jsx(Flex, { align: "center", direction: "col", className: "w-full basis-1/2", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto text-center lg:text-left", children: [
|
|
20
|
-
/* @__PURE__ */ jsx(TitleAndDescription, { title, description }),
|
|
21
|
-
/* @__PURE__ */ jsx(Buttons, { primaryButton, secondaryButton })
|
|
22
|
-
] }) }),
|
|
23
|
-
/* @__PURE__ */ jsx(MainImage, { mainImage })
|
|
24
|
-
] }) }) });
|
|
25
|
-
}
|
|
26
|
-
function TitleAndDescription({ title, description }) {
|
|
27
|
-
return /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
|
28
|
-
title && /* @__PURE__ */ jsx(Heading, { fontSize: "3xl", className: "mb-3", children: title }),
|
|
29
|
-
description && /* @__PURE__ */ jsx(Text, { muted: true, className: "my-6", children: description })
|
|
30
|
-
] });
|
|
31
|
-
}
|
|
32
|
-
function Buttons({
|
|
33
|
-
primaryButton,
|
|
34
|
-
secondaryButton
|
|
35
|
-
}) {
|
|
36
|
-
return /* @__PURE__ */ jsxs(
|
|
37
|
-
Flex,
|
|
38
|
-
{
|
|
39
|
-
align: "center",
|
|
40
|
-
justify: "center",
|
|
41
|
-
gap: 2,
|
|
42
|
-
direction: "col",
|
|
43
|
-
className: "lg:justify-start md:flex-row",
|
|
44
|
-
children: [
|
|
45
|
-
(primaryButton == null ? void 0 : primaryButton.label) && /* @__PURE__ */ jsx(Button, { as: "link", link: primaryButton, ariaLabel: primaryButton == null ? void 0 : primaryButton.label, children: primaryButton == null ? void 0 : primaryButton.label }),
|
|
46
|
-
(secondaryButton == null ? void 0 : secondaryButton.label) && /* @__PURE__ */ jsx(
|
|
47
|
-
Button,
|
|
48
|
-
{
|
|
49
|
-
as: "link",
|
|
50
|
-
link: secondaryButton,
|
|
51
|
-
className: "bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-3 py-4",
|
|
52
|
-
ariaLabel: secondaryButton == null ? void 0 : secondaryButton.label,
|
|
53
|
-
children: secondaryButton == null ? void 0 : secondaryButton.label
|
|
54
|
-
}
|
|
55
|
-
)
|
|
56
|
-
]
|
|
57
|
-
}
|
|
58
|
-
);
|
|
59
|
-
}
|
|
60
|
-
function MainImage({ mainImage }) {
|
|
61
|
-
var _a;
|
|
62
|
-
if (!(mainImage == null ? void 0 : mainImage.image)) return null;
|
|
63
|
-
return /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-md", children: [
|
|
64
|
-
/* @__PURE__ */ jsx(
|
|
65
|
-
Image,
|
|
66
|
-
{
|
|
67
|
-
className: "overflow-hidden rounded-md object-cover md:rounded-br-none lg:h-[448px] relative z-10",
|
|
68
|
-
src: `${mainImage.image}`,
|
|
69
|
-
sizes: "(min-width: 520px) 448px, 90vw",
|
|
70
|
-
width: 448,
|
|
71
|
-
height: 448,
|
|
72
|
-
alt: (_a = mainImage.alt) != null ? _a : "header-main-image"
|
|
73
|
-
}
|
|
74
|
-
),
|
|
75
|
-
/* @__PURE__ */ jsx(DecorativeImages, {})
|
|
76
|
-
] });
|
|
77
|
-
}
|
|
78
|
-
function DecorativeImages() {
|
|
79
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
80
|
-
/* @__PURE__ */ jsx(
|
|
81
|
-
ImageElement,
|
|
82
|
-
{
|
|
83
|
-
src: "/assets/elements/webriq-blue-dark-up.png",
|
|
84
|
-
alt: "webriq-blue-dark-up-mainImage-element",
|
|
85
|
-
className: "absolute hidden md:block",
|
|
86
|
-
style: { top: "-2rem", right: "3rem", zIndex: 2 },
|
|
87
|
-
width: 112,
|
|
88
|
-
height: 112
|
|
89
|
-
}
|
|
90
|
-
),
|
|
91
|
-
/* @__PURE__ */ jsx(
|
|
92
|
-
ImageElement,
|
|
93
|
-
{
|
|
94
|
-
src: "/assets/elements/wing-webriq-blue-down.png",
|
|
95
|
-
alt: "wing-webriq-blue-down-mainImage-element",
|
|
96
|
-
className: "absolute hidden md:block",
|
|
97
|
-
style: { bottom: "-2rem", right: "-2rem", zIndex: 2 },
|
|
98
|
-
width: 144,
|
|
99
|
-
height: 144
|
|
100
|
-
}
|
|
101
|
-
),
|
|
102
|
-
/* @__PURE__ */ jsx(
|
|
103
|
-
ImageElement,
|
|
104
|
-
{
|
|
105
|
-
src: "/assets/elements/bullets-gray-right.svg",
|
|
106
|
-
alt: "bullets-gray-right-mainImage-element",
|
|
107
|
-
className: "absolute hidden md:block",
|
|
108
|
-
style: { top: "3rem", right: "-3rem", zIndex: 2 },
|
|
109
|
-
width: 115,
|
|
110
|
-
height: 157
|
|
111
|
-
}
|
|
112
|
-
),
|
|
113
|
-
/* @__PURE__ */ jsx(
|
|
114
|
-
ImageElement,
|
|
115
|
-
{
|
|
116
|
-
src: "/assets/elements/bullets-gray-left.svg",
|
|
117
|
-
alt: "bullets-gray-left-mainImage-element",
|
|
118
|
-
className: "absolute hidden md:block",
|
|
119
|
-
style: { bottom: "2.5rem", left: "-4.5rem", zIndex: 2 },
|
|
120
|
-
width: 157,
|
|
121
|
-
height: 115
|
|
122
|
-
}
|
|
123
|
-
)
|
|
124
|
-
] });
|
|
125
|
-
}
|
|
126
|
-
function ImageElement({
|
|
127
|
-
src,
|
|
128
|
-
alt,
|
|
129
|
-
className,
|
|
130
|
-
style,
|
|
131
|
-
width,
|
|
132
|
-
height
|
|
133
|
-
}) {
|
|
134
|
-
return /* @__PURE__ */ jsx(Image, { src, alt, className, style, width, height });
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
export {
|
|
138
|
-
Header_A
|
|
139
|
-
};
|
package/dist/chunk-QKD3MWOT.mjs
DELETED
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
// src/header_b.tsx
|
|
2
|
-
import { Button } from "@stackshift-ui/button";
|
|
3
|
-
import { Container } from "@stackshift-ui/container";
|
|
4
|
-
import { Flex } from "@stackshift-ui/flex";
|
|
5
|
-
import { Heading } from "@stackshift-ui/heading";
|
|
6
|
-
import { Image } from "@stackshift-ui/image";
|
|
7
|
-
import { Section } from "@stackshift-ui/section";
|
|
8
|
-
import { Text } from "@stackshift-ui/text";
|
|
9
|
-
import React from "react";
|
|
10
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
-
function Header_B({
|
|
12
|
-
images,
|
|
13
|
-
title,
|
|
14
|
-
description,
|
|
15
|
-
primaryButton,
|
|
16
|
-
secondaryButton
|
|
17
|
-
}) {
|
|
18
|
-
return /* @__PURE__ */ jsx(Section, { className: "relative z-10 py-20 bg-background", children: /* @__PURE__ */ jsx(Container, { maxWidth: 1280, children: /* @__PURE__ */ jsxs(Flex, { align: "center", direction: "col", gap: 4, className: "lg:flex-row", children: [
|
|
19
|
-
/* @__PURE__ */ jsx(Flex, { align: "center", direction: "col", className: "w-full basis-1/2", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto text-center lg:text-left", children: [
|
|
20
|
-
/* @__PURE__ */ jsx(TitleAndDescription, { title, description }),
|
|
21
|
-
/* @__PURE__ */ jsx(Buttons, { primaryButton, secondaryButton })
|
|
22
|
-
] }) }),
|
|
23
|
-
images && /* @__PURE__ */ jsx(ImageGallery, { images })
|
|
24
|
-
] }) }) });
|
|
25
|
-
}
|
|
26
|
-
function TitleAndDescription({ title, description }) {
|
|
27
|
-
return /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
|
28
|
-
title && /* @__PURE__ */ jsx(Heading, { fontSize: "3xl", className: "mb-3", children: title }),
|
|
29
|
-
description && /* @__PURE__ */ jsx(Text, { muted: true, className: "my-6", children: description })
|
|
30
|
-
] });
|
|
31
|
-
}
|
|
32
|
-
function Buttons({
|
|
33
|
-
primaryButton,
|
|
34
|
-
secondaryButton
|
|
35
|
-
}) {
|
|
36
|
-
return /* @__PURE__ */ jsxs(
|
|
37
|
-
Flex,
|
|
38
|
-
{
|
|
39
|
-
align: "center",
|
|
40
|
-
gap: 2,
|
|
41
|
-
className: "flex items-center justify-center lg:justify-start gap-2 flex-col md:flex-row",
|
|
42
|
-
children: [
|
|
43
|
-
(primaryButton == null ? void 0 : primaryButton.label) && /* @__PURE__ */ jsx(Button, { as: "link", link: primaryButton, ariaLabel: primaryButton == null ? void 0 : primaryButton.label, children: primaryButton == null ? void 0 : primaryButton.label }),
|
|
44
|
-
(secondaryButton == null ? void 0 : secondaryButton.label) && /* @__PURE__ */ jsx(
|
|
45
|
-
Button,
|
|
46
|
-
{
|
|
47
|
-
as: "link",
|
|
48
|
-
link: secondaryButton,
|
|
49
|
-
className: "bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-6 py-3",
|
|
50
|
-
ariaLabel: secondaryButton == null ? void 0 : secondaryButton.label,
|
|
51
|
-
children: secondaryButton == null ? void 0 : secondaryButton.label
|
|
52
|
-
}
|
|
53
|
-
)
|
|
54
|
-
]
|
|
55
|
-
}
|
|
56
|
-
);
|
|
57
|
-
}
|
|
58
|
-
function ImageGallery({ images }) {
|
|
59
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
|
|
60
|
-
if (!images) return null;
|
|
61
|
-
return /* @__PURE__ */ jsxs("div", { className: "w-full px-4 lg:w-1/2", children: [
|
|
62
|
-
/* @__PURE__ */ jsxs("div", { className: "mb-3 sm:flex lg:mb-4 lg:ml-6", children: [
|
|
63
|
-
((_a = images == null ? void 0 : images[0]) == null ? void 0 : _a.image) && /* @__PURE__ */ jsx(
|
|
64
|
-
Image,
|
|
65
|
-
{
|
|
66
|
-
className: "relative object-cover mb-3 mr-2 overflow-hidden rounded-xl sm:mb-0 sm:w-1/3 md:rounded-3xl lg:rounded-br-none",
|
|
67
|
-
sizes: "100vw",
|
|
68
|
-
src: `${(_b = images == null ? void 0 : images[0]) == null ? void 0 : _b.image}`,
|
|
69
|
-
width: 941,
|
|
70
|
-
height: 734,
|
|
71
|
-
alt: (_d = (_c = images == null ? void 0 : images[0]) == null ? void 0 : _c.alt) != null ? _d : "header-image-1"
|
|
72
|
-
}
|
|
73
|
-
),
|
|
74
|
-
((_e = images == null ? void 0 : images[1]) == null ? void 0 : _e.image) && /* @__PURE__ */ jsx(
|
|
75
|
-
Image,
|
|
76
|
-
{
|
|
77
|
-
className: "relative object-cover overflow-hidden rounded-xl sm:ml-2 sm:w-2/3 md:rounded-3xl lg:rounded-bl-none",
|
|
78
|
-
sizes: "100vw",
|
|
79
|
-
src: `${(_f = images == null ? void 0 : images[1]) == null ? void 0 : _f.image}`,
|
|
80
|
-
width: 1050,
|
|
81
|
-
height: 701,
|
|
82
|
-
alt: (_h = (_g = images == null ? void 0 : images[1]) == null ? void 0 : _g.alt) != null ? _h : "header-image-2"
|
|
83
|
-
}
|
|
84
|
-
)
|
|
85
|
-
] }),
|
|
86
|
-
/* @__PURE__ */ jsxs("div", { className: "mb-3 sm:flex lg:mb-4 lg:mr-6", children: [
|
|
87
|
-
((_i = images == null ? void 0 : images[2]) == null ? void 0 : _i.image) && /* @__PURE__ */ jsx(
|
|
88
|
-
Image,
|
|
89
|
-
{
|
|
90
|
-
className: "object-cover mb-3 mr-2 overflow-hidden rounded-xl sm:w-2/3 md:mb-0 md:rounded-3xl lg:rounded-br-none",
|
|
91
|
-
sizes: "100vw",
|
|
92
|
-
src: `${(_j = images == null ? void 0 : images[2]) == null ? void 0 : _j.image}`,
|
|
93
|
-
width: 1050,
|
|
94
|
-
height: 701,
|
|
95
|
-
alt: (_l = (_k = images == null ? void 0 : images[2]) == null ? void 0 : _k.alt) != null ? _l : "header-image-3"
|
|
96
|
-
}
|
|
97
|
-
),
|
|
98
|
-
((_m = images == null ? void 0 : images[3]) == null ? void 0 : _m.image) && /* @__PURE__ */ jsx(
|
|
99
|
-
Image,
|
|
100
|
-
{
|
|
101
|
-
className: "object-cover overflow-hidden rounded-xl sm:ml-2 sm:w-1/3 md:rounded-3xl lg:rounded-bl-none",
|
|
102
|
-
sizes: "100vw",
|
|
103
|
-
src: `${(_n = images == null ? void 0 : images[3]) == null ? void 0 : _n.image}`,
|
|
104
|
-
width: 941,
|
|
105
|
-
height: 734,
|
|
106
|
-
alt: (_p = (_o = images == null ? void 0 : images[3]) == null ? void 0 : _o.alt) != null ? _p : "header-image-4"
|
|
107
|
-
}
|
|
108
|
-
)
|
|
109
|
-
] })
|
|
110
|
-
] });
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
export {
|
|
114
|
-
Header_B
|
|
115
|
-
};
|