@opensite/ui 1.6.9 → 1.7.0
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/hero-billing-platform-logos.cjs +77 -52
- package/dist/hero-billing-platform-logos.js +77 -51
- package/dist/hero-conversion-video-play.cjs +240 -78
- package/dist/hero-conversion-video-play.js +233 -75
- package/dist/hero-customer-support-layered.cjs +1 -1
- package/dist/hero-customer-support-layered.js +1 -1
- package/dist/hero-dashed-border-features.cjs +33 -24
- package/dist/hero-dashed-border-features.js +33 -24
- package/dist/hero-design-showcase-logos.cjs +102 -38
- package/dist/hero-design-showcase-logos.js +102 -38
- package/dist/hero-grid-pattern-solutions.cjs +187 -49
- package/dist/hero-grid-pattern-solutions.d.cts +1 -4
- package/dist/hero-grid-pattern-solutions.d.ts +1 -4
- package/dist/hero-grid-pattern-solutions.js +188 -50
- package/dist/hero-marketplace-scattered-images.cjs +120 -79
- package/dist/hero-marketplace-scattered-images.js +120 -79
- package/dist/hero-mentorship-video-split.cjs +32 -13
- package/dist/hero-mentorship-video-split.js +32 -13
- package/dist/hero-premium-split-avatars.cjs +2 -2
- package/dist/hero-premium-split-avatars.js +2 -2
- package/dist/hero-productivity-launcher-video.cjs +45 -143
- package/dist/hero-productivity-launcher-video.d.cts +5 -23
- package/dist/hero-productivity-launcher-video.d.ts +5 -23
- package/dist/hero-productivity-launcher-video.js +45 -143
- package/dist/hero-split-spiral-shapes.cjs +47 -38
- package/dist/hero-split-spiral-shapes.js +47 -38
- package/dist/hero-task-timer-animated.cjs +59 -59
- package/dist/hero-task-timer-animated.js +59 -59
- package/dist/registry.cjs +772 -439
- package/dist/registry.js +772 -439
- package/package.json +1 -1
|
@@ -449,111 +449,6 @@ var Pressable = React__namespace.forwardRef(
|
|
|
449
449
|
}
|
|
450
450
|
);
|
|
451
451
|
Pressable.displayName = "Pressable";
|
|
452
|
-
var svgCache = /* @__PURE__ */ new Map();
|
|
453
|
-
function DynamicIcon({
|
|
454
|
-
name,
|
|
455
|
-
size = 28,
|
|
456
|
-
color,
|
|
457
|
-
className,
|
|
458
|
-
alt
|
|
459
|
-
}) {
|
|
460
|
-
const [svgContent, setSvgContent] = React__namespace.useState(null);
|
|
461
|
-
const [isLoading, setIsLoading] = React__namespace.useState(true);
|
|
462
|
-
const [error, setError] = React__namespace.useState(null);
|
|
463
|
-
const { url, iconName } = React__namespace.useMemo(() => {
|
|
464
|
-
const separator = name.includes("/") ? "/" : ":";
|
|
465
|
-
const [prefix, iconName2] = name.split(separator);
|
|
466
|
-
const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}&key=au382bi7fsh96w9h9xlrnat2jglx`;
|
|
467
|
-
return {
|
|
468
|
-
url: baseUrl,
|
|
469
|
-
iconName: iconName2
|
|
470
|
-
};
|
|
471
|
-
}, [name, size]);
|
|
472
|
-
React__namespace.useEffect(() => {
|
|
473
|
-
let isMounted = true;
|
|
474
|
-
const fetchSvg = async () => {
|
|
475
|
-
const cached = svgCache.get(url);
|
|
476
|
-
if (cached) {
|
|
477
|
-
if (isMounted) {
|
|
478
|
-
setSvgContent(cached);
|
|
479
|
-
setIsLoading(false);
|
|
480
|
-
}
|
|
481
|
-
return;
|
|
482
|
-
}
|
|
483
|
-
try {
|
|
484
|
-
setIsLoading(true);
|
|
485
|
-
setError(null);
|
|
486
|
-
const response = await fetch(url);
|
|
487
|
-
if (!response.ok) {
|
|
488
|
-
throw new Error(`Failed to fetch icon: ${response.status}`);
|
|
489
|
-
}
|
|
490
|
-
let svg = await response.text();
|
|
491
|
-
svg = processSvgForCurrentColor(svg);
|
|
492
|
-
svgCache.set(url, svg);
|
|
493
|
-
if (isMounted) {
|
|
494
|
-
setSvgContent(svg);
|
|
495
|
-
setIsLoading(false);
|
|
496
|
-
}
|
|
497
|
-
} catch (err) {
|
|
498
|
-
if (isMounted) {
|
|
499
|
-
setError(err instanceof Error ? err.message : "Failed to load icon");
|
|
500
|
-
setIsLoading(false);
|
|
501
|
-
}
|
|
502
|
-
}
|
|
503
|
-
};
|
|
504
|
-
fetchSvg();
|
|
505
|
-
return () => {
|
|
506
|
-
isMounted = false;
|
|
507
|
-
};
|
|
508
|
-
}, [url]);
|
|
509
|
-
if (isLoading) {
|
|
510
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
511
|
-
"span",
|
|
512
|
-
{
|
|
513
|
-
className: cn("inline-block", className),
|
|
514
|
-
style: { width: size, height: size },
|
|
515
|
-
"aria-hidden": "true"
|
|
516
|
-
}
|
|
517
|
-
);
|
|
518
|
-
}
|
|
519
|
-
if (error || !svgContent) {
|
|
520
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
521
|
-
"span",
|
|
522
|
-
{
|
|
523
|
-
className: cn("inline-block", className),
|
|
524
|
-
style: { width: size, height: size },
|
|
525
|
-
role: "img",
|
|
526
|
-
"aria-label": alt || iconName
|
|
527
|
-
}
|
|
528
|
-
);
|
|
529
|
-
}
|
|
530
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
531
|
-
"span",
|
|
532
|
-
{
|
|
533
|
-
className: cn("inline-flex items-center justify-center", className),
|
|
534
|
-
style: {
|
|
535
|
-
width: size,
|
|
536
|
-
height: size,
|
|
537
|
-
color: color || "inherit"
|
|
538
|
-
},
|
|
539
|
-
role: "img",
|
|
540
|
-
"aria-label": alt || iconName,
|
|
541
|
-
dangerouslySetInnerHTML: { __html: svgContent }
|
|
542
|
-
}
|
|
543
|
-
);
|
|
544
|
-
}
|
|
545
|
-
function processSvgForCurrentColor(svg) {
|
|
546
|
-
let processed = svg;
|
|
547
|
-
processed = processed.replace(
|
|
548
|
-
/stroke=["'](#000000|#000|black)["']/gi,
|
|
549
|
-
'stroke="currentColor"'
|
|
550
|
-
);
|
|
551
|
-
processed = processed.replace(
|
|
552
|
-
/fill=["'](#000000|#000|black)["']/gi,
|
|
553
|
-
'fill="currentColor"'
|
|
554
|
-
);
|
|
555
|
-
return processed;
|
|
556
|
-
}
|
|
557
452
|
var maxWidthStyles = {
|
|
558
453
|
sm: "max-w-screen-sm",
|
|
559
454
|
md: "max-w-screen-md",
|
|
@@ -936,12 +831,11 @@ function HeroProductivityLauncherVideo({
|
|
|
936
831
|
actionsSlot,
|
|
937
832
|
versionInfo,
|
|
938
833
|
versionInfoSlot,
|
|
939
|
-
secondaryCta,
|
|
940
|
-
secondaryCtaSlot,
|
|
941
834
|
videoSrc,
|
|
942
835
|
videoSlot,
|
|
943
836
|
background,
|
|
944
|
-
spacing = "py-
|
|
837
|
+
spacing = "py-0 md:py-0",
|
|
838
|
+
containerClassName = "mx-auto w-screen min-h-screen h-full max-w-screen relative z-10 px-0 sm:px-0 md:px-0 lg:px-0 flex flex-col items-center justify-center",
|
|
945
839
|
pattern,
|
|
946
840
|
patternOpacity,
|
|
947
841
|
className,
|
|
@@ -953,7 +847,14 @@ function HeroProductivityLauncherVideo({
|
|
|
953
847
|
if (actionsSlot) return actionsSlot;
|
|
954
848
|
if (!actions || actions.length === 0) return null;
|
|
955
849
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", children: actions.map((action, index) => {
|
|
956
|
-
const {
|
|
850
|
+
const {
|
|
851
|
+
label,
|
|
852
|
+
icon,
|
|
853
|
+
iconAfter,
|
|
854
|
+
children,
|
|
855
|
+
className: actionClassName,
|
|
856
|
+
...pressableProps
|
|
857
|
+
} = action;
|
|
957
858
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
958
859
|
Pressable,
|
|
959
860
|
{
|
|
@@ -973,40 +874,15 @@ function HeroProductivityLauncherVideo({
|
|
|
973
874
|
const renderVersionInfo = React.useMemo(() => {
|
|
974
875
|
if (versionInfoSlot) return versionInfoSlot;
|
|
975
876
|
if (!versionInfo) return null;
|
|
976
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-6 text-xs text-
|
|
877
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-6 text-xs text-white", children: [
|
|
977
878
|
versionInfo.version && /* @__PURE__ */ jsxRuntime.jsx("span", { children: versionInfo.version }),
|
|
978
879
|
versionInfo.osRequirement && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: versionInfo.osRequirement }),
|
|
979
880
|
versionInfo.installMethod && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: versionInfo.installAction, children: versionInfo.installMethod }) })
|
|
980
881
|
] });
|
|
981
882
|
}, [versionInfoSlot, versionInfo]);
|
|
982
|
-
const renderSecondaryCta = React.useMemo(() => {
|
|
983
|
-
if (secondaryCtaSlot) return secondaryCtaSlot;
|
|
984
|
-
if (!secondaryCta) return null;
|
|
985
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
986
|
-
Pressable,
|
|
987
|
-
{
|
|
988
|
-
href: secondaryCta.href,
|
|
989
|
-
className: "group relative mt-10 flex h-8 items-center gap-3 overflow-hidden rounded-full border border-border/50 bg-background px-3 py-1 text-sm font-medium",
|
|
990
|
-
children: [
|
|
991
|
-
secondaryCta.primaryText && /* @__PURE__ */ jsxRuntime.jsx("span", { children: secondaryCta.primaryText }),
|
|
992
|
-
secondaryCta.secondaryText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
|
|
993
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: secondaryCta.secondaryText }),
|
|
994
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
995
|
-
DynamicIcon,
|
|
996
|
-
{
|
|
997
|
-
name: "lucide/arrow-right",
|
|
998
|
-
size: 16,
|
|
999
|
-
className: "stroke-muted-foreground"
|
|
1000
|
-
}
|
|
1001
|
-
)
|
|
1002
|
-
] })
|
|
1003
|
-
]
|
|
1004
|
-
}
|
|
1005
|
-
);
|
|
1006
|
-
}, [secondaryCtaSlot, secondaryCta]);
|
|
1007
883
|
const renderVideo = React.useMemo(() => {
|
|
1008
884
|
if (videoSlot) return videoSlot;
|
|
1009
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute
|
|
885
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 z-10 h-full w-full inset-0", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1010
886
|
"video",
|
|
1011
887
|
{
|
|
1012
888
|
src: videoSrc,
|
|
@@ -1014,7 +890,7 @@ function HeroProductivityLauncherVideo({
|
|
|
1014
890
|
muted: true,
|
|
1015
891
|
autoPlay: true,
|
|
1016
892
|
controls: false,
|
|
1017
|
-
className: "block size-full object-cover object-center
|
|
893
|
+
className: "block size-full object-cover object-center brightness-50"
|
|
1018
894
|
}
|
|
1019
895
|
) });
|
|
1020
896
|
}, [videoSlot, videoSrc]);
|
|
@@ -1025,19 +901,45 @@ function HeroProductivityLauncherVideo({
|
|
|
1025
901
|
spacing,
|
|
1026
902
|
pattern,
|
|
1027
903
|
patternOpacity,
|
|
1028
|
-
className
|
|
1029
|
-
containerClassName
|
|
904
|
+
className,
|
|
905
|
+
containerClassName,
|
|
1030
906
|
children: [
|
|
1031
907
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-20 max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
|
|
1032
908
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 px-4 pt-52 pb-32 md:pb-52", children: [
|
|
1033
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1034
|
-
|
|
909
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
910
|
+
"h1",
|
|
911
|
+
{
|
|
912
|
+
className: cn(
|
|
913
|
+
"text-center text-4xl leading-tight font-semibold text-shadow-xl sm:text-5xl md:text-6xl text-balance text-white",
|
|
914
|
+
headingClassName
|
|
915
|
+
),
|
|
916
|
+
children: heading
|
|
917
|
+
}
|
|
918
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
919
|
+
"h1",
|
|
920
|
+
{
|
|
921
|
+
className: cn(
|
|
922
|
+
"text-center text-4xl leading-tight font-semibold text-shadow-xl sm:text-5xl md:text-6xl text-balance text-white",
|
|
923
|
+
headingClassName
|
|
924
|
+
),
|
|
925
|
+
children: heading
|
|
926
|
+
}
|
|
927
|
+
)) }),
|
|
928
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
929
|
+
"p",
|
|
930
|
+
{
|
|
931
|
+
className: cn(
|
|
932
|
+
"text-center text-sm leading-normal tracking-tight text-balance md:text-lg text-white",
|
|
933
|
+
descriptionClassName
|
|
934
|
+
),
|
|
935
|
+
children: description
|
|
936
|
+
}
|
|
937
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })) })
|
|
1035
938
|
] }),
|
|
1036
939
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
|
|
1037
940
|
renderActions,
|
|
1038
941
|
renderVersionInfo
|
|
1039
|
-
] })
|
|
1040
|
-
renderSecondaryCta
|
|
942
|
+
] })
|
|
1041
943
|
] }) }),
|
|
1042
944
|
renderVideo
|
|
1043
945
|
]
|
|
@@ -24,20 +24,6 @@ interface VersionInfo {
|
|
|
24
24
|
*/
|
|
25
25
|
installAction?: () => void;
|
|
26
26
|
}
|
|
27
|
-
interface SecondaryCtaConfig {
|
|
28
|
-
/**
|
|
29
|
-
* Primary text (e.g., "Download on iOS")
|
|
30
|
-
*/
|
|
31
|
-
primaryText?: string;
|
|
32
|
-
/**
|
|
33
|
-
* Secondary text (e.g., "Join waitlist")
|
|
34
|
-
*/
|
|
35
|
-
secondaryText?: string;
|
|
36
|
-
/**
|
|
37
|
-
* Link destination
|
|
38
|
-
*/
|
|
39
|
-
href?: string;
|
|
40
|
-
}
|
|
41
27
|
interface HeroProductivityLauncherVideoProps {
|
|
42
28
|
/**
|
|
43
29
|
* Main heading content
|
|
@@ -63,14 +49,6 @@ interface HeroProductivityLauncherVideoProps {
|
|
|
63
49
|
* Custom slot for version info (overrides versionInfo prop)
|
|
64
50
|
*/
|
|
65
51
|
versionInfoSlot?: React.ReactNode;
|
|
66
|
-
/**
|
|
67
|
-
* Secondary CTA configuration
|
|
68
|
-
*/
|
|
69
|
-
secondaryCta?: SecondaryCtaConfig;
|
|
70
|
-
/**
|
|
71
|
-
* Custom slot for secondary CTA (overrides secondaryCta prop)
|
|
72
|
-
*/
|
|
73
|
-
secondaryCtaSlot?: React.ReactNode;
|
|
74
52
|
/**
|
|
75
53
|
* Video source URL
|
|
76
54
|
*/
|
|
@@ -86,6 +64,10 @@ interface HeroProductivityLauncherVideoProps {
|
|
|
86
64
|
* Vertical spacing for the section
|
|
87
65
|
*/
|
|
88
66
|
spacing?: SectionSpacing;
|
|
67
|
+
/**
|
|
68
|
+
* Additional CSS classes for the container
|
|
69
|
+
*/
|
|
70
|
+
containerClassName?: string;
|
|
89
71
|
/**
|
|
90
72
|
* Optional background pattern name
|
|
91
73
|
*/
|
|
@@ -111,6 +93,6 @@ interface HeroProductivityLauncherVideoProps {
|
|
|
111
93
|
*/
|
|
112
94
|
descriptionClassName?: string;
|
|
113
95
|
}
|
|
114
|
-
declare function HeroProductivityLauncherVideo({ heading, description, actions, actionsSlot, versionInfo, versionInfoSlot,
|
|
96
|
+
declare function HeroProductivityLauncherVideo({ heading, description, actions, actionsSlot, versionInfo, versionInfoSlot, videoSrc, videoSlot, background, spacing, containerClassName, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, }: HeroProductivityLauncherVideoProps): React.JSX.Element;
|
|
115
97
|
|
|
116
98
|
export { HeroProductivityLauncherVideo, type HeroProductivityLauncherVideoProps };
|
|
@@ -24,20 +24,6 @@ interface VersionInfo {
|
|
|
24
24
|
*/
|
|
25
25
|
installAction?: () => void;
|
|
26
26
|
}
|
|
27
|
-
interface SecondaryCtaConfig {
|
|
28
|
-
/**
|
|
29
|
-
* Primary text (e.g., "Download on iOS")
|
|
30
|
-
*/
|
|
31
|
-
primaryText?: string;
|
|
32
|
-
/**
|
|
33
|
-
* Secondary text (e.g., "Join waitlist")
|
|
34
|
-
*/
|
|
35
|
-
secondaryText?: string;
|
|
36
|
-
/**
|
|
37
|
-
* Link destination
|
|
38
|
-
*/
|
|
39
|
-
href?: string;
|
|
40
|
-
}
|
|
41
27
|
interface HeroProductivityLauncherVideoProps {
|
|
42
28
|
/**
|
|
43
29
|
* Main heading content
|
|
@@ -63,14 +49,6 @@ interface HeroProductivityLauncherVideoProps {
|
|
|
63
49
|
* Custom slot for version info (overrides versionInfo prop)
|
|
64
50
|
*/
|
|
65
51
|
versionInfoSlot?: React.ReactNode;
|
|
66
|
-
/**
|
|
67
|
-
* Secondary CTA configuration
|
|
68
|
-
*/
|
|
69
|
-
secondaryCta?: SecondaryCtaConfig;
|
|
70
|
-
/**
|
|
71
|
-
* Custom slot for secondary CTA (overrides secondaryCta prop)
|
|
72
|
-
*/
|
|
73
|
-
secondaryCtaSlot?: React.ReactNode;
|
|
74
52
|
/**
|
|
75
53
|
* Video source URL
|
|
76
54
|
*/
|
|
@@ -86,6 +64,10 @@ interface HeroProductivityLauncherVideoProps {
|
|
|
86
64
|
* Vertical spacing for the section
|
|
87
65
|
*/
|
|
88
66
|
spacing?: SectionSpacing;
|
|
67
|
+
/**
|
|
68
|
+
* Additional CSS classes for the container
|
|
69
|
+
*/
|
|
70
|
+
containerClassName?: string;
|
|
89
71
|
/**
|
|
90
72
|
* Optional background pattern name
|
|
91
73
|
*/
|
|
@@ -111,6 +93,6 @@ interface HeroProductivityLauncherVideoProps {
|
|
|
111
93
|
*/
|
|
112
94
|
descriptionClassName?: string;
|
|
113
95
|
}
|
|
114
|
-
declare function HeroProductivityLauncherVideo({ heading, description, actions, actionsSlot, versionInfo, versionInfoSlot,
|
|
96
|
+
declare function HeroProductivityLauncherVideo({ heading, description, actions, actionsSlot, versionInfo, versionInfoSlot, videoSrc, videoSlot, background, spacing, containerClassName, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, }: HeroProductivityLauncherVideoProps): React.JSX.Element;
|
|
115
97
|
|
|
116
98
|
export { HeroProductivityLauncherVideo, type HeroProductivityLauncherVideoProps };
|
|
@@ -428,111 +428,6 @@ var Pressable = React.forwardRef(
|
|
|
428
428
|
}
|
|
429
429
|
);
|
|
430
430
|
Pressable.displayName = "Pressable";
|
|
431
|
-
var svgCache = /* @__PURE__ */ new Map();
|
|
432
|
-
function DynamicIcon({
|
|
433
|
-
name,
|
|
434
|
-
size = 28,
|
|
435
|
-
color,
|
|
436
|
-
className,
|
|
437
|
-
alt
|
|
438
|
-
}) {
|
|
439
|
-
const [svgContent, setSvgContent] = React.useState(null);
|
|
440
|
-
const [isLoading, setIsLoading] = React.useState(true);
|
|
441
|
-
const [error, setError] = React.useState(null);
|
|
442
|
-
const { url, iconName } = React.useMemo(() => {
|
|
443
|
-
const separator = name.includes("/") ? "/" : ":";
|
|
444
|
-
const [prefix, iconName2] = name.split(separator);
|
|
445
|
-
const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}&key=au382bi7fsh96w9h9xlrnat2jglx`;
|
|
446
|
-
return {
|
|
447
|
-
url: baseUrl,
|
|
448
|
-
iconName: iconName2
|
|
449
|
-
};
|
|
450
|
-
}, [name, size]);
|
|
451
|
-
React.useEffect(() => {
|
|
452
|
-
let isMounted = true;
|
|
453
|
-
const fetchSvg = async () => {
|
|
454
|
-
const cached = svgCache.get(url);
|
|
455
|
-
if (cached) {
|
|
456
|
-
if (isMounted) {
|
|
457
|
-
setSvgContent(cached);
|
|
458
|
-
setIsLoading(false);
|
|
459
|
-
}
|
|
460
|
-
return;
|
|
461
|
-
}
|
|
462
|
-
try {
|
|
463
|
-
setIsLoading(true);
|
|
464
|
-
setError(null);
|
|
465
|
-
const response = await fetch(url);
|
|
466
|
-
if (!response.ok) {
|
|
467
|
-
throw new Error(`Failed to fetch icon: ${response.status}`);
|
|
468
|
-
}
|
|
469
|
-
let svg = await response.text();
|
|
470
|
-
svg = processSvgForCurrentColor(svg);
|
|
471
|
-
svgCache.set(url, svg);
|
|
472
|
-
if (isMounted) {
|
|
473
|
-
setSvgContent(svg);
|
|
474
|
-
setIsLoading(false);
|
|
475
|
-
}
|
|
476
|
-
} catch (err) {
|
|
477
|
-
if (isMounted) {
|
|
478
|
-
setError(err instanceof Error ? err.message : "Failed to load icon");
|
|
479
|
-
setIsLoading(false);
|
|
480
|
-
}
|
|
481
|
-
}
|
|
482
|
-
};
|
|
483
|
-
fetchSvg();
|
|
484
|
-
return () => {
|
|
485
|
-
isMounted = false;
|
|
486
|
-
};
|
|
487
|
-
}, [url]);
|
|
488
|
-
if (isLoading) {
|
|
489
|
-
return /* @__PURE__ */ jsx(
|
|
490
|
-
"span",
|
|
491
|
-
{
|
|
492
|
-
className: cn("inline-block", className),
|
|
493
|
-
style: { width: size, height: size },
|
|
494
|
-
"aria-hidden": "true"
|
|
495
|
-
}
|
|
496
|
-
);
|
|
497
|
-
}
|
|
498
|
-
if (error || !svgContent) {
|
|
499
|
-
return /* @__PURE__ */ jsx(
|
|
500
|
-
"span",
|
|
501
|
-
{
|
|
502
|
-
className: cn("inline-block", className),
|
|
503
|
-
style: { width: size, height: size },
|
|
504
|
-
role: "img",
|
|
505
|
-
"aria-label": alt || iconName
|
|
506
|
-
}
|
|
507
|
-
);
|
|
508
|
-
}
|
|
509
|
-
return /* @__PURE__ */ jsx(
|
|
510
|
-
"span",
|
|
511
|
-
{
|
|
512
|
-
className: cn("inline-flex items-center justify-center", className),
|
|
513
|
-
style: {
|
|
514
|
-
width: size,
|
|
515
|
-
height: size,
|
|
516
|
-
color: color || "inherit"
|
|
517
|
-
},
|
|
518
|
-
role: "img",
|
|
519
|
-
"aria-label": alt || iconName,
|
|
520
|
-
dangerouslySetInnerHTML: { __html: svgContent }
|
|
521
|
-
}
|
|
522
|
-
);
|
|
523
|
-
}
|
|
524
|
-
function processSvgForCurrentColor(svg) {
|
|
525
|
-
let processed = svg;
|
|
526
|
-
processed = processed.replace(
|
|
527
|
-
/stroke=["'](#000000|#000|black)["']/gi,
|
|
528
|
-
'stroke="currentColor"'
|
|
529
|
-
);
|
|
530
|
-
processed = processed.replace(
|
|
531
|
-
/fill=["'](#000000|#000|black)["']/gi,
|
|
532
|
-
'fill="currentColor"'
|
|
533
|
-
);
|
|
534
|
-
return processed;
|
|
535
|
-
}
|
|
536
431
|
var maxWidthStyles = {
|
|
537
432
|
sm: "max-w-screen-sm",
|
|
538
433
|
md: "max-w-screen-md",
|
|
@@ -915,12 +810,11 @@ function HeroProductivityLauncherVideo({
|
|
|
915
810
|
actionsSlot,
|
|
916
811
|
versionInfo,
|
|
917
812
|
versionInfoSlot,
|
|
918
|
-
secondaryCta,
|
|
919
|
-
secondaryCtaSlot,
|
|
920
813
|
videoSrc,
|
|
921
814
|
videoSlot,
|
|
922
815
|
background,
|
|
923
|
-
spacing = "py-
|
|
816
|
+
spacing = "py-0 md:py-0",
|
|
817
|
+
containerClassName = "mx-auto w-screen min-h-screen h-full max-w-screen relative z-10 px-0 sm:px-0 md:px-0 lg:px-0 flex flex-col items-center justify-center",
|
|
924
818
|
pattern,
|
|
925
819
|
patternOpacity,
|
|
926
820
|
className,
|
|
@@ -932,7 +826,14 @@ function HeroProductivityLauncherVideo({
|
|
|
932
826
|
if (actionsSlot) return actionsSlot;
|
|
933
827
|
if (!actions || actions.length === 0) return null;
|
|
934
828
|
return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", children: actions.map((action, index) => {
|
|
935
|
-
const {
|
|
829
|
+
const {
|
|
830
|
+
label,
|
|
831
|
+
icon,
|
|
832
|
+
iconAfter,
|
|
833
|
+
children,
|
|
834
|
+
className: actionClassName,
|
|
835
|
+
...pressableProps
|
|
836
|
+
} = action;
|
|
936
837
|
return /* @__PURE__ */ jsx(
|
|
937
838
|
Pressable,
|
|
938
839
|
{
|
|
@@ -952,40 +853,15 @@ function HeroProductivityLauncherVideo({
|
|
|
952
853
|
const renderVersionInfo = useMemo(() => {
|
|
953
854
|
if (versionInfoSlot) return versionInfoSlot;
|
|
954
855
|
if (!versionInfo) return null;
|
|
955
|
-
return /* @__PURE__ */ jsxs("div", { className: "flex gap-6 text-xs text-
|
|
856
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex gap-6 text-xs text-white", children: [
|
|
956
857
|
versionInfo.version && /* @__PURE__ */ jsx("span", { children: versionInfo.version }),
|
|
957
858
|
versionInfo.osRequirement && /* @__PURE__ */ jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: versionInfo.osRequirement }),
|
|
958
859
|
versionInfo.installMethod && /* @__PURE__ */ jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: /* @__PURE__ */ jsx("button", { onClick: versionInfo.installAction, children: versionInfo.installMethod }) })
|
|
959
860
|
] });
|
|
960
861
|
}, [versionInfoSlot, versionInfo]);
|
|
961
|
-
const renderSecondaryCta = useMemo(() => {
|
|
962
|
-
if (secondaryCtaSlot) return secondaryCtaSlot;
|
|
963
|
-
if (!secondaryCta) return null;
|
|
964
|
-
return /* @__PURE__ */ jsxs(
|
|
965
|
-
Pressable,
|
|
966
|
-
{
|
|
967
|
-
href: secondaryCta.href,
|
|
968
|
-
className: "group relative mt-10 flex h-8 items-center gap-3 overflow-hidden rounded-full border border-border/50 bg-background px-3 py-1 text-sm font-medium",
|
|
969
|
-
children: [
|
|
970
|
-
secondaryCta.primaryText && /* @__PURE__ */ jsx("span", { children: secondaryCta.primaryText }),
|
|
971
|
-
secondaryCta.secondaryText && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
|
|
972
|
-
/* @__PURE__ */ jsx("span", { children: secondaryCta.secondaryText }),
|
|
973
|
-
/* @__PURE__ */ jsx(
|
|
974
|
-
DynamicIcon,
|
|
975
|
-
{
|
|
976
|
-
name: "lucide/arrow-right",
|
|
977
|
-
size: 16,
|
|
978
|
-
className: "stroke-muted-foreground"
|
|
979
|
-
}
|
|
980
|
-
)
|
|
981
|
-
] })
|
|
982
|
-
]
|
|
983
|
-
}
|
|
984
|
-
);
|
|
985
|
-
}, [secondaryCtaSlot, secondaryCta]);
|
|
986
862
|
const renderVideo = useMemo(() => {
|
|
987
863
|
if (videoSlot) return videoSlot;
|
|
988
|
-
return /* @__PURE__ */ jsx("div", { className: "absolute
|
|
864
|
+
return /* @__PURE__ */ jsx("div", { className: "absolute top-0 z-10 h-full w-full inset-0", children: /* @__PURE__ */ jsx(
|
|
989
865
|
"video",
|
|
990
866
|
{
|
|
991
867
|
src: videoSrc,
|
|
@@ -993,7 +869,7 @@ function HeroProductivityLauncherVideo({
|
|
|
993
869
|
muted: true,
|
|
994
870
|
autoPlay: true,
|
|
995
871
|
controls: false,
|
|
996
|
-
className: "block size-full object-cover object-center
|
|
872
|
+
className: "block size-full object-cover object-center brightness-50"
|
|
997
873
|
}
|
|
998
874
|
) });
|
|
999
875
|
}, [videoSlot, videoSrc]);
|
|
@@ -1004,19 +880,45 @@ function HeroProductivityLauncherVideo({
|
|
|
1004
880
|
spacing,
|
|
1005
881
|
pattern,
|
|
1006
882
|
patternOpacity,
|
|
1007
|
-
className
|
|
1008
|
-
containerClassName
|
|
883
|
+
className,
|
|
884
|
+
containerClassName,
|
|
1009
885
|
children: [
|
|
1010
886
|
/* @__PURE__ */ jsx("div", { className: cn("relative z-20 max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
|
|
1011
887
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 px-4 pt-52 pb-32 md:pb-52", children: [
|
|
1012
|
-
/* @__PURE__ */ jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
|
|
1013
|
-
|
|
888
|
+
/* @__PURE__ */ jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
|
|
889
|
+
"h1",
|
|
890
|
+
{
|
|
891
|
+
className: cn(
|
|
892
|
+
"text-center text-4xl leading-tight font-semibold text-shadow-xl sm:text-5xl md:text-6xl text-balance text-white",
|
|
893
|
+
headingClassName
|
|
894
|
+
),
|
|
895
|
+
children: heading
|
|
896
|
+
}
|
|
897
|
+
) : /* @__PURE__ */ jsx(
|
|
898
|
+
"h1",
|
|
899
|
+
{
|
|
900
|
+
className: cn(
|
|
901
|
+
"text-center text-4xl leading-tight font-semibold text-shadow-xl sm:text-5xl md:text-6xl text-balance text-white",
|
|
902
|
+
headingClassName
|
|
903
|
+
),
|
|
904
|
+
children: heading
|
|
905
|
+
}
|
|
906
|
+
)) }),
|
|
907
|
+
/* @__PURE__ */ jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsx(
|
|
908
|
+
"p",
|
|
909
|
+
{
|
|
910
|
+
className: cn(
|
|
911
|
+
"text-center text-sm leading-normal tracking-tight text-balance md:text-lg text-white",
|
|
912
|
+
descriptionClassName
|
|
913
|
+
),
|
|
914
|
+
children: description
|
|
915
|
+
}
|
|
916
|
+
) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })) })
|
|
1014
917
|
] }),
|
|
1015
918
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
|
|
1016
919
|
renderActions,
|
|
1017
920
|
renderVersionInfo
|
|
1018
|
-
] })
|
|
1019
|
-
renderSecondaryCta
|
|
921
|
+
] })
|
|
1020
922
|
] }) }),
|
|
1021
923
|
renderVideo
|
|
1022
924
|
]
|