@medialane/ui 0.3.3 → 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.
@@ -36,8 +36,10 @@ function CreatorChip({
36
36
  }) {
37
37
  const [avatarError, setAvatarError] = (0, import_react.useState)(false);
38
38
  const [bannerError, setBannerError] = (0, import_react.useState)(false);
39
- const avatarUrl = creator.avatarImage && !avatarError ? (0, import_ipfs.ipfsToHttp)(creator.avatarImage) : null;
40
- const bannerUrl = creator.bannerImage && !bannerError ? (0, import_ipfs.ipfsToHttp)(creator.bannerImage) : null;
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;
41
43
  const displayName = creator.displayName || `@${creator.username}`;
42
44
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
43
45
  "a",
@@ -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 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 avatarUrl = creator.avatarImage && !avatarError ? ipfsToHttp(creator.avatarImage) : null;\n const bannerUrl = creator.bannerImage && !bannerError ? ipfsToHttp(creator.bannerImage) : null;\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,CAAC,kBAAc,wBAAW,QAAQ,WAAW,IAAI;AAC1F,QAAM,YAAY,QAAQ,eAAe,CAAC,kBAAc,wBAAW,QAAQ,WAAW,IAAI;AAC1F,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":[]}
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":[]}
@@ -13,8 +13,10 @@ function CreatorChip({
13
13
  }) {
14
14
  const [avatarError, setAvatarError] = useState(false);
15
15
  const [bannerError, setBannerError] = useState(false);
16
- const avatarUrl = creator.avatarImage && !avatarError ? ipfsToHttp(creator.avatarImage) : null;
17
- const bannerUrl = creator.bannerImage && !bannerError ? ipfsToHttp(creator.bannerImage) : null;
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;
18
20
  const displayName = creator.displayName || `@${creator.username}`;
19
21
  return /* @__PURE__ */ jsx(
20
22
  "a",
@@ -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 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 avatarUrl = creator.avatarImage && !avatarError ? ipfsToHttp(creator.avatarImage) : null;\n const bannerUrl = creator.bannerImage && !bannerError ? ipfsToHttp(creator.bannerImage) : null;\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,cAqDQ,YArDR;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,CAAC,cAAc,WAAW,QAAQ,WAAW,IAAI;AAC1F,QAAM,YAAY,QAAQ,eAAe,CAAC,cAAc,WAAW,QAAQ,WAAW,IAAI;AAC1F,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":[]}
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",
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": ["dist"],
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
- "react": ">=18.0.0",
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
- "@medialane/sdk": ">=0.6.0"
44
+ "tailwind-merge": ">=2.0.0"
43
45
  },
44
46
  "devDependencies": {
45
- "@medialane/sdk": "^0.6.7",
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",