zuljaman-banner-components 1.0.5 → 1.0.6
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/components/Style1/substyles/BannerSubstyle1.d.ts.map +1 -1
- package/dist/components/Style1/substyles/BannerSubstyle1.js +1 -1
- package/dist/components/Style1/substyles/BannerSubstyle2.d.ts.map +1 -1
- package/dist/components/Style1/substyles/BannerSubstyle2.js +1 -1
- package/dist/components/Style1/substyles/BannerSubstyle3.d.ts.map +1 -1
- package/dist/components/Style1/substyles/BannerSubstyle3.js +1 -1
- package/dist/components/Style2/BannerStyle2.js +2 -2
- package/dist/components/Style2/substyles/BannerSubstyle1.d.ts.map +1 -1
- package/dist/components/Style2/substyles/BannerSubstyle1.js +7 -3
- package/dist/components/Style2/substyles/BannerSubstyle2.d.ts.map +1 -1
- package/dist/components/Style2/substyles/BannerSubstyle2.js +7 -3
- package/dist/components/Style2/substyles/BannerSubstyle3.d.ts.map +1 -1
- package/dist/components/Style2/substyles/BannerSubstyle3.js +7 -3
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerSubstyle1.d.ts","sourceRoot":"","sources":["../../../../src/components/Style1/substyles/BannerSubstyle1.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEtE,UAAU,oBAAqB,SAAQ,mBAAmB;IACxD,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,
|
|
1
|
+
{"version":3,"file":"BannerSubstyle1.d.ts","sourceRoot":"","sources":["../../../../src/components/Style1/substyles/BannerSubstyle1.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEtE,UAAU,oBAAqB,SAAQ,mBAAmB;IACxD,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAmH1D,CAAC"}
|
|
@@ -43,7 +43,7 @@ const BannerSubstyle1 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, back
|
|
|
43
43
|
});
|
|
44
44
|
return { shadowStyle, logoShadowStyle };
|
|
45
45
|
}, []); // Empty dependency array ensures this runs only once on mount
|
|
46
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("inset-0 flex flex-col items-start justify-between h-full text-center relative isolate overflow-hidden gap-4 px-20", postType === "STORY" ? "
|
|
46
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("inset-0 flex flex-col items-start justify-between h-full text-center relative isolate overflow-hidden gap-4 px-20", postType === "STORY" ? "pb-32 pt-44" : "py-20"), children: [backgroundImageUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: backgroundImageUrl, alt: "Background", width: 1080, height: postType === "STORY" ? 1920 : 1350, className: "object-cover absolute inset-0 w-full h-full -z-10", style: { objectFit: "cover" } })), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle, className: "relative z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { style: logoShadowStyle, className: "relative z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: "relative z-20", children: (0, jsx_runtime_1.jsx)("div", { className: "relative w-64 h-64", children: logoUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: logoUrl, alt: "Logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: "contain" } })) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "w-full relative z-20", children: [(0, jsx_runtime_1.jsx)("p", { style: {
|
|
47
47
|
fontSize: fontSize_01,
|
|
48
48
|
}, className: "whitespace-pre-wrap", children: copy1 }), (0, jsx_runtime_1.jsx)("p", { style: {
|
|
49
49
|
fontSize: fontSize_02,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerSubstyle2.d.ts","sourceRoot":"","sources":["../../../../src/components/Style1/substyles/BannerSubstyle2.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEtE,UAAU,oBAAqB,SAAQ,mBAAmB;IACxD,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,
|
|
1
|
+
{"version":3,"file":"BannerSubstyle2.d.ts","sourceRoot":"","sources":["../../../../src/components/Style1/substyles/BannerSubstyle2.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEtE,UAAU,oBAAqB,SAAQ,mBAAmB;IACxD,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkH1D,CAAC"}
|
|
@@ -43,7 +43,7 @@ const BannerSubstyle2 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, back
|
|
|
43
43
|
});
|
|
44
44
|
return { shadowStyle, logoShadowStyle };
|
|
45
45
|
}, []); // Empty dependency array ensures this runs only once on mount
|
|
46
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("inset-0 flex flex-col items-start justify-between h-full relative isolate overflow-hidden gap-4 px-20", postType === "STORY" ? "
|
|
46
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("inset-0 flex flex-col items-start justify-between h-full relative isolate overflow-hidden gap-4 px-20", postType === "STORY" ? "pb-32 pt-44" : "py-20"), children: [backgroundImageUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: backgroundImageUrl, alt: "Background", width: 1080, height: postType === "STORY" ? 1920 : 1350, className: "object-cover absolute inset-0 w-full h-full -z-10", style: { objectFit: "cover" } })), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle, className: "relative z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { style: logoShadowStyle, className: "relative z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative z-20", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative w-64 h-64", children: logoUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: logoUrl, alt: "Logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: "contain" } })) }), (0, jsx_runtime_1.jsx)("p", { style: {
|
|
47
47
|
fontSize: `calc(${fontSize_01} * 0.8)`,
|
|
48
48
|
}, className: "w-1/2 mt-8 whitespace-pre-wrap", children: copy1 })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full relative z-20", children: (0, jsx_runtime_1.jsx)("p", { style: {
|
|
49
49
|
fontSize: fontSize_02,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerSubstyle3.d.ts","sourceRoot":"","sources":["../../../../src/components/Style1/substyles/BannerSubstyle3.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEtE,UAAU,oBAAqB,SAAQ,mBAAmB;IACxD,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAQD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,
|
|
1
|
+
{"version":3,"file":"BannerSubstyle3.d.ts","sourceRoot":"","sources":["../../../../src/components/Style1/substyles/BannerSubstyle3.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEtE,UAAU,oBAAqB,SAAQ,mBAAmB;IACxD,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAQD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuH1D,CAAC"}
|
|
@@ -52,7 +52,7 @@ const BannerSubstyle3 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, back
|
|
|
52
52
|
// Process the copy strings
|
|
53
53
|
const formattedCopy1 = (0, react_1.useMemo)(() => formatCopy(copy1), [copy1]);
|
|
54
54
|
const formattedCopy2 = (0, react_1.useMemo)(() => formatCopy(copy2), [copy2]);
|
|
55
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("inset-0 flex flex-col items-start justify-between h-full relative isolate overflow-hidden gap-4 px-20", postType === "STORY" ? "
|
|
55
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("inset-0 flex flex-col items-start justify-between h-full relative isolate overflow-hidden gap-4 px-20", postType === "STORY" ? "pb-32 pt-44" : "py-20"), children: [backgroundImageUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: backgroundImageUrl, alt: "Background", width: 1080, height: postType === "STORY" ? 1920 : 1350, className: "object-cover absolute inset-0 w-full h-full -z-10", style: { objectFit: "cover" } })), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle, className: "relative z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { style: logoShadowStyle, className: "relative z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex justify-between w-full z-20", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative w-64 h-64 pr-64", children: logoUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: logoUrl, alt: "Logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: "contain" } })) }), (0, jsx_runtime_1.jsx)("p", { style: {
|
|
56
56
|
fontSize: `calc(${fontSize_01} * 0.8)`,
|
|
57
57
|
}, className: "text-right w-2/3 whitespace-pre-wrap", children: formattedCopy1 })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full relative z-20", children: (0, jsx_runtime_1.jsx)("p", { style: {
|
|
58
58
|
fontSize: fontSize_02,
|
|
@@ -15,7 +15,7 @@ const BannerStyle2 = ({ copy1, copy2, bannerSubstyle = 1, logoUrl, backgroundIma
|
|
|
15
15
|
baseSizeRem1: 3.8,
|
|
16
16
|
baseSizeRem2: 4.0,
|
|
17
17
|
maxLengthThreshold: 35,
|
|
18
|
-
reductionFactor: 0.18
|
|
18
|
+
reductionFactor: 0.18,
|
|
19
19
|
});
|
|
20
20
|
const substyleProps = {
|
|
21
21
|
copy1,
|
|
@@ -27,6 +27,6 @@ const BannerStyle2 = ({ copy1, copy2, bannerSubstyle = 1, logoUrl, backgroundIma
|
|
|
27
27
|
postType,
|
|
28
28
|
ImageComponent,
|
|
29
29
|
};
|
|
30
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full h-full text-white", children: [bannerSubstyle === 1 && (0, jsx_runtime_1.jsx)(substyles_1.BannerSubstyle1, { ...substyleProps }), bannerSubstyle === 2 && (0, jsx_runtime_1.jsx)(substyles_1.BannerSubstyle2, { ...substyleProps }), bannerSubstyle === 3 && (0, jsx_runtime_1.jsx)(substyles_1.BannerSubstyle3, { ...substyleProps })] }));
|
|
30
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full h-full text-white leading-[1.05]", children: [bannerSubstyle === 1 && (0, jsx_runtime_1.jsx)(substyles_1.BannerSubstyle1, { ...substyleProps }), bannerSubstyle === 2 && (0, jsx_runtime_1.jsx)(substyles_1.BannerSubstyle2, { ...substyleProps }), bannerSubstyle === 3 && (0, jsx_runtime_1.jsx)(substyles_1.BannerSubstyle3, { ...substyleProps })] }));
|
|
31
31
|
};
|
|
32
32
|
exports.BannerStyle2 = BannerStyle2;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerSubstyle1.d.ts","sourceRoot":"","sources":["../../../../src/components/Style2/substyles/BannerSubstyle1.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"BannerSubstyle1.d.ts","sourceRoot":"","sources":["../../../../src/components/Style2/substyles/BannerSubstyle1.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGtE,UAAU,oBAAqB,SAAQ,mBAAmB;IACxD,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAwF1D,CAAC"}
|
|
@@ -4,10 +4,14 @@
|
|
|
4
4
|
* Extracted from Next.js app implementation
|
|
5
5
|
*/
|
|
6
6
|
"use client";
|
|
7
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
8
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
9
|
+
};
|
|
7
10
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
8
11
|
exports.BannerSubstyle1 = void 0;
|
|
9
12
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
10
13
|
const shadowUtils_1 = require("../../../styles/shadowUtils");
|
|
14
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
11
15
|
const BannerSubstyle1 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, postType, ImageComponent, }) => {
|
|
12
16
|
const shadowStyle01 = (0, shadowUtils_1.createAbstractShadowStyle)({
|
|
13
17
|
direction: "bottom",
|
|
@@ -19,13 +23,13 @@ const BannerSubstyle1 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, back
|
|
|
19
23
|
size: `45%`,
|
|
20
24
|
intensity: 0.8,
|
|
21
25
|
});
|
|
22
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "inset-0 flex flex-col items-center justify-between h-full text-center isolate overflow-hidden
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("inset-0 flex flex-col items-center justify-between h-full text-center isolate overflow-hidden px-20 relative bg-neutral-900", postType === "STORY" ? "pb-32 pt-44" : "py-20"), children: [backgroundImageUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: backgroundImageUrl, alt: "Background image", width: 1080, height: postType === "STORY" ? 1920 : 1350, className: "object-cover absolute inset-0 w-full h-full -z-10 opacity-65 blur-[2px]", style: { objectFit: "cover" } })), (0, jsx_runtime_1.jsx)("div", { className: "relative z-20 flex-shrink-0", children: (0, jsx_runtime_1.jsx)("div", { className: "relative w-64 h-64 mx-auto", children: logoUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: logoUrl, alt: "Business logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: "contain" } })) }) }), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle01, className: "absolute z-10 bottom-0", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle02, className: "absolute z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("div", { className: "w-full text-center relative z-20 flex-grow flex flex-col items-center justify-end gap-16", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-white py-4 px-5 rounded-lg w-1/2 ml-auto shadow-lg rotate-3", children: (0, jsx_runtime_1.jsx)("p", { style: {
|
|
23
27
|
fontSize: fontSize_02 ? `calc(${fontSize_02} * 0.5)` : "1rem",
|
|
24
28
|
fontFamily: "var(--font-lato), sans-serif",
|
|
25
|
-
}, className: "font-bold text-black
|
|
29
|
+
}, className: "font-bold text-black whitespace-pre-wrap text-center", children: copy2 }) }), (0, jsx_runtime_1.jsx)("p", { style: {
|
|
26
30
|
fontSize: fontSize_01,
|
|
27
31
|
fontWeight: "900",
|
|
28
32
|
fontFamily: "var(--font-roboto), sans-serif",
|
|
29
|
-
}, className: "
|
|
33
|
+
}, className: "whitespace-pre-wrap text-white uppercase tracking-wider text-shadow-lg", children: copy1 })] })] }));
|
|
30
34
|
};
|
|
31
35
|
exports.BannerSubstyle1 = BannerSubstyle1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerSubstyle2.d.ts","sourceRoot":"","sources":["../../../../src/components/Style2/substyles/BannerSubstyle2.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"BannerSubstyle2.d.ts","sourceRoot":"","sources":["../../../../src/components/Style2/substyles/BannerSubstyle2.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGtE,UAAU,oBAAqB,SAAQ,mBAAmB;IACxD,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqF1D,CAAC"}
|
|
@@ -4,10 +4,14 @@
|
|
|
4
4
|
* Extracted from Next.js app implementation
|
|
5
5
|
*/
|
|
6
6
|
"use client";
|
|
7
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
8
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
9
|
+
};
|
|
7
10
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
8
11
|
exports.BannerSubstyle2 = void 0;
|
|
9
12
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
10
13
|
const shadowUtils_1 = require("../../../styles/shadowUtils");
|
|
14
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
11
15
|
const BannerSubstyle2 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, postType, ImageComponent, }) => {
|
|
12
16
|
const shadowStyle01 = (0, shadowUtils_1.createAbstractShadowStyle)({
|
|
13
17
|
direction: "bottom",
|
|
@@ -19,13 +23,13 @@ const BannerSubstyle2 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, back
|
|
|
19
23
|
size: `40%`,
|
|
20
24
|
intensity: 0.8,
|
|
21
25
|
});
|
|
22
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "inset-0 flex flex-col justify-between h-full text-center isolate overflow-hidden
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("inset-0 flex flex-col justify-between h-full text-center isolate overflow-hidden px-20 relative bg-neutral-900", postType === "STORY" ? "pb-32 pt-44" : "py-20"), children: [backgroundImageUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: backgroundImageUrl, alt: "Background image", width: 1080, height: postType === "STORY" ? 1920 : 1350, className: "object-cover absolute inset-0 w-full h-full -z-10 opacity-65 blur-[2px]", style: { objectFit: "cover" } })), (0, jsx_runtime_1.jsxs)("div", { className: "relative z-20 flex-shrink-0 flex flex-col justify-between gap-16", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative w-64 h-64 mx-auto", children: logoUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: logoUrl, alt: "Business logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: "contain" } })) }), (0, jsx_runtime_1.jsx)("div", { className: "bg-white py-6 px-4 rounded-lg w-1/2 mr-auto -rotate-3 shadow-lg", children: (0, jsx_runtime_1.jsx)("p", { style: {
|
|
23
27
|
fontSize: fontSize_02 ? `calc(${fontSize_02} * 0.45)` : "1rem",
|
|
24
28
|
fontFamily: "var(--font-lato), sans-serif",
|
|
25
|
-
}, className: "font-bold text-black
|
|
29
|
+
}, className: "font-bold text-black whitespace-pre-wrap text-center", children: copy2 }) })] }), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle01, className: "absolute z-10 bottom-0", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle02, className: "absolute z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("p", { style: {
|
|
26
30
|
fontSize: fontSize_01,
|
|
27
31
|
fontWeight: "900",
|
|
28
32
|
fontFamily: "var(--font-roboto), sans-serif",
|
|
29
|
-
}, className: "
|
|
33
|
+
}, className: "whitespace-pre-wrap text-white uppercase tracking-wider text-shadow-lg text-right", children: copy1 })] }));
|
|
30
34
|
};
|
|
31
35
|
exports.BannerSubstyle2 = BannerSubstyle2;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerSubstyle3.d.ts","sourceRoot":"","sources":["../../../../src/components/Style2/substyles/BannerSubstyle3.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"BannerSubstyle3.d.ts","sourceRoot":"","sources":["../../../../src/components/Style2/substyles/BannerSubstyle3.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGtE,UAAU,oBAAqB,SAAQ,mBAAmB;IACxD,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqF1D,CAAC"}
|
|
@@ -4,10 +4,14 @@
|
|
|
4
4
|
* Extracted from Next.js app implementation
|
|
5
5
|
*/
|
|
6
6
|
"use client";
|
|
7
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
8
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
9
|
+
};
|
|
7
10
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
8
11
|
exports.BannerSubstyle3 = void 0;
|
|
9
12
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
10
13
|
const shadowUtils_1 = require("../../../styles/shadowUtils");
|
|
14
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
11
15
|
const BannerSubstyle3 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, postType, ImageComponent, }) => {
|
|
12
16
|
const shadowStyle01 = (0, shadowUtils_1.createAbstractShadowStyle)({
|
|
13
17
|
direction: "bottom",
|
|
@@ -19,13 +23,13 @@ const BannerSubstyle3 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, back
|
|
|
19
23
|
size: `40%`,
|
|
20
24
|
intensity: 0.8,
|
|
21
25
|
});
|
|
22
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "inset-0 flex flex-col justify-between h-full text-center isolate overflow-hidden
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("inset-0 flex flex-col justify-between h-full text-center isolate overflow-hidden px-20 relative bg-neutral-900", postType === "STORY" ? "pb-32 pt-44" : "py-20"), children: [backgroundImageUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: backgroundImageUrl, alt: "Background image", width: 1080, height: postType === "STORY" ? 1920 : 1350, className: "object-cover absolute inset-0 w-full h-full -z-10 opacity-65 blur-[2px]", style: { objectFit: "cover" } })), (0, jsx_runtime_1.jsxs)("div", { className: "relative z-20 flex-shrink-0 flex flex-col justify-between gap-16", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative w-64 h-64 mx-auto", children: logoUrl && ((0, jsx_runtime_1.jsx)(ImageComponent, { src: logoUrl, alt: "Business logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: "contain" } })) }), (0, jsx_runtime_1.jsx)("div", { className: "bg-white py-6 px-4 rounded-lg w-1/2 ml-auto rotate-3 shadow-lg", children: (0, jsx_runtime_1.jsx)("p", { style: {
|
|
23
27
|
fontSize: fontSize_02 ? `calc(${fontSize_02} * 0.45)` : "1rem",
|
|
24
28
|
fontFamily: "var(--font-lato), sans-serif",
|
|
25
|
-
}, className: "font-bold text-black
|
|
29
|
+
}, className: "font-bold text-black whitespace-pre-wrap text-center", children: copy2 }) })] }), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle01, className: "absolute z-10 bottom-0", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { style: shadowStyle02, className: "absolute z-10", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("p", { style: {
|
|
26
30
|
fontSize: fontSize_01,
|
|
27
31
|
fontWeight: "900",
|
|
28
32
|
fontFamily: "var(--font-roboto), sans-serif",
|
|
29
|
-
}, className: "
|
|
33
|
+
}, className: "whitespace-pre-wrap text-white uppercase tracking-wider text-shadow-lg text-left", children: copy1 })] }));
|
|
30
34
|
};
|
|
31
35
|
exports.BannerSubstyle3 = BannerSubstyle3;
|