@medialane/ui 0.3.2 → 0.3.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.
|
@@ -27,11 +27,6 @@ var import_react = require("react");
|
|
|
27
27
|
var import_lucide_react = require("lucide-react");
|
|
28
28
|
var import_motion_primitives = require("./motion-primitives.js");
|
|
29
29
|
var import_ipfs = require("../utils/ipfs.js");
|
|
30
|
-
function hslGradient(seed) {
|
|
31
|
-
const hue = seed.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360;
|
|
32
|
-
const hue2 = (hue + 60) % 360;
|
|
33
|
-
return `linear-gradient(135deg, hsl(${hue},55%,35%), hsl(${hue2},50%,22%))`;
|
|
34
|
-
}
|
|
35
30
|
function CreatorChipSkeleton() {
|
|
36
31
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0 w-64 aspect-[3/4] rounded-xl bg-muted animate-pulse" });
|
|
37
32
|
}
|
|
@@ -41,17 +36,18 @@ function CreatorChip({
|
|
|
41
36
|
}) {
|
|
42
37
|
const [avatarError, setAvatarError] = (0, import_react.useState)(false);
|
|
43
38
|
const [bannerError, setBannerError] = (0, import_react.useState)(false);
|
|
44
|
-
const
|
|
45
|
-
const
|
|
39
|
+
const bannerSrc = creator.bannerImage ?? creator.collectionImage ?? null;
|
|
40
|
+
const avatarSrc = creator.avatarImage ?? creator.collectionImage ?? null;
|
|
41
|
+
const bannerUrl = bannerSrc && !bannerError ? (0, import_ipfs.ipfsToHttp)(bannerSrc) : null;
|
|
42
|
+
const avatarUrl = avatarSrc && !avatarError ? (0, import_ipfs.ipfsToHttp)(avatarSrc) : null;
|
|
46
43
|
const displayName = creator.displayName || `@${creator.username}`;
|
|
47
|
-
const gradient = hslGradient(creator.username ?? "a");
|
|
48
44
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
49
45
|
"a",
|
|
50
46
|
{
|
|
51
47
|
href,
|
|
52
48
|
className: "block shrink-0 w-64 snap-start active:scale-[0.97] transition-transform duration-150 select-none",
|
|
53
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-[3/4] rounded-xl overflow-hidden", children: [
|
|
54
|
-
bannerUrl
|
|
49
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-[3/4] rounded-xl overflow-hidden bg-muted", children: [
|
|
50
|
+
bannerUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
55
51
|
"img",
|
|
56
52
|
{
|
|
57
53
|
src: bannerUrl,
|
|
@@ -61,26 +57,19 @@ function CreatorChip({
|
|
|
61
57
|
className: "absolute inset-0 w-full h-full object-cover",
|
|
62
58
|
onError: () => setBannerError(true)
|
|
63
59
|
}
|
|
64
|
-
)
|
|
60
|
+
),
|
|
65
61
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" }),
|
|
66
62
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute bottom-0 inset-x-0 p-2.5 space-y-1.5", children: [
|
|
67
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
68
|
-
"
|
|
63
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-8 w-8 rounded-full ring-2 ring-white/20 overflow-hidden bg-muted flex items-center justify-center", children: avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
64
|
+
"img",
|
|
69
65
|
{
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
src: avatarUrl,
|
|
76
|
-
alt: displayName ?? "",
|
|
77
|
-
loading: "lazy",
|
|
78
|
-
className: "h-full w-full object-cover",
|
|
79
|
-
onError: () => setAvatarError(true)
|
|
80
|
-
}
|
|
81
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs font-black text-white", children: (displayName ?? "?").charAt(0).toUpperCase() })
|
|
66
|
+
src: avatarUrl,
|
|
67
|
+
alt: displayName ?? "",
|
|
68
|
+
loading: "lazy",
|
|
69
|
+
className: "h-full w-full object-cover",
|
|
70
|
+
onError: () => setAvatarError(true)
|
|
82
71
|
}
|
|
83
|
-
),
|
|
72
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs font-black text-white/60", children: (displayName ?? "?").charAt(0).toUpperCase() }) }),
|
|
84
73
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
85
74
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-bold text-white text-xs truncate", children: displayName }),
|
|
86
75
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-[10px] text-white/55 flex items-center gap-0.5", children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/discover-creators-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Users, ArrowRight, AtSign } from \"lucide-react\";\nimport { FadeIn } from \"./motion-primitives.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport type { ApiCreatorProfile } from \"@medialane/sdk\";\n\nexport interface DiscoverCreatorsStripProps {\n creators: ApiCreatorProfile[];\n isLoading: boolean;\n getHref: (creator: ApiCreatorProfile) => string;\n allCreatorsHref?: string;\n}\n\nfunction
|
|
1
|
+
{"version":3,"sources":["../../src/components/discover-creators-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Users, ArrowRight, AtSign } from \"lucide-react\";\nimport { FadeIn } from \"./motion-primitives.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport type { ApiCreatorProfile } from \"@medialane/sdk\";\n\nexport interface DiscoverCreatorsStripProps {\n creators: ApiCreatorProfile[];\n isLoading: boolean;\n getHref: (creator: ApiCreatorProfile) => string;\n allCreatorsHref?: string;\n}\n\nfunction CreatorChipSkeleton() {\n return (\n <div className=\"shrink-0 w-64 aspect-[3/4] rounded-xl bg-muted animate-pulse\" />\n );\n}\n\nfunction CreatorChip({\n creator,\n href,\n}: {\n creator: ApiCreatorProfile;\n href: string;\n}) {\n const [avatarError, setAvatarError] = useState(false);\n const [bannerError, setBannerError] = useState(false);\n\n const bannerSrc = creator.bannerImage ?? creator.collectionImage ?? null;\n const avatarSrc = creator.avatarImage ?? creator.collectionImage ?? null;\n\n const bannerUrl = bannerSrc && !bannerError ? ipfsToHttp(bannerSrc) : null;\n const avatarUrl = avatarSrc && !avatarError ? ipfsToHttp(avatarSrc) : null;\n\n const displayName = creator.displayName || `@${creator.username}`;\n\n return (\n <a\n href={href}\n className=\"block shrink-0 w-64 snap-start active:scale-[0.97] transition-transform duration-150 select-none\"\n >\n <div className=\"relative aspect-[3/4] rounded-xl overflow-hidden bg-muted\">\n {bannerUrl && (\n <img\n src={bannerUrl}\n alt=\"\"\n aria-hidden\n loading=\"lazy\"\n className=\"absolute inset-0 w-full h-full object-cover\"\n onError={() => setBannerError(true)}\n />\n )}\n <div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent\" />\n <div className=\"absolute bottom-0 inset-x-0 p-2.5 space-y-1.5\">\n <div className=\"h-8 w-8 rounded-full ring-2 ring-white/20 overflow-hidden bg-muted flex items-center justify-center\">\n {avatarUrl ? (\n <img\n src={avatarUrl}\n alt={displayName ?? \"\"}\n loading=\"lazy\"\n className=\"h-full w-full object-cover\"\n onError={() => setAvatarError(true)}\n />\n ) : (\n <span className=\"text-xs font-black text-white/60\">\n {(displayName ?? \"?\").charAt(0).toUpperCase()}\n </span>\n )}\n </div>\n <div>\n <p className=\"font-bold text-white text-xs truncate\">{displayName}</p>\n <p className=\"text-[10px] text-white/55 flex items-center gap-0.5\">\n <AtSign className=\"h-2 w-2 shrink-0\" />\n <span className=\"truncate\">{creator.username}</span>\n </p>\n </div>\n </div>\n </div>\n </a>\n );\n}\n\nexport function DiscoverCreatorsStrip({\n creators,\n isLoading,\n getHref,\n allCreatorsHref = \"/creators\",\n}: DiscoverCreatorsStripProps) {\n if (!isLoading && creators.length === 0) return null;\n\n return (\n <FadeIn>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"section-label\">Creator network</p>\n <div className=\"flex items-center gap-2 mt-0.5\">\n <Users className=\"h-4 w-4 text-brand-purple\" />\n <h2 className=\"text-lg font-bold\">Creators</h2>\n </div>\n </div>\n <a\n href={allCreatorsHref}\n className=\"inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors\"\n >\n View all <ArrowRight className=\"h-3.5 w-3.5\" />\n </a>\n </div>\n <div className=\"overflow-x-auto scrollbar-hide snap-x snap-mandatory -mx-4 px-4 md:mx-0 md:px-0\">\n <div className=\"flex gap-3 w-max pb-1\">\n {isLoading\n ? Array.from({ length: 6 }).map((_, i) => <CreatorChipSkeleton key={i} />)\n : creators.map((c) => (\n <CreatorChip key={c.walletAddress} creator={c} href={getHref(c)} />\n ))}\n </div>\n </div>\n </div>\n </FadeIn>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBI;AAfJ,mBAAyB;AACzB,0BAA0C;AAC1C,+BAAuB;AACvB,kBAA2B;AAU3B,SAAS,sBAAsB;AAC7B,SACE,4CAAC,SAAI,WAAU,gEAA+D;AAElF;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,QAAM,YAAY,QAAQ,eAAe,QAAQ,mBAAmB;AACpE,QAAM,YAAY,QAAQ,eAAe,QAAQ,mBAAmB;AAEpE,QAAM,YAAY,aAAa,CAAC,kBAAc,wBAAW,SAAS,IAAI;AACtE,QAAM,YAAY,aAAa,CAAC,kBAAc,wBAAW,SAAS,IAAI;AAEtE,QAAM,cAAc,QAAQ,eAAe,IAAI,QAAQ,QAAQ;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MAEV,uDAAC,SAAI,WAAU,6DACZ;AAAA,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAI;AAAA,YACJ,eAAW;AAAA,YACX,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,SAAS,MAAM,eAAe,IAAI;AAAA;AAAA,QACpC;AAAA,QAEF,4CAAC,SAAI,WAAU,+EAA8E;AAAA,QAC7F,6CAAC,SAAI,WAAU,iDACb;AAAA,sDAAC,SAAI,WAAU,uGACZ,sBACC;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK,eAAe;AAAA,cACpB,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,SAAS,MAAM,eAAe,IAAI;AAAA;AAAA,UACpC,IAEA,4CAAC,UAAK,WAAU,oCACZ,0BAAe,KAAK,OAAO,CAAC,EAAE,YAAY,GAC9C,GAEJ;AAAA,UACA,6CAAC,SACC;AAAA,wDAAC,OAAE,WAAU,yCAAyC,uBAAY;AAAA,YAClE,6CAAC,OAAE,WAAU,uDACX;AAAA,0DAAC,8BAAO,WAAU,oBAAmB;AAAA,cACrC,4CAAC,UAAK,WAAU,YAAY,kBAAQ,UAAS;AAAA,eAC/C;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACpB,GAA+B;AAC7B,MAAI,CAAC,aAAa,SAAS,WAAW,EAAG,QAAO;AAEhD,SACE,4CAAC,mCACC,uDAAC,SAAI,WAAU,aACb;AAAA,iDAAC,SAAI,WAAU,qCACb;AAAA,mDAAC,SACC;AAAA,oDAAC,OAAE,WAAU,iBAAgB,6BAAe;AAAA,QAC5C,6CAAC,SAAI,WAAU,kCACb;AAAA,sDAAC,6BAAM,WAAU,6BAA4B;AAAA,UAC7C,4CAAC,QAAG,WAAU,qBAAoB,sBAAQ;AAAA,WAC5C;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACX;AAAA;AAAA,YACU,4CAAC,kCAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MAC/C;AAAA,OACF;AAAA,IACA,4CAAC,SAAI,WAAU,mFACb,sDAAC,SAAI,WAAU,yBACZ,sBACG,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM,4CAAC,yBAAyB,CAAG,CAAE,IACvE,SAAS,IAAI,CAAC,MACZ,4CAAC,eAAkC,SAAS,GAAG,MAAM,QAAQ,CAAC,KAA5C,EAAE,aAA6C,CAClE,GACP,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}
|
|
@@ -4,11 +4,6 @@ import { useState } from "react";
|
|
|
4
4
|
import { Users, ArrowRight, AtSign } from "lucide-react";
|
|
5
5
|
import { FadeIn } from "./motion-primitives.js";
|
|
6
6
|
import { ipfsToHttp } from "../utils/ipfs.js";
|
|
7
|
-
function hslGradient(seed) {
|
|
8
|
-
const hue = seed.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360;
|
|
9
|
-
const hue2 = (hue + 60) % 360;
|
|
10
|
-
return `linear-gradient(135deg, hsl(${hue},55%,35%), hsl(${hue2},50%,22%))`;
|
|
11
|
-
}
|
|
12
7
|
function CreatorChipSkeleton() {
|
|
13
8
|
return /* @__PURE__ */ jsx("div", { className: "shrink-0 w-64 aspect-[3/4] rounded-xl bg-muted animate-pulse" });
|
|
14
9
|
}
|
|
@@ -18,17 +13,18 @@ function CreatorChip({
|
|
|
18
13
|
}) {
|
|
19
14
|
const [avatarError, setAvatarError] = useState(false);
|
|
20
15
|
const [bannerError, setBannerError] = useState(false);
|
|
21
|
-
const
|
|
22
|
-
const
|
|
16
|
+
const bannerSrc = creator.bannerImage ?? creator.collectionImage ?? null;
|
|
17
|
+
const avatarSrc = creator.avatarImage ?? creator.collectionImage ?? null;
|
|
18
|
+
const bannerUrl = bannerSrc && !bannerError ? ipfsToHttp(bannerSrc) : null;
|
|
19
|
+
const avatarUrl = avatarSrc && !avatarError ? ipfsToHttp(avatarSrc) : null;
|
|
23
20
|
const displayName = creator.displayName || `@${creator.username}`;
|
|
24
|
-
const gradient = hslGradient(creator.username ?? "a");
|
|
25
21
|
return /* @__PURE__ */ jsx(
|
|
26
22
|
"a",
|
|
27
23
|
{
|
|
28
24
|
href,
|
|
29
25
|
className: "block shrink-0 w-64 snap-start active:scale-[0.97] transition-transform duration-150 select-none",
|
|
30
|
-
children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[3/4] rounded-xl overflow-hidden", children: [
|
|
31
|
-
bannerUrl
|
|
26
|
+
children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[3/4] rounded-xl overflow-hidden bg-muted", children: [
|
|
27
|
+
bannerUrl && /* @__PURE__ */ jsx(
|
|
32
28
|
"img",
|
|
33
29
|
{
|
|
34
30
|
src: bannerUrl,
|
|
@@ -38,26 +34,19 @@ function CreatorChip({
|
|
|
38
34
|
className: "absolute inset-0 w-full h-full object-cover",
|
|
39
35
|
onError: () => setBannerError(true)
|
|
40
36
|
}
|
|
41
|
-
)
|
|
37
|
+
),
|
|
42
38
|
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" }),
|
|
43
39
|
/* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 inset-x-0 p-2.5 space-y-1.5", children: [
|
|
44
|
-
/* @__PURE__ */ jsx(
|
|
45
|
-
"
|
|
40
|
+
/* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full ring-2 ring-white/20 overflow-hidden bg-muted flex items-center justify-center", children: avatarUrl ? /* @__PURE__ */ jsx(
|
|
41
|
+
"img",
|
|
46
42
|
{
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
src: avatarUrl,
|
|
53
|
-
alt: displayName ?? "",
|
|
54
|
-
loading: "lazy",
|
|
55
|
-
className: "h-full w-full object-cover",
|
|
56
|
-
onError: () => setAvatarError(true)
|
|
57
|
-
}
|
|
58
|
-
) : /* @__PURE__ */ jsx("span", { className: "text-xs font-black text-white", children: (displayName ?? "?").charAt(0).toUpperCase() })
|
|
43
|
+
src: avatarUrl,
|
|
44
|
+
alt: displayName ?? "",
|
|
45
|
+
loading: "lazy",
|
|
46
|
+
className: "h-full w-full object-cover",
|
|
47
|
+
onError: () => setAvatarError(true)
|
|
59
48
|
}
|
|
60
|
-
),
|
|
49
|
+
) : /* @__PURE__ */ jsx("span", { className: "text-xs font-black text-white/60", children: (displayName ?? "?").charAt(0).toUpperCase() }) }),
|
|
61
50
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
62
51
|
/* @__PURE__ */ jsx("p", { className: "font-bold text-white text-xs truncate", children: displayName }),
|
|
63
52
|
/* @__PURE__ */ jsxs("p", { className: "text-[10px] text-white/55 flex items-center gap-0.5", children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/discover-creators-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Users, ArrowRight, AtSign } from \"lucide-react\";\nimport { FadeIn } from \"./motion-primitives.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport type { ApiCreatorProfile } from \"@medialane/sdk\";\n\nexport interface DiscoverCreatorsStripProps {\n creators: ApiCreatorProfile[];\n isLoading: boolean;\n getHref: (creator: ApiCreatorProfile) => string;\n allCreatorsHref?: string;\n}\n\nfunction
|
|
1
|
+
{"version":3,"sources":["../../src/components/discover-creators-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Users, ArrowRight, AtSign } from \"lucide-react\";\nimport { FadeIn } from \"./motion-primitives.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport type { ApiCreatorProfile } from \"@medialane/sdk\";\n\nexport interface DiscoverCreatorsStripProps {\n creators: ApiCreatorProfile[];\n isLoading: boolean;\n getHref: (creator: ApiCreatorProfile) => string;\n allCreatorsHref?: string;\n}\n\nfunction CreatorChipSkeleton() {\n return (\n <div className=\"shrink-0 w-64 aspect-[3/4] rounded-xl bg-muted animate-pulse\" />\n );\n}\n\nfunction CreatorChip({\n creator,\n href,\n}: {\n creator: ApiCreatorProfile;\n href: string;\n}) {\n const [avatarError, setAvatarError] = useState(false);\n const [bannerError, setBannerError] = useState(false);\n\n const bannerSrc = creator.bannerImage ?? creator.collectionImage ?? null;\n const avatarSrc = creator.avatarImage ?? creator.collectionImage ?? null;\n\n const bannerUrl = bannerSrc && !bannerError ? ipfsToHttp(bannerSrc) : null;\n const avatarUrl = avatarSrc && !avatarError ? ipfsToHttp(avatarSrc) : null;\n\n const displayName = creator.displayName || `@${creator.username}`;\n\n return (\n <a\n href={href}\n className=\"block shrink-0 w-64 snap-start active:scale-[0.97] transition-transform duration-150 select-none\"\n >\n <div className=\"relative aspect-[3/4] rounded-xl overflow-hidden bg-muted\">\n {bannerUrl && (\n <img\n src={bannerUrl}\n alt=\"\"\n aria-hidden\n loading=\"lazy\"\n className=\"absolute inset-0 w-full h-full object-cover\"\n onError={() => setBannerError(true)}\n />\n )}\n <div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent\" />\n <div className=\"absolute bottom-0 inset-x-0 p-2.5 space-y-1.5\">\n <div className=\"h-8 w-8 rounded-full ring-2 ring-white/20 overflow-hidden bg-muted flex items-center justify-center\">\n {avatarUrl ? (\n <img\n src={avatarUrl}\n alt={displayName ?? \"\"}\n loading=\"lazy\"\n className=\"h-full w-full object-cover\"\n onError={() => setAvatarError(true)}\n />\n ) : (\n <span className=\"text-xs font-black text-white/60\">\n {(displayName ?? \"?\").charAt(0).toUpperCase()}\n </span>\n )}\n </div>\n <div>\n <p className=\"font-bold text-white text-xs truncate\">{displayName}</p>\n <p className=\"text-[10px] text-white/55 flex items-center gap-0.5\">\n <AtSign className=\"h-2 w-2 shrink-0\" />\n <span className=\"truncate\">{creator.username}</span>\n </p>\n </div>\n </div>\n </div>\n </a>\n );\n}\n\nexport function DiscoverCreatorsStrip({\n creators,\n isLoading,\n getHref,\n allCreatorsHref = \"/creators\",\n}: DiscoverCreatorsStripProps) {\n if (!isLoading && creators.length === 0) return null;\n\n return (\n <FadeIn>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"section-label\">Creator network</p>\n <div className=\"flex items-center gap-2 mt-0.5\">\n <Users className=\"h-4 w-4 text-brand-purple\" />\n <h2 className=\"text-lg font-bold\">Creators</h2>\n </div>\n </div>\n <a\n href={allCreatorsHref}\n className=\"inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors\"\n >\n View all <ArrowRight className=\"h-3.5 w-3.5\" />\n </a>\n </div>\n <div className=\"overflow-x-auto scrollbar-hide snap-x snap-mandatory -mx-4 px-4 md:mx-0 md:px-0\">\n <div className=\"flex gap-3 w-max pb-1\">\n {isLoading\n ? Array.from({ length: 6 }).map((_, i) => <CreatorChipSkeleton key={i} />)\n : creators.map((c) => (\n <CreatorChip key={c.walletAddress} creator={c} href={getHref(c)} />\n ))}\n </div>\n </div>\n </div>\n </FadeIn>\n );\n}\n"],"mappings":";AAiBI,cAyDQ,YAzDR;AAfJ,SAAS,gBAAgB;AACzB,SAAS,OAAO,YAAY,cAAc;AAC1C,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAU3B,SAAS,sBAAsB;AAC7B,SACE,oBAAC,SAAI,WAAU,gEAA+D;AAElF;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,YAAY,QAAQ,eAAe,QAAQ,mBAAmB;AACpE,QAAM,YAAY,QAAQ,eAAe,QAAQ,mBAAmB;AAEpE,QAAM,YAAY,aAAa,CAAC,cAAc,WAAW,SAAS,IAAI;AACtE,QAAM,YAAY,aAAa,CAAC,cAAc,WAAW,SAAS,IAAI;AAEtE,QAAM,cAAc,QAAQ,eAAe,IAAI,QAAQ,QAAQ;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MAEV,+BAAC,SAAI,WAAU,6DACZ;AAAA,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAI;AAAA,YACJ,eAAW;AAAA,YACX,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,SAAS,MAAM,eAAe,IAAI;AAAA;AAAA,QACpC;AAAA,QAEF,oBAAC,SAAI,WAAU,+EAA8E;AAAA,QAC7F,qBAAC,SAAI,WAAU,iDACb;AAAA,8BAAC,SAAI,WAAU,uGACZ,sBACC;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK,eAAe;AAAA,cACpB,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,SAAS,MAAM,eAAe,IAAI;AAAA;AAAA,UACpC,IAEA,oBAAC,UAAK,WAAU,oCACZ,0BAAe,KAAK,OAAO,CAAC,EAAE,YAAY,GAC9C,GAEJ;AAAA,UACA,qBAAC,SACC;AAAA,gCAAC,OAAE,WAAU,yCAAyC,uBAAY;AAAA,YAClE,qBAAC,OAAE,WAAU,uDACX;AAAA,kCAAC,UAAO,WAAU,oBAAmB;AAAA,cACrC,oBAAC,UAAK,WAAU,YAAY,kBAAQ,UAAS;AAAA,eAC/C;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACpB,GAA+B;AAC7B,MAAI,CAAC,aAAa,SAAS,WAAW,EAAG,QAAO;AAEhD,SACE,oBAAC,UACC,+BAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SAAI,WAAU,qCACb;AAAA,2BAAC,SACC;AAAA,4BAAC,OAAE,WAAU,iBAAgB,6BAAe;AAAA,QAC5C,qBAAC,SAAI,WAAU,kCACb;AAAA,8BAAC,SAAM,WAAU,6BAA4B;AAAA,UAC7C,oBAAC,QAAG,WAAU,qBAAoB,sBAAQ;AAAA,WAC5C;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACX;AAAA;AAAA,YACU,oBAAC,cAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MAC/C;AAAA,OACF;AAAA,IACA,oBAAC,SAAI,WAAU,mFACb,8BAAC,SAAI,WAAU,yBACZ,sBACG,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM,oBAAC,yBAAyB,CAAG,CAAE,IACvE,SAAS,IAAI,CAAC,MACZ,oBAAC,eAAkC,SAAS,GAAG,MAAM,QAAQ,CAAC,KAA5C,EAAE,aAA6C,CAClE,GACP,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@medialane/ui",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.4",
|
|
4
4
|
"description": "Shared UI components for Medialane apps",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -23,26 +23,28 @@
|
|
|
23
23
|
"publishConfig": {
|
|
24
24
|
"access": "public"
|
|
25
25
|
},
|
|
26
|
-
"files": [
|
|
26
|
+
"files": [
|
|
27
|
+
"dist"
|
|
28
|
+
],
|
|
27
29
|
"scripts": {
|
|
28
30
|
"build": "tsup",
|
|
29
31
|
"dev": "tsup --watch",
|
|
30
32
|
"typecheck": "tsc --noEmit"
|
|
31
33
|
},
|
|
32
34
|
"peerDependencies": {
|
|
33
|
-
"
|
|
34
|
-
"react-dom": ">=18.0.0",
|
|
35
|
-
"next": ">=14.0.0",
|
|
36
|
-
"next-themes": ">=0.3.0",
|
|
37
|
-
"lucide-react": ">=0.400.0",
|
|
38
|
-
"tailwind-merge": ">=2.0.0",
|
|
35
|
+
"@medialane/sdk": ">=0.6.0",
|
|
39
36
|
"clsx": ">=2.0.0",
|
|
40
37
|
"framer-motion": ">=10.0.0",
|
|
38
|
+
"lucide-react": ">=0.400.0",
|
|
39
|
+
"next": ">=14.0.0",
|
|
40
|
+
"next-themes": ">=0.3.0",
|
|
41
|
+
"react": ">=18.0.0",
|
|
42
|
+
"react-dom": ">=18.0.0",
|
|
41
43
|
"sonner": ">=1.0.0",
|
|
42
|
-
"
|
|
44
|
+
"tailwind-merge": ">=2.0.0"
|
|
43
45
|
},
|
|
44
46
|
"devDependencies": {
|
|
45
|
-
"@medialane/sdk": "^0.
|
|
47
|
+
"@medialane/sdk": "^0.7.2",
|
|
46
48
|
"@types/react": "^19.0.0",
|
|
47
49
|
"@types/react-dom": "^19.0.0",
|
|
48
50
|
"clsx": "^2.0.0",
|