@medialane/ui 0.128.3 → 0.128.4
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/collection-hero-banner.cjs +5 -3
- package/dist/components/collection-hero-banner.cjs.map +1 -1
- package/dist/components/collection-hero-banner.d.cts +4 -1
- package/dist/components/collection-hero-banner.d.ts +4 -1
- package/dist/components/collection-hero-banner.js +5 -3
- package/dist/components/collection-hero-banner.js.map +1 -1
- package/package.json +1 -1
|
@@ -34,7 +34,8 @@ function CollectionHeroBanner({
|
|
|
34
34
|
symbol,
|
|
35
35
|
name,
|
|
36
36
|
stats,
|
|
37
|
-
className
|
|
37
|
+
className,
|
|
38
|
+
eyebrowSlot
|
|
38
39
|
}) {
|
|
39
40
|
const { scrollY } = (0, import_framer_motion.useScroll)();
|
|
40
41
|
const shouldReduce = (0, import_framer_motion.useReducedMotion)();
|
|
@@ -62,9 +63,10 @@ function CollectionHeroBanner({
|
|
|
62
63
|
}
|
|
63
64
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 w-full h-full bg-muted" }),
|
|
64
65
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute bottom-0 left-0 right-0 px-4 sm:px-6 pb-4 sm:pb-6 space-y-3 z-10", children: [
|
|
65
|
-
(standard || symbol) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 flex-wrap", children: [
|
|
66
|
+
(standard || symbol || eyebrowSlot) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 flex-wrap", children: [
|
|
66
67
|
standard === "ERC1155" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Eyebrow, { children: "Multi-edition NFT" }) : standard === "ERC721" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Eyebrow, { children: "Single NFT" }) : null,
|
|
67
|
-
symbol && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Eyebrow, { className: "tabular-nums", children: symbol })
|
|
68
|
+
symbol && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Eyebrow, { className: "tabular-nums", children: symbol }),
|
|
69
|
+
eyebrowSlot
|
|
68
70
|
] }),
|
|
69
71
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
72
|
"h1",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/collection-hero-banner.tsx"],"sourcesContent":["\"use client\";\n\nimport { motion, useScroll, useTransform, useReducedMotion } from \"framer-motion\";\nimport { cn } from \"../utils/cn.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { Skeleton } from \"./skeleton.js\";\n\nexport interface CollectionHeroStat {\n label: string;\n display: string;\n\n symbol?: string | null;\n}\n\nexport interface CollectionHeroBannerProps {\n bannerUrl: string | null;\n loading?: boolean;\n standard?: string | null;\n symbol?: string | null;\n name: string;\n stats: CollectionHeroStat[];\n className?: string;\n}\n\nexport function CollectionHeroBanner({\n bannerUrl,\n loading = false,\n standard,\n symbol,\n name,\n stats,\n className,\n}: CollectionHeroBannerProps) {\n const { scrollY } = useScroll();\n const shouldReduce = useReducedMotion();\n const y = useTransform(scrollY, [0, 500], [0, shouldReduce ? 0 : 150]);\n\n return (\n <>\n\n <div className=\"fixed inset-0 -z-10 overflow-hidden pointer-events-none\">\n {bannerUrl && (\n <img\n src={bannerUrl}\n alt=\"\"\n aria-hidden\n className=\"absolute inset-0 w-full h-full object-cover opacity-20 scale-110\"\n style={{ filter: \"blur(60px) saturate(1.5)\" }}\n />\n )}\n </div>\n\n {loading ? (\n <Skeleton className={cn(\"w-full h-[50svh]\", className)} />\n ) : (\n <div className={cn(\"relative w-full overflow-hidden h-[50svh]\", className)}>\n {bannerUrl ? (\n <motion.img\n src={bannerUrl}\n alt=\"\"\n aria-hidden\n style={{ y }}\n className=\"absolute inset-0 w-full h-full object-cover scale-110\"\n />\n ) : (\n <div className=\"absolute inset-0 w-full h-full bg-muted\" />\n )}\n\n <div className=\"absolute bottom-0 left-0 right-0 px-4 sm:px-6 pb-4 sm:pb-6 space-y-3 z-10\">\n {(standard || symbol) && (\n <div className=\"flex items-center gap-2 flex-wrap\">\n {standard === \"ERC1155\" ? (\n <Eyebrow>Multi-edition NFT</Eyebrow>\n ) : standard === \"ERC721\" ? (\n <Eyebrow>Single NFT</Eyebrow>\n ) : null}\n {symbol && <Eyebrow className=\"tabular-nums\">{symbol}</Eyebrow>}\n </div>\n )}\n\n <h1\n className=\"text-3xl sm:text-5xl lg:text-7xl font-bold text-white leading-tight\"\n style={{ textShadow: \"0 1px 12px rgba(0,0,0,0.4)\" }}\n >\n {name}\n </h1>\n\n <div className=\"flex gap-2 flex-wrap\">\n {stats.map(({ label, display, symbol: statSymbol }) => (\n <div\n key={label}\n className={cn(\n \"bg-white/15 backdrop-blur-md rounded-xl px-3 py-2 flex flex-col justify-center shrink-0\",\n statSymbol ? \"min-w-[80px]\" : \"min-w-[60px] items-center text-center\"\n )}\n >\n <p className=\"text-[9px] text-white/70 mb-1\">{label}</p>\n {statSymbol ? (\n <div className=\"flex items-center gap-1.5\">\n <CurrencyIcon symbol={statSymbol} size={15} />\n <p className=\"text-sm sm:text-base font-bold text-white tabular-nums leading-tight truncate\">\n {display}\n </p>\n </div>\n ) : (\n <p className=\"text-base sm:text-lg font-bold text-white tabular-nums leading-tight\">{display}</p>\n )}\n </div>\n ))}\n </div>\n </div>\n </div>\n )}\n </>\n );\n}\n\nfunction Eyebrow({ children, className }: { children: React.ReactNode; className?: string }) {\n return (\n <span\n className={cn(\n \"text-[11px] font-semibold text-white/90 bg-white/15 backdrop-blur-md rounded-full px-2.5 py-0.5\",\n className\n )}\n >\n {children}\n </span>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
1
|
+
{"version":3,"sources":["../../src/components/collection-hero-banner.tsx"],"sourcesContent":["\"use client\";\n\nimport { motion, useScroll, useTransform, useReducedMotion } from \"framer-motion\";\nimport { cn } from \"../utils/cn.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { Skeleton } from \"./skeleton.js\";\n\nexport interface CollectionHeroStat {\n label: string;\n display: string;\n\n symbol?: string | null;\n}\n\nexport interface CollectionHeroBannerProps {\n bannerUrl: string | null;\n loading?: boolean;\n standard?: string | null;\n symbol?: string | null;\n name: string;\n stats: CollectionHeroStat[];\n className?: string;\n\n /** Extra content rendered alongside the standard/symbol eyebrow pills —\n * e.g. a creator level badge on a creator profile reusing this banner. */\n eyebrowSlot?: React.ReactNode;\n}\n\nexport function CollectionHeroBanner({\n bannerUrl,\n loading = false,\n standard,\n symbol,\n name,\n stats,\n className,\n eyebrowSlot,\n}: CollectionHeroBannerProps) {\n const { scrollY } = useScroll();\n const shouldReduce = useReducedMotion();\n const y = useTransform(scrollY, [0, 500], [0, shouldReduce ? 0 : 150]);\n\n return (\n <>\n\n <div className=\"fixed inset-0 -z-10 overflow-hidden pointer-events-none\">\n {bannerUrl && (\n <img\n src={bannerUrl}\n alt=\"\"\n aria-hidden\n className=\"absolute inset-0 w-full h-full object-cover opacity-20 scale-110\"\n style={{ filter: \"blur(60px) saturate(1.5)\" }}\n />\n )}\n </div>\n\n {loading ? (\n <Skeleton className={cn(\"w-full h-[50svh]\", className)} />\n ) : (\n <div className={cn(\"relative w-full overflow-hidden h-[50svh]\", className)}>\n {bannerUrl ? (\n <motion.img\n src={bannerUrl}\n alt=\"\"\n aria-hidden\n style={{ y }}\n className=\"absolute inset-0 w-full h-full object-cover scale-110\"\n />\n ) : (\n <div className=\"absolute inset-0 w-full h-full bg-muted\" />\n )}\n\n <div className=\"absolute bottom-0 left-0 right-0 px-4 sm:px-6 pb-4 sm:pb-6 space-y-3 z-10\">\n {(standard || symbol || eyebrowSlot) && (\n <div className=\"flex items-center gap-2 flex-wrap\">\n {standard === \"ERC1155\" ? (\n <Eyebrow>Multi-edition NFT</Eyebrow>\n ) : standard === \"ERC721\" ? (\n <Eyebrow>Single NFT</Eyebrow>\n ) : null}\n {symbol && <Eyebrow className=\"tabular-nums\">{symbol}</Eyebrow>}\n {eyebrowSlot}\n </div>\n )}\n\n <h1\n className=\"text-3xl sm:text-5xl lg:text-7xl font-bold text-white leading-tight\"\n style={{ textShadow: \"0 1px 12px rgba(0,0,0,0.4)\" }}\n >\n {name}\n </h1>\n\n <div className=\"flex gap-2 flex-wrap\">\n {stats.map(({ label, display, symbol: statSymbol }) => (\n <div\n key={label}\n className={cn(\n \"bg-white/15 backdrop-blur-md rounded-xl px-3 py-2 flex flex-col justify-center shrink-0\",\n statSymbol ? \"min-w-[80px]\" : \"min-w-[60px] items-center text-center\"\n )}\n >\n <p className=\"text-[9px] text-white/70 mb-1\">{label}</p>\n {statSymbol ? (\n <div className=\"flex items-center gap-1.5\">\n <CurrencyIcon symbol={statSymbol} size={15} />\n <p className=\"text-sm sm:text-base font-bold text-white tabular-nums leading-tight truncate\">\n {display}\n </p>\n </div>\n ) : (\n <p className=\"text-base sm:text-lg font-bold text-white tabular-nums leading-tight\">{display}</p>\n )}\n </div>\n ))}\n </div>\n </div>\n </div>\n )}\n </>\n );\n}\n\nfunction Eyebrow({ children, className }: { children: React.ReactNode; className?: string }) {\n return (\n <span\n className={cn(\n \"text-[11px] font-semibold text-white/90 bg-white/15 backdrop-blur-md rounded-full px-2.5 py-0.5\",\n className\n )}\n >\n {children}\n </span>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2CI;AAzCJ,2BAAkE;AAClE,gBAAmB;AACnB,2BAA6B;AAC7B,sBAAyB;AAuBlB,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,EAAE,QAAQ,QAAI,gCAAU;AAC9B,QAAM,mBAAe,uCAAiB;AACtC,QAAM,QAAI,mCAAa,SAAS,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,eAAe,IAAI,GAAG,CAAC;AAErE,SACE,4EAEE;AAAA,gDAAC,SAAI,WAAU,2DACZ,uBACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,KAAI;AAAA,QACJ,eAAW;AAAA,QACX,WAAU;AAAA,QACV,OAAO,EAAE,QAAQ,2BAA2B;AAAA;AAAA,IAC9C,GAEJ;AAAA,IAEC,UACC,4CAAC,4BAAS,eAAW,cAAG,oBAAoB,SAAS,GAAG,IAExD,6CAAC,SAAI,eAAW,cAAG,6CAA6C,SAAS,GACtE;AAAA,kBACC;AAAA,QAAC,4BAAO;AAAA,QAAP;AAAA,UACC,KAAK;AAAA,UACL,KAAI;AAAA,UACJ,eAAW;AAAA,UACX,OAAO,EAAE,EAAE;AAAA,UACX,WAAU;AAAA;AAAA,MACZ,IAEA,4CAAC,SAAI,WAAU,2CAA0C;AAAA,MAG3D,6CAAC,SAAI,WAAU,6EACX;AAAA,qBAAY,UAAU,gBACtB,6CAAC,SAAI,WAAU,qCACZ;AAAA,uBAAa,YACZ,4CAAC,WAAQ,+BAAiB,IACxB,aAAa,WACf,4CAAC,WAAQ,wBAAU,IACjB;AAAA,UACH,UAAU,4CAAC,WAAQ,WAAU,gBAAgB,kBAAO;AAAA,UACpD;AAAA,WACH;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,6BAA6B;AAAA,YAEjD;AAAA;AAAA,QACH;AAAA,QAEA,4CAAC,SAAI,WAAU,wBACZ,gBAAM,IAAI,CAAC,EAAE,OAAO,SAAS,QAAQ,WAAW,MAC/C;AAAA,UAAC;AAAA;AAAA,YAEC,eAAW;AAAA,cACT;AAAA,cACA,aAAa,iBAAiB;AAAA,YAChC;AAAA,YAEA;AAAA,0DAAC,OAAE,WAAU,iCAAiC,iBAAM;AAAA,cACnD,aACC,6CAAC,SAAI,WAAU,6BACb;AAAA,4DAAC,qCAAa,QAAQ,YAAY,MAAM,IAAI;AAAA,gBAC5C,4CAAC,OAAE,WAAU,iFACV,mBACH;AAAA,iBACF,IAEA,4CAAC,OAAE,WAAU,wEAAwE,mBAAQ;AAAA;AAAA;AAAA,UAf1F;AAAA,QAiBP,CACD,GACH;AAAA,SACF;AAAA,OACF;AAAA,KAEJ;AAEJ;AAEA,SAAS,QAAQ,EAAE,UAAU,UAAU,GAAsD;AAC3F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}
|
|
@@ -13,7 +13,10 @@ interface CollectionHeroBannerProps {
|
|
|
13
13
|
name: string;
|
|
14
14
|
stats: CollectionHeroStat[];
|
|
15
15
|
className?: string;
|
|
16
|
+
/** Extra content rendered alongside the standard/symbol eyebrow pills —
|
|
17
|
+
* e.g. a creator level badge on a creator profile reusing this banner. */
|
|
18
|
+
eyebrowSlot?: React.ReactNode;
|
|
16
19
|
}
|
|
17
|
-
declare function CollectionHeroBanner({ bannerUrl, loading, standard, symbol, name, stats, className, }: CollectionHeroBannerProps): react_jsx_runtime.JSX.Element;
|
|
20
|
+
declare function CollectionHeroBanner({ bannerUrl, loading, standard, symbol, name, stats, className, eyebrowSlot, }: CollectionHeroBannerProps): react_jsx_runtime.JSX.Element;
|
|
18
21
|
|
|
19
22
|
export { CollectionHeroBanner, type CollectionHeroBannerProps, type CollectionHeroStat };
|
|
@@ -13,7 +13,10 @@ interface CollectionHeroBannerProps {
|
|
|
13
13
|
name: string;
|
|
14
14
|
stats: CollectionHeroStat[];
|
|
15
15
|
className?: string;
|
|
16
|
+
/** Extra content rendered alongside the standard/symbol eyebrow pills —
|
|
17
|
+
* e.g. a creator level badge on a creator profile reusing this banner. */
|
|
18
|
+
eyebrowSlot?: React.ReactNode;
|
|
16
19
|
}
|
|
17
|
-
declare function CollectionHeroBanner({ bannerUrl, loading, standard, symbol, name, stats, className, }: CollectionHeroBannerProps): react_jsx_runtime.JSX.Element;
|
|
20
|
+
declare function CollectionHeroBanner({ bannerUrl, loading, standard, symbol, name, stats, className, eyebrowSlot, }: CollectionHeroBannerProps): react_jsx_runtime.JSX.Element;
|
|
18
21
|
|
|
19
22
|
export { CollectionHeroBanner, type CollectionHeroBannerProps, type CollectionHeroStat };
|
|
@@ -11,7 +11,8 @@ function CollectionHeroBanner({
|
|
|
11
11
|
symbol,
|
|
12
12
|
name,
|
|
13
13
|
stats,
|
|
14
|
-
className
|
|
14
|
+
className,
|
|
15
|
+
eyebrowSlot
|
|
15
16
|
}) {
|
|
16
17
|
const { scrollY } = useScroll();
|
|
17
18
|
const shouldReduce = useReducedMotion();
|
|
@@ -39,9 +40,10 @@ function CollectionHeroBanner({
|
|
|
39
40
|
}
|
|
40
41
|
) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 w-full h-full bg-muted" }),
|
|
41
42
|
/* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 px-4 sm:px-6 pb-4 sm:pb-6 space-y-3 z-10", children: [
|
|
42
|
-
(standard || symbol) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
|
|
43
|
+
(standard || symbol || eyebrowSlot) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
|
|
43
44
|
standard === "ERC1155" ? /* @__PURE__ */ jsx(Eyebrow, { children: "Multi-edition NFT" }) : standard === "ERC721" ? /* @__PURE__ */ jsx(Eyebrow, { children: "Single NFT" }) : null,
|
|
44
|
-
symbol && /* @__PURE__ */ jsx(Eyebrow, { className: "tabular-nums", children: symbol })
|
|
45
|
+
symbol && /* @__PURE__ */ jsx(Eyebrow, { className: "tabular-nums", children: symbol }),
|
|
46
|
+
eyebrowSlot
|
|
45
47
|
] }),
|
|
46
48
|
/* @__PURE__ */ jsx(
|
|
47
49
|
"h1",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/collection-hero-banner.tsx"],"sourcesContent":["\"use client\";\n\nimport { motion, useScroll, useTransform, useReducedMotion } from \"framer-motion\";\nimport { cn } from \"../utils/cn.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { Skeleton } from \"./skeleton.js\";\n\nexport interface CollectionHeroStat {\n label: string;\n display: string;\n\n symbol?: string | null;\n}\n\nexport interface CollectionHeroBannerProps {\n bannerUrl: string | null;\n loading?: boolean;\n standard?: string | null;\n symbol?: string | null;\n name: string;\n stats: CollectionHeroStat[];\n className?: string;\n}\n\nexport function CollectionHeroBanner({\n bannerUrl,\n loading = false,\n standard,\n symbol,\n name,\n stats,\n className,\n}: CollectionHeroBannerProps) {\n const { scrollY } = useScroll();\n const shouldReduce = useReducedMotion();\n const y = useTransform(scrollY, [0, 500], [0, shouldReduce ? 0 : 150]);\n\n return (\n <>\n\n <div className=\"fixed inset-0 -z-10 overflow-hidden pointer-events-none\">\n {bannerUrl && (\n <img\n src={bannerUrl}\n alt=\"\"\n aria-hidden\n className=\"absolute inset-0 w-full h-full object-cover opacity-20 scale-110\"\n style={{ filter: \"blur(60px) saturate(1.5)\" }}\n />\n )}\n </div>\n\n {loading ? (\n <Skeleton className={cn(\"w-full h-[50svh]\", className)} />\n ) : (\n <div className={cn(\"relative w-full overflow-hidden h-[50svh]\", className)}>\n {bannerUrl ? (\n <motion.img\n src={bannerUrl}\n alt=\"\"\n aria-hidden\n style={{ y }}\n className=\"absolute inset-0 w-full h-full object-cover scale-110\"\n />\n ) : (\n <div className=\"absolute inset-0 w-full h-full bg-muted\" />\n )}\n\n <div className=\"absolute bottom-0 left-0 right-0 px-4 sm:px-6 pb-4 sm:pb-6 space-y-3 z-10\">\n {(standard || symbol) && (\n <div className=\"flex items-center gap-2 flex-wrap\">\n {standard === \"ERC1155\" ? (\n <Eyebrow>Multi-edition NFT</Eyebrow>\n ) : standard === \"ERC721\" ? (\n <Eyebrow>Single NFT</Eyebrow>\n ) : null}\n {symbol && <Eyebrow className=\"tabular-nums\">{symbol}</Eyebrow>}\n </div>\n )}\n\n <h1\n className=\"text-3xl sm:text-5xl lg:text-7xl font-bold text-white leading-tight\"\n style={{ textShadow: \"0 1px 12px rgba(0,0,0,0.4)\" }}\n >\n {name}\n </h1>\n\n <div className=\"flex gap-2 flex-wrap\">\n {stats.map(({ label, display, symbol: statSymbol }) => (\n <div\n key={label}\n className={cn(\n \"bg-white/15 backdrop-blur-md rounded-xl px-3 py-2 flex flex-col justify-center shrink-0\",\n statSymbol ? \"min-w-[80px]\" : \"min-w-[60px] items-center text-center\"\n )}\n >\n <p className=\"text-[9px] text-white/70 mb-1\">{label}</p>\n {statSymbol ? (\n <div className=\"flex items-center gap-1.5\">\n <CurrencyIcon symbol={statSymbol} size={15} />\n <p className=\"text-sm sm:text-base font-bold text-white tabular-nums leading-tight truncate\">\n {display}\n </p>\n </div>\n ) : (\n <p className=\"text-base sm:text-lg font-bold text-white tabular-nums leading-tight\">{display}</p>\n )}\n </div>\n ))}\n </div>\n </div>\n </div>\n )}\n </>\n );\n}\n\nfunction Eyebrow({ children, className }: { children: React.ReactNode; className?: string }) {\n return (\n <span\n className={cn(\n \"text-[11px] font-semibold text-white/90 bg-white/15 backdrop-blur-md rounded-full px-2.5 py-0.5\",\n className\n )}\n >\n {children}\n </span>\n );\n}\n"],"mappings":";
|
|
1
|
+
{"version":3,"sources":["../../src/components/collection-hero-banner.tsx"],"sourcesContent":["\"use client\";\n\nimport { motion, useScroll, useTransform, useReducedMotion } from \"framer-motion\";\nimport { cn } from \"../utils/cn.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { Skeleton } from \"./skeleton.js\";\n\nexport interface CollectionHeroStat {\n label: string;\n display: string;\n\n symbol?: string | null;\n}\n\nexport interface CollectionHeroBannerProps {\n bannerUrl: string | null;\n loading?: boolean;\n standard?: string | null;\n symbol?: string | null;\n name: string;\n stats: CollectionHeroStat[];\n className?: string;\n\n /** Extra content rendered alongside the standard/symbol eyebrow pills —\n * e.g. a creator level badge on a creator profile reusing this banner. */\n eyebrowSlot?: React.ReactNode;\n}\n\nexport function CollectionHeroBanner({\n bannerUrl,\n loading = false,\n standard,\n symbol,\n name,\n stats,\n className,\n eyebrowSlot,\n}: CollectionHeroBannerProps) {\n const { scrollY } = useScroll();\n const shouldReduce = useReducedMotion();\n const y = useTransform(scrollY, [0, 500], [0, shouldReduce ? 0 : 150]);\n\n return (\n <>\n\n <div className=\"fixed inset-0 -z-10 overflow-hidden pointer-events-none\">\n {bannerUrl && (\n <img\n src={bannerUrl}\n alt=\"\"\n aria-hidden\n className=\"absolute inset-0 w-full h-full object-cover opacity-20 scale-110\"\n style={{ filter: \"blur(60px) saturate(1.5)\" }}\n />\n )}\n </div>\n\n {loading ? (\n <Skeleton className={cn(\"w-full h-[50svh]\", className)} />\n ) : (\n <div className={cn(\"relative w-full overflow-hidden h-[50svh]\", className)}>\n {bannerUrl ? (\n <motion.img\n src={bannerUrl}\n alt=\"\"\n aria-hidden\n style={{ y }}\n className=\"absolute inset-0 w-full h-full object-cover scale-110\"\n />\n ) : (\n <div className=\"absolute inset-0 w-full h-full bg-muted\" />\n )}\n\n <div className=\"absolute bottom-0 left-0 right-0 px-4 sm:px-6 pb-4 sm:pb-6 space-y-3 z-10\">\n {(standard || symbol || eyebrowSlot) && (\n <div className=\"flex items-center gap-2 flex-wrap\">\n {standard === \"ERC1155\" ? (\n <Eyebrow>Multi-edition NFT</Eyebrow>\n ) : standard === \"ERC721\" ? (\n <Eyebrow>Single NFT</Eyebrow>\n ) : null}\n {symbol && <Eyebrow className=\"tabular-nums\">{symbol}</Eyebrow>}\n {eyebrowSlot}\n </div>\n )}\n\n <h1\n className=\"text-3xl sm:text-5xl lg:text-7xl font-bold text-white leading-tight\"\n style={{ textShadow: \"0 1px 12px rgba(0,0,0,0.4)\" }}\n >\n {name}\n </h1>\n\n <div className=\"flex gap-2 flex-wrap\">\n {stats.map(({ label, display, symbol: statSymbol }) => (\n <div\n key={label}\n className={cn(\n \"bg-white/15 backdrop-blur-md rounded-xl px-3 py-2 flex flex-col justify-center shrink-0\",\n statSymbol ? \"min-w-[80px]\" : \"min-w-[60px] items-center text-center\"\n )}\n >\n <p className=\"text-[9px] text-white/70 mb-1\">{label}</p>\n {statSymbol ? (\n <div className=\"flex items-center gap-1.5\">\n <CurrencyIcon symbol={statSymbol} size={15} />\n <p className=\"text-sm sm:text-base font-bold text-white tabular-nums leading-tight truncate\">\n {display}\n </p>\n </div>\n ) : (\n <p className=\"text-base sm:text-lg font-bold text-white tabular-nums leading-tight\">{display}</p>\n )}\n </div>\n ))}\n </div>\n </div>\n </div>\n )}\n </>\n );\n}\n\nfunction Eyebrow({ children, className }: { children: React.ReactNode; className?: string }) {\n return (\n <span\n className={cn(\n \"text-[11px] font-semibold text-white/90 bg-white/15 backdrop-blur-md rounded-full px-2.5 py-0.5\",\n className\n )}\n >\n {children}\n </span>\n );\n}\n"],"mappings":";AA2CI,mBAIM,KA4BI,YAhCV;AAzCJ,SAAS,QAAQ,WAAW,cAAc,wBAAwB;AAClE,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AAuBlB,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,EAAE,QAAQ,IAAI,UAAU;AAC9B,QAAM,eAAe,iBAAiB;AACtC,QAAM,IAAI,aAAa,SAAS,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,eAAe,IAAI,GAAG,CAAC;AAErE,SACE,iCAEE;AAAA,wBAAC,SAAI,WAAU,2DACZ,uBACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,KAAI;AAAA,QACJ,eAAW;AAAA,QACX,WAAU;AAAA,QACV,OAAO,EAAE,QAAQ,2BAA2B;AAAA;AAAA,IAC9C,GAEJ;AAAA,IAEC,UACC,oBAAC,YAAS,WAAW,GAAG,oBAAoB,SAAS,GAAG,IAExD,qBAAC,SAAI,WAAW,GAAG,6CAA6C,SAAS,GACtE;AAAA,kBACC;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,KAAK;AAAA,UACL,KAAI;AAAA,UACJ,eAAW;AAAA,UACX,OAAO,EAAE,EAAE;AAAA,UACX,WAAU;AAAA;AAAA,MACZ,IAEA,oBAAC,SAAI,WAAU,2CAA0C;AAAA,MAG3D,qBAAC,SAAI,WAAU,6EACX;AAAA,qBAAY,UAAU,gBACtB,qBAAC,SAAI,WAAU,qCACZ;AAAA,uBAAa,YACZ,oBAAC,WAAQ,+BAAiB,IACxB,aAAa,WACf,oBAAC,WAAQ,wBAAU,IACjB;AAAA,UACH,UAAU,oBAAC,WAAQ,WAAU,gBAAgB,kBAAO;AAAA,UACpD;AAAA,WACH;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,6BAA6B;AAAA,YAEjD;AAAA;AAAA,QACH;AAAA,QAEA,oBAAC,SAAI,WAAU,wBACZ,gBAAM,IAAI,CAAC,EAAE,OAAO,SAAS,QAAQ,WAAW,MAC/C;AAAA,UAAC;AAAA;AAAA,YAEC,WAAW;AAAA,cACT;AAAA,cACA,aAAa,iBAAiB;AAAA,YAChC;AAAA,YAEA;AAAA,kCAAC,OAAE,WAAU,iCAAiC,iBAAM;AAAA,cACnD,aACC,qBAAC,SAAI,WAAU,6BACb;AAAA,oCAAC,gBAAa,QAAQ,YAAY,MAAM,IAAI;AAAA,gBAC5C,oBAAC,OAAE,WAAU,iFACV,mBACH;AAAA,iBACF,IAEA,oBAAC,OAAE,WAAU,wEAAwE,mBAAQ;AAAA;AAAA;AAAA,UAf1F;AAAA,QAiBP,CACD,GACH;AAAA,SACF;AAAA,OACF;AAAA,KAEJ;AAEJ;AAEA,SAAS,QAAQ,EAAE,UAAU,UAAU,GAAsD;AAC3F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}
|