@medialane/ui 0.43.0 → 0.44.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/components/asset-collection-bar.cjs +24 -13
- package/dist/components/asset-collection-bar.cjs.map +1 -1
- package/dist/components/asset-collection-bar.d.cts +0 -10
- package/dist/components/asset-collection-bar.d.ts +0 -10
- package/dist/components/asset-collection-bar.js +24 -13
- package/dist/components/asset-collection-bar.js.map +1 -1
- package/package.json +1 -1
|
@@ -49,23 +49,34 @@ function AssetCollectionBar({
|
|
|
49
49
|
const prevToken = currentIndex > 0 ? siblingTokens[currentIndex - 1] : null;
|
|
50
50
|
const nextToken = currentIndex >= 0 && currentIndex < siblingTokens.length - 1 ? siblingTokens[currentIndex + 1] : null;
|
|
51
51
|
const showFilmstrip = siblingTokens.length > 1;
|
|
52
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "
|
|
53
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
52
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
|
|
53
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
54
|
+
import_link.default,
|
|
55
|
+
{
|
|
56
|
+
href: collectionHref,
|
|
57
|
+
className: "flex items-center gap-2.5 group min-w-0",
|
|
58
|
+
children: [
|
|
59
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative h-8 w-8 rounded-lg overflow-hidden shrink-0 bg-muted ring-1 ring-border/50 group-hover:ring-border transition-all", children: collectionImage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { src: collectionImage, alt: "", fill: true, className: "object-cover", unoptimized: true }) : null }),
|
|
60
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
|
|
61
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground leading-none mb-0.5", children: "Collection" }),
|
|
62
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-semibold truncate leading-tight group-hover:text-primary transition-colors", children: collectionName })
|
|
63
|
+
] }),
|
|
64
|
+
siblingTokens.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: siblingTokens.length })
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
),
|
|
68
|
+
showFilmstrip ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
58
69
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
70
|
"button",
|
|
60
71
|
{
|
|
61
72
|
type: "button",
|
|
62
73
|
disabled: !prevToken,
|
|
63
74
|
onClick: () => prevToken && onNavigate(prevToken.tokenId),
|
|
64
|
-
className: "shrink-0 inline-flex h-
|
|
65
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronLeft, { className: "h-
|
|
75
|
+
className: "shrink-0 inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition hover:text-foreground active:scale-95 disabled:opacity-25 disabled:pointer-events-none",
|
|
76
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronLeft, { className: "h-3.5 w-3.5" })
|
|
66
77
|
}
|
|
67
78
|
),
|
|
68
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-
|
|
79
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-1.5 overflow-x-auto scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden py-0.5", children: siblingTokens.map((sibling) => {
|
|
69
80
|
const isCurrent = String(sibling.tokenId) === String(currentTokenId);
|
|
70
81
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
71
82
|
"button",
|
|
@@ -73,8 +84,8 @@ function AssetCollectionBar({
|
|
|
73
84
|
type: "button",
|
|
74
85
|
onClick: () => onNavigate(sibling.tokenId),
|
|
75
86
|
className: (0, import_cn.cn)(
|
|
76
|
-
"relative h-
|
|
77
|
-
isCurrent ? "
|
|
87
|
+
"relative h-16 w-16 shrink-0 rounded-xl overflow-hidden transition-all duration-200",
|
|
88
|
+
isCurrent ? "opacity-100 scale-100 shadow-sm" : "opacity-50 hover:opacity-80 scale-95 hover:scale-100"
|
|
78
89
|
),
|
|
79
90
|
children: sibling.image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { src: sibling.image, alt: "", fill: true, className: "object-cover", unoptimized: true }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-full w-full bg-muted" })
|
|
80
91
|
},
|
|
@@ -87,8 +98,8 @@ function AssetCollectionBar({
|
|
|
87
98
|
type: "button",
|
|
88
99
|
disabled: !nextToken,
|
|
89
100
|
onClick: () => nextToken && onNavigate(nextToken.tokenId),
|
|
90
|
-
className: "shrink-0 inline-flex h-
|
|
91
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronRight, { className: "h-
|
|
101
|
+
className: "shrink-0 inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition hover:text-foreground active:scale-95 disabled:opacity-25 disabled:pointer-events-none",
|
|
102
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronRight, { className: "h-3.5 w-3.5" })
|
|
92
103
|
}
|
|
93
104
|
)
|
|
94
105
|
] }) : null
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/asset-collection-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface AssetCollectionBarSibling {\n tokenId: string;\n /** Already-resolved, ready-to-render src (e.g. via the caller's ipfsToHttp). `null` renders a placeholder. */\n image: string | null;\n}\n\nexport interface AssetCollectionBarProps {\n collectionName: string;\n /** Already-resolved, ready-to-render src (e.g. via the caller's ipfsToHttp). */\n collectionImage?: string | null;\n collectionHref: string;\n currentTokenId: string;\n siblingTokens: AssetCollectionBarSibling[];\n onNavigate: (tokenId: string) => void;\n}\n\
|
|
1
|
+
{"version":3,"sources":["../../src/components/asset-collection-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface AssetCollectionBarSibling {\n tokenId: string;\n /** Already-resolved, ready-to-render src (e.g. via the caller's ipfsToHttp). `null` renders a placeholder. */\n image: string | null;\n}\n\nexport interface AssetCollectionBarProps {\n collectionName: string;\n /** Already-resolved, ready-to-render src (e.g. via the caller's ipfsToHttp). */\n collectionImage?: string | null;\n collectionHref: string;\n currentTokenId: string;\n siblingTokens: AssetCollectionBarSibling[];\n onNavigate: (tokenId: string) => void;\n}\n\nexport function AssetCollectionBar({\n collectionName,\n collectionImage,\n collectionHref,\n currentTokenId,\n siblingTokens,\n onNavigate,\n}: AssetCollectionBarProps) {\n const currentIndex = siblingTokens.findIndex((t) => String(t.tokenId) === String(currentTokenId));\n const prevToken = currentIndex > 0 ? siblingTokens[currentIndex - 1] : null;\n const nextToken =\n currentIndex >= 0 && currentIndex < siblingTokens.length - 1 ? siblingTokens[currentIndex + 1] : null;\n const showFilmstrip = siblingTokens.length > 1;\n\n return (\n <div className=\"space-y-3\">\n {/* Collection identity — left-aligned, compact */}\n <Link\n href={collectionHref}\n className=\"flex items-center gap-2.5 group min-w-0\"\n >\n <div className=\"relative h-8 w-8 rounded-lg overflow-hidden shrink-0 bg-muted ring-1 ring-border/50 group-hover:ring-border transition-all\">\n {collectionImage ? (\n <Image src={collectionImage} alt=\"\" fill className=\"object-cover\" unoptimized />\n ) : null}\n </div>\n <div className=\"min-w-0 flex-1\">\n <p className=\"text-xs text-muted-foreground leading-none mb-0.5\">Collection</p>\n <p className=\"text-sm font-semibold truncate leading-tight group-hover:text-primary transition-colors\">\n {collectionName}\n </p>\n </div>\n {siblingTokens.length > 0 && (\n <span className=\"shrink-0 text-xs text-muted-foreground tabular-nums\">\n {siblingTokens.length}\n </span>\n )}\n </Link>\n\n {/* Filmstrip */}\n {showFilmstrip ? (\n <div className=\"flex items-center gap-1\">\n <button\n type=\"button\"\n disabled={!prevToken}\n onClick={() => prevToken && onNavigate(prevToken.tokenId)}\n className=\"shrink-0 inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition hover:text-foreground active:scale-95 disabled:opacity-25 disabled:pointer-events-none\"\n >\n <ChevronLeft className=\"h-3.5 w-3.5\" />\n </button>\n\n <div className=\"flex items-center gap-1.5 overflow-x-auto scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden py-0.5\">\n {siblingTokens.map((sibling) => {\n const isCurrent = String(sibling.tokenId) === String(currentTokenId);\n return (\n <button\n key={sibling.tokenId}\n type=\"button\"\n onClick={() => onNavigate(sibling.tokenId)}\n className={cn(\n \"relative h-16 w-16 shrink-0 rounded-xl overflow-hidden transition-all duration-200\",\n isCurrent\n ? \"opacity-100 scale-100 shadow-sm\"\n : \"opacity-50 hover:opacity-80 scale-95 hover:scale-100\"\n )}\n >\n {sibling.image ? (\n <Image src={sibling.image} alt=\"\" fill className=\"object-cover\" unoptimized />\n ) : (\n <div className=\"h-full w-full bg-muted\" />\n )}\n </button>\n );\n })}\n </div>\n\n <button\n type=\"button\"\n disabled={!nextToken}\n onClick={() => nextToken && onNavigate(nextToken.tokenId)}\n className=\"shrink-0 inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition hover:text-foreground active:scale-95 disabled:opacity-25 disabled:pointer-events-none\"\n >\n <ChevronRight className=\"h-3.5 w-3.5\" />\n </button>\n </div>\n ) : null}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CY;AA5CZ,mBAAkB;AAClB,kBAAiB;AACjB,0BAA0C;AAC1C,gBAAmB;AAkBZ,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,eAAe,cAAc,UAAU,CAAC,MAAM,OAAO,EAAE,OAAO,MAAM,OAAO,cAAc,CAAC;AAChG,QAAM,YAAY,eAAe,IAAI,cAAc,eAAe,CAAC,IAAI;AACvE,QAAM,YACJ,gBAAgB,KAAK,eAAe,cAAc,SAAS,IAAI,cAAc,eAAe,CAAC,IAAI;AACnG,QAAM,gBAAgB,cAAc,SAAS;AAE7C,SACE,6CAAC,SAAI,WAAU,aAEb;AAAA;AAAA,MAAC,YAAAA;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAU;AAAA,QAEV;AAAA,sDAAC,SAAI,WAAU,8HACZ,4BACC,4CAAC,aAAAC,SAAA,EAAM,KAAK,iBAAiB,KAAI,IAAG,MAAI,MAAC,WAAU,gBAAe,aAAW,MAAC,IAC5E,MACN;AAAA,UACA,6CAAC,SAAI,WAAU,kBACb;AAAA,wDAAC,OAAE,WAAU,qDAAoD,wBAAU;AAAA,YAC3E,4CAAC,OAAE,WAAU,2FACV,0BACH;AAAA,aACF;AAAA,UACC,cAAc,SAAS,KACtB,4CAAC,UAAK,WAAU,uDACb,wBAAc,QACjB;AAAA;AAAA;AAAA,IAEJ;AAAA,IAGC,gBACC,6CAAC,SAAI,WAAU,2BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,aAAa,WAAW,UAAU,OAAO;AAAA,UACxD,WAAU;AAAA,UAEV,sDAAC,mCAAY,WAAU,eAAc;AAAA;AAAA,MACvC;AAAA,MAEA,4CAAC,SAAI,WAAU,uHACZ,wBAAc,IAAI,CAAC,YAAY;AAC9B,cAAM,YAAY,OAAO,QAAQ,OAAO,MAAM,OAAO,cAAc;AACnE,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAM,WAAW,QAAQ,OAAO;AAAA,YACzC,eAAW;AAAA,cACT;AAAA,cACA,YACI,oCACA;AAAA,YACN;AAAA,YAEC,kBAAQ,QACP,4CAAC,aAAAA,SAAA,EAAM,KAAK,QAAQ,OAAO,KAAI,IAAG,MAAI,MAAC,WAAU,gBAAe,aAAW,MAAC,IAE5E,4CAAC,SAAI,WAAU,0BAAyB;AAAA;AAAA,UAbrC,QAAQ;AAAA,QAef;AAAA,MAEJ,CAAC,GACH;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,aAAa,WAAW,UAAU,OAAO;AAAA,UACxD,WAAU;AAAA,UAEV,sDAAC,oCAAa,WAAU,eAAc;AAAA;AAAA,MACxC;AAAA,OACF,IACE;AAAA,KACN;AAEJ;","names":["Link","Image"]}
|
|
@@ -14,16 +14,6 @@ interface AssetCollectionBarProps {
|
|
|
14
14
|
siblingTokens: AssetCollectionBarSibling[];
|
|
15
15
|
onNavigate: (tokenId: string) => void;
|
|
16
16
|
}
|
|
17
|
-
/**
|
|
18
|
-
* Collection identity bar: centered avatar+name, with a filmstrip of
|
|
19
|
-
* collection siblings on a second row for browsing (replaces plain-text
|
|
20
|
-
* Prev/Next). Soft `bg-card/40` surface, no hard border — matches the
|
|
21
|
-
* aurora-glow design language instead of an OpenSea-style boxed panel.
|
|
22
|
-
* Collection-only: putting Owner inside this card reads as if ownership were
|
|
23
|
-
* a collection attribute (2026-07-05 feedback) — it lives in `AssetOwnerRow`
|
|
24
|
-
* as a sibling instead. Other asset-level concerns (IP-type, explorer/share/
|
|
25
|
-
* report) still live elsewhere (`AssetHeaderBlock`, `AssetUtilityIcons`).
|
|
26
|
-
*/
|
|
27
17
|
declare function AssetCollectionBar({ collectionName, collectionImage, collectionHref, currentTokenId, siblingTokens, onNavigate, }: AssetCollectionBarProps): react_jsx_runtime.JSX.Element;
|
|
28
18
|
|
|
29
19
|
export { AssetCollectionBar, type AssetCollectionBarProps, type AssetCollectionBarSibling };
|
|
@@ -14,16 +14,6 @@ interface AssetCollectionBarProps {
|
|
|
14
14
|
siblingTokens: AssetCollectionBarSibling[];
|
|
15
15
|
onNavigate: (tokenId: string) => void;
|
|
16
16
|
}
|
|
17
|
-
/**
|
|
18
|
-
* Collection identity bar: centered avatar+name, with a filmstrip of
|
|
19
|
-
* collection siblings on a second row for browsing (replaces plain-text
|
|
20
|
-
* Prev/Next). Soft `bg-card/40` surface, no hard border — matches the
|
|
21
|
-
* aurora-glow design language instead of an OpenSea-style boxed panel.
|
|
22
|
-
* Collection-only: putting Owner inside this card reads as if ownership were
|
|
23
|
-
* a collection attribute (2026-07-05 feedback) — it lives in `AssetOwnerRow`
|
|
24
|
-
* as a sibling instead. Other asset-level concerns (IP-type, explorer/share/
|
|
25
|
-
* report) still live elsewhere (`AssetHeaderBlock`, `AssetUtilityIcons`).
|
|
26
|
-
*/
|
|
27
17
|
declare function AssetCollectionBar({ collectionName, collectionImage, collectionHref, currentTokenId, siblingTokens, onNavigate, }: AssetCollectionBarProps): react_jsx_runtime.JSX.Element;
|
|
28
18
|
|
|
29
19
|
export { AssetCollectionBar, type AssetCollectionBarProps, type AssetCollectionBarSibling };
|
|
@@ -16,23 +16,34 @@ function AssetCollectionBar({
|
|
|
16
16
|
const prevToken = currentIndex > 0 ? siblingTokens[currentIndex - 1] : null;
|
|
17
17
|
const nextToken = currentIndex >= 0 && currentIndex < siblingTokens.length - 1 ? siblingTokens[currentIndex + 1] : null;
|
|
18
18
|
const showFilmstrip = siblingTokens.length > 1;
|
|
19
|
-
return /* @__PURE__ */ jsxs("div", { className: "
|
|
20
|
-
/* @__PURE__ */ jsxs(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
|
|
20
|
+
/* @__PURE__ */ jsxs(
|
|
21
|
+
Link,
|
|
22
|
+
{
|
|
23
|
+
href: collectionHref,
|
|
24
|
+
className: "flex items-center gap-2.5 group min-w-0",
|
|
25
|
+
children: [
|
|
26
|
+
/* @__PURE__ */ jsx("div", { className: "relative h-8 w-8 rounded-lg overflow-hidden shrink-0 bg-muted ring-1 ring-border/50 group-hover:ring-border transition-all", children: collectionImage ? /* @__PURE__ */ jsx(Image, { src: collectionImage, alt: "", fill: true, className: "object-cover", unoptimized: true }) : null }),
|
|
27
|
+
/* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
|
|
28
|
+
/* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-none mb-0.5", children: "Collection" }),
|
|
29
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm font-semibold truncate leading-tight group-hover:text-primary transition-colors", children: collectionName })
|
|
30
|
+
] }),
|
|
31
|
+
siblingTokens.length > 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: siblingTokens.length })
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
),
|
|
35
|
+
showFilmstrip ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
|
|
25
36
|
/* @__PURE__ */ jsx(
|
|
26
37
|
"button",
|
|
27
38
|
{
|
|
28
39
|
type: "button",
|
|
29
40
|
disabled: !prevToken,
|
|
30
41
|
onClick: () => prevToken && onNavigate(prevToken.tokenId),
|
|
31
|
-
className: "shrink-0 inline-flex h-
|
|
32
|
-
children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-
|
|
42
|
+
className: "shrink-0 inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition hover:text-foreground active:scale-95 disabled:opacity-25 disabled:pointer-events-none",
|
|
43
|
+
children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5" })
|
|
33
44
|
}
|
|
34
45
|
),
|
|
35
|
-
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-
|
|
46
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 overflow-x-auto scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden py-0.5", children: siblingTokens.map((sibling) => {
|
|
36
47
|
const isCurrent = String(sibling.tokenId) === String(currentTokenId);
|
|
37
48
|
return /* @__PURE__ */ jsx(
|
|
38
49
|
"button",
|
|
@@ -40,8 +51,8 @@ function AssetCollectionBar({
|
|
|
40
51
|
type: "button",
|
|
41
52
|
onClick: () => onNavigate(sibling.tokenId),
|
|
42
53
|
className: cn(
|
|
43
|
-
"relative h-
|
|
44
|
-
isCurrent ? "
|
|
54
|
+
"relative h-16 w-16 shrink-0 rounded-xl overflow-hidden transition-all duration-200",
|
|
55
|
+
isCurrent ? "opacity-100 scale-100 shadow-sm" : "opacity-50 hover:opacity-80 scale-95 hover:scale-100"
|
|
45
56
|
),
|
|
46
57
|
children: sibling.image ? /* @__PURE__ */ jsx(Image, { src: sibling.image, alt: "", fill: true, className: "object-cover", unoptimized: true }) : /* @__PURE__ */ jsx("div", { className: "h-full w-full bg-muted" })
|
|
47
58
|
},
|
|
@@ -54,8 +65,8 @@ function AssetCollectionBar({
|
|
|
54
65
|
type: "button",
|
|
55
66
|
disabled: !nextToken,
|
|
56
67
|
onClick: () => nextToken && onNavigate(nextToken.tokenId),
|
|
57
|
-
className: "shrink-0 inline-flex h-
|
|
58
|
-
children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-
|
|
68
|
+
className: "shrink-0 inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition hover:text-foreground active:scale-95 disabled:opacity-25 disabled:pointer-events-none",
|
|
69
|
+
children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" })
|
|
59
70
|
}
|
|
60
71
|
)
|
|
61
72
|
] }) : null
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/asset-collection-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface AssetCollectionBarSibling {\n tokenId: string;\n /** Already-resolved, ready-to-render src (e.g. via the caller's ipfsToHttp). `null` renders a placeholder. */\n image: string | null;\n}\n\nexport interface AssetCollectionBarProps {\n collectionName: string;\n /** Already-resolved, ready-to-render src (e.g. via the caller's ipfsToHttp). */\n collectionImage?: string | null;\n collectionHref: string;\n currentTokenId: string;\n siblingTokens: AssetCollectionBarSibling[];\n onNavigate: (tokenId: string) => void;\n}\n\
|
|
1
|
+
{"version":3,"sources":["../../src/components/asset-collection-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface AssetCollectionBarSibling {\n tokenId: string;\n /** Already-resolved, ready-to-render src (e.g. via the caller's ipfsToHttp). `null` renders a placeholder. */\n image: string | null;\n}\n\nexport interface AssetCollectionBarProps {\n collectionName: string;\n /** Already-resolved, ready-to-render src (e.g. via the caller's ipfsToHttp). */\n collectionImage?: string | null;\n collectionHref: string;\n currentTokenId: string;\n siblingTokens: AssetCollectionBarSibling[];\n onNavigate: (tokenId: string) => void;\n}\n\nexport function AssetCollectionBar({\n collectionName,\n collectionImage,\n collectionHref,\n currentTokenId,\n siblingTokens,\n onNavigate,\n}: AssetCollectionBarProps) {\n const currentIndex = siblingTokens.findIndex((t) => String(t.tokenId) === String(currentTokenId));\n const prevToken = currentIndex > 0 ? siblingTokens[currentIndex - 1] : null;\n const nextToken =\n currentIndex >= 0 && currentIndex < siblingTokens.length - 1 ? siblingTokens[currentIndex + 1] : null;\n const showFilmstrip = siblingTokens.length > 1;\n\n return (\n <div className=\"space-y-3\">\n {/* Collection identity — left-aligned, compact */}\n <Link\n href={collectionHref}\n className=\"flex items-center gap-2.5 group min-w-0\"\n >\n <div className=\"relative h-8 w-8 rounded-lg overflow-hidden shrink-0 bg-muted ring-1 ring-border/50 group-hover:ring-border transition-all\">\n {collectionImage ? (\n <Image src={collectionImage} alt=\"\" fill className=\"object-cover\" unoptimized />\n ) : null}\n </div>\n <div className=\"min-w-0 flex-1\">\n <p className=\"text-xs text-muted-foreground leading-none mb-0.5\">Collection</p>\n <p className=\"text-sm font-semibold truncate leading-tight group-hover:text-primary transition-colors\">\n {collectionName}\n </p>\n </div>\n {siblingTokens.length > 0 && (\n <span className=\"shrink-0 text-xs text-muted-foreground tabular-nums\">\n {siblingTokens.length}\n </span>\n )}\n </Link>\n\n {/* Filmstrip */}\n {showFilmstrip ? (\n <div className=\"flex items-center gap-1\">\n <button\n type=\"button\"\n disabled={!prevToken}\n onClick={() => prevToken && onNavigate(prevToken.tokenId)}\n className=\"shrink-0 inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition hover:text-foreground active:scale-95 disabled:opacity-25 disabled:pointer-events-none\"\n >\n <ChevronLeft className=\"h-3.5 w-3.5\" />\n </button>\n\n <div className=\"flex items-center gap-1.5 overflow-x-auto scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden py-0.5\">\n {siblingTokens.map((sibling) => {\n const isCurrent = String(sibling.tokenId) === String(currentTokenId);\n return (\n <button\n key={sibling.tokenId}\n type=\"button\"\n onClick={() => onNavigate(sibling.tokenId)}\n className={cn(\n \"relative h-16 w-16 shrink-0 rounded-xl overflow-hidden transition-all duration-200\",\n isCurrent\n ? \"opacity-100 scale-100 shadow-sm\"\n : \"opacity-50 hover:opacity-80 scale-95 hover:scale-100\"\n )}\n >\n {sibling.image ? (\n <Image src={sibling.image} alt=\"\" fill className=\"object-cover\" unoptimized />\n ) : (\n <div className=\"h-full w-full bg-muted\" />\n )}\n </button>\n );\n })}\n </div>\n\n <button\n type=\"button\"\n disabled={!nextToken}\n onClick={() => nextToken && onNavigate(nextToken.tokenId)}\n className=\"shrink-0 inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition hover:text-foreground active:scale-95 disabled:opacity-25 disabled:pointer-events-none\"\n >\n <ChevronRight className=\"h-3.5 w-3.5\" />\n </button>\n </div>\n ) : null}\n </div>\n );\n}\n"],"mappings":";AA8CY,cAGJ,YAHI;AA5CZ,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,aAAa,oBAAoB;AAC1C,SAAS,UAAU;AAkBZ,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,eAAe,cAAc,UAAU,CAAC,MAAM,OAAO,EAAE,OAAO,MAAM,OAAO,cAAc,CAAC;AAChG,QAAM,YAAY,eAAe,IAAI,cAAc,eAAe,CAAC,IAAI;AACvE,QAAM,YACJ,gBAAgB,KAAK,eAAe,cAAc,SAAS,IAAI,cAAc,eAAe,CAAC,IAAI;AACnG,QAAM,gBAAgB,cAAc,SAAS;AAE7C,SACE,qBAAC,SAAI,WAAU,aAEb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAU;AAAA,QAEV;AAAA,8BAAC,SAAI,WAAU,8HACZ,4BACC,oBAAC,SAAM,KAAK,iBAAiB,KAAI,IAAG,MAAI,MAAC,WAAU,gBAAe,aAAW,MAAC,IAC5E,MACN;AAAA,UACA,qBAAC,SAAI,WAAU,kBACb;AAAA,gCAAC,OAAE,WAAU,qDAAoD,wBAAU;AAAA,YAC3E,oBAAC,OAAE,WAAU,2FACV,0BACH;AAAA,aACF;AAAA,UACC,cAAc,SAAS,KACtB,oBAAC,UAAK,WAAU,uDACb,wBAAc,QACjB;AAAA;AAAA;AAAA,IAEJ;AAAA,IAGC,gBACC,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,aAAa,WAAW,UAAU,OAAO;AAAA,UACxD,WAAU;AAAA,UAEV,8BAAC,eAAY,WAAU,eAAc;AAAA;AAAA,MACvC;AAAA,MAEA,oBAAC,SAAI,WAAU,uHACZ,wBAAc,IAAI,CAAC,YAAY;AAC9B,cAAM,YAAY,OAAO,QAAQ,OAAO,MAAM,OAAO,cAAc;AACnE,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAM,WAAW,QAAQ,OAAO;AAAA,YACzC,WAAW;AAAA,cACT;AAAA,cACA,YACI,oCACA;AAAA,YACN;AAAA,YAEC,kBAAQ,QACP,oBAAC,SAAM,KAAK,QAAQ,OAAO,KAAI,IAAG,MAAI,MAAC,WAAU,gBAAe,aAAW,MAAC,IAE5E,oBAAC,SAAI,WAAU,0BAAyB;AAAA;AAAA,UAbrC,QAAQ;AAAA,QAef;AAAA,MAEJ,CAAC,GACH;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,aAAa,WAAW,UAAU,OAAO;AAAA,UACxD,WAAU;AAAA,UAEV,8BAAC,gBAAa,WAAU,eAAc;AAAA;AAAA,MACxC;AAAA,OACF,IACE;AAAA,KACN;AAEJ;","names":[]}
|