@medialane/ui 0.45.0 → 0.46.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.
|
@@ -36,13 +36,6 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
36
36
|
var import_image = __toESM(require("next/image"), 1);
|
|
37
37
|
var import_link = __toESM(require("next/link"), 1);
|
|
38
38
|
var import_lucide_react = require("lucide-react");
|
|
39
|
-
var import_cn = require("../utils/cn.js");
|
|
40
|
-
const GRID_COLS = {
|
|
41
|
-
1: "grid-cols-1",
|
|
42
|
-
2: "grid-cols-2",
|
|
43
|
-
3: "grid-cols-3",
|
|
44
|
-
4: "grid-cols-4"
|
|
45
|
-
};
|
|
46
39
|
function AssetCollectionBar({
|
|
47
40
|
collectionName,
|
|
48
41
|
collectionImage,
|
|
@@ -51,76 +44,41 @@ function AssetCollectionBar({
|
|
|
51
44
|
siblingTokens,
|
|
52
45
|
onNavigate
|
|
53
46
|
}) {
|
|
54
|
-
const
|
|
55
|
-
|
|
56
|
-
(t) => String(t.tokenId) === String(currentTokenId)
|
|
57
|
-
);
|
|
58
|
-
const PREVIEW_SIZE = 4;
|
|
59
|
-
const windowStart = Math.max(
|
|
60
|
-
0,
|
|
61
|
-
Math.min(currentIndex - 1, total - PREVIEW_SIZE)
|
|
47
|
+
const others = siblingTokens.filter(
|
|
48
|
+
(t) => String(t.tokenId) !== String(currentTokenId)
|
|
62
49
|
);
|
|
63
|
-
const preview =
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60 mb-2.5 select-none", children: "Collection" }),
|
|
70
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_link.default, { href: collectionHref, className: "flex items-center gap-3 group min-w-0", children: [
|
|
71
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative h-11 w-11 rounded-xl overflow-hidden shrink-0 bg-gradient-to-br from-brand-blue/20 to-brand-purple/20 ring-1 ring-border/40 group-hover:ring-border/70 transition-all", children: collectionImage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { src: collectionImage, alt: "", fill: true, className: "object-cover", unoptimized: true }) : null }),
|
|
72
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-bold leading-tight truncate min-w-0 flex-1 group-hover:text-primary transition-colors", children: collectionName }),
|
|
73
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0 h-8 w-8 rounded-xl bg-muted/60 flex items-center justify-center text-muted-foreground group-hover:bg-muted group-hover:text-foreground transition-all", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "h-3.5 w-3.5" }) })
|
|
74
|
-
] })
|
|
50
|
+
const preview = others.slice(0, 4);
|
|
51
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl bg-gradient-to-br from-muted/40 to-transparent overflow-hidden p-4 space-y-3", children: [
|
|
52
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_link.default, { href: collectionHref, className: "flex items-center gap-3 group min-w-0", children: [
|
|
53
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative h-11 w-11 rounded-xl overflow-hidden shrink-0 bg-gradient-to-br from-brand-blue/20 to-brand-purple/20 ring-1 ring-border/30 group-hover:ring-border/60 transition-all", children: collectionImage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { src: collectionImage, alt: "", fill: true, className: "object-cover", unoptimized: true }) : null }),
|
|
54
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-bold leading-tight truncate min-w-0 flex-1 group-hover:text-primary transition-colors", children: collectionName }),
|
|
55
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0 h-8 w-8 rounded-xl bg-background/40 flex items-center justify-center text-muted-foreground group-hover:bg-background/70 group-hover:text-foreground transition-all", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "h-3.5 w-3.5" }) })
|
|
75
56
|
] }),
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
57
|
+
preview.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-4 gap-1.5", children: Array.from({ length: 4 }).map((_, i) => {
|
|
58
|
+
const sibling = preview[i];
|
|
59
|
+
if (!sibling) {
|
|
60
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square rounded-xl bg-muted/20" }, i);
|
|
61
|
+
}
|
|
62
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
63
|
+
"button",
|
|
64
|
+
{
|
|
65
|
+
type: "button",
|
|
66
|
+
onClick: () => onNavigate(sibling.tokenId),
|
|
67
|
+
className: "group relative aspect-square rounded-xl overflow-hidden transition-all duration-200 hover:scale-[1.02] active:scale-95",
|
|
68
|
+
children: sibling.image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
69
|
+
import_image.default,
|
|
86
70
|
{
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
71
|
+
src: sibling.image,
|
|
72
|
+
alt: "",
|
|
73
|
+
fill: true,
|
|
74
|
+
className: "object-cover transition-transform duration-300 group-hover:scale-105",
|
|
75
|
+
unoptimized: true
|
|
90
76
|
}
|
|
91
|
-
)
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
"button",
|
|
97
|
-
{
|
|
98
|
-
type: "button",
|
|
99
|
-
onClick: () => !isCurrent && onNavigate(sibling.tokenId),
|
|
100
|
-
disabled: isCurrent,
|
|
101
|
-
className: (0, import_cn.cn)(
|
|
102
|
-
"group relative aspect-square rounded-xl overflow-hidden transition-all duration-200",
|
|
103
|
-
isCurrent ? "opacity-100 cursor-default" : "opacity-50 hover:opacity-100 active:scale-95"
|
|
104
|
-
),
|
|
105
|
-
children: sibling.image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
106
|
-
import_image.default,
|
|
107
|
-
{
|
|
108
|
-
src: sibling.image,
|
|
109
|
-
alt: "",
|
|
110
|
-
fill: true,
|
|
111
|
-
className: (0, import_cn.cn)(
|
|
112
|
-
"object-cover transition-transform duration-300",
|
|
113
|
-
!isCurrent && "group-hover:scale-105"
|
|
114
|
-
),
|
|
115
|
-
unoptimized: true
|
|
116
|
-
}
|
|
117
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-full w-full bg-muted" })
|
|
118
|
-
},
|
|
119
|
-
sibling.tokenId
|
|
120
|
-
);
|
|
121
|
-
}) })
|
|
122
|
-
] })
|
|
123
|
-
] })
|
|
77
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-full w-full bg-muted" })
|
|
78
|
+
},
|
|
79
|
+
sibling.tokenId
|
|
80
|
+
);
|
|
81
|
+
}) })
|
|
124
82
|
] });
|
|
125
83
|
}
|
|
126
84
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -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 { ArrowRight } from \"lucide-react\";\
|
|
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 { ArrowRight } from \"lucide-react\";\nexport interface AssetCollectionBarSibling {\n tokenId: string;\n /** Already-resolved, ready-to-render src. `null` renders a placeholder. */\n image: string | null;\n}\n\nexport interface AssetCollectionBarProps {\n collectionName: string;\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 // Show up to 4 OTHER tokens — never the current one\n const others = siblingTokens.filter(\n (t) => String(t.tokenId) !== String(currentTokenId)\n );\n const preview = others.slice(0, 4);\n\n return (\n <div className=\"rounded-2xl bg-gradient-to-br from-muted/40 to-transparent overflow-hidden p-4 space-y-3\">\n\n {/* Collection identity — links to collection page */}\n <Link href={collectionHref} className=\"flex items-center gap-3 group min-w-0\">\n <div className=\"relative h-11 w-11 rounded-xl overflow-hidden shrink-0 bg-gradient-to-br from-brand-blue/20 to-brand-purple/20 ring-1 ring-border/30 group-hover:ring-border/60 transition-all\">\n {collectionImage ? (\n <Image src={collectionImage} alt=\"\" fill className=\"object-cover\" unoptimized />\n ) : null}\n </div>\n <p className=\"text-sm font-bold leading-tight truncate min-w-0 flex-1 group-hover:text-primary transition-colors\">\n {collectionName}\n </p>\n <div className=\"shrink-0 h-8 w-8 rounded-xl bg-background/40 flex items-center justify-center text-muted-foreground group-hover:bg-background/70 group-hover:text-foreground transition-all\">\n <ArrowRight className=\"h-3.5 w-3.5\" />\n </div>\n </Link>\n\n {/* Grid — always 4 columns so thumbnails stay the same size regardless of count */}\n {preview.length > 0 && (\n <div className=\"grid grid-cols-4 gap-1.5\">\n {Array.from({ length: 4 }).map((_, i) => {\n const sibling = preview[i];\n if (!sibling) {\n return <div key={i} className=\"aspect-square rounded-xl bg-muted/20\" />;\n }\n return (\n <button\n key={sibling.tokenId}\n type=\"button\"\n onClick={() => onNavigate(sibling.tokenId)}\n className=\"group relative aspect-square rounded-xl overflow-hidden transition-all duration-200 hover:scale-[1.02] active:scale-95\"\n >\n {sibling.image ? (\n <Image\n src={sibling.image}\n alt=\"\"\n fill\n className=\"object-cover transition-transform duration-300 group-hover:scale-105\"\n unoptimized\n />\n ) : (\n <div className=\"h-full w-full bg-muted\" />\n )}\n </button>\n );\n })}\n </div>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsCM;AApCN,mBAAkB;AAClB,kBAAiB;AACjB,0BAA2B;AAgBpB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAE1B,QAAM,SAAS,cAAc;AAAA,IAC3B,CAAC,MAAM,OAAO,EAAE,OAAO,MAAM,OAAO,cAAc;AAAA,EACpD;AACA,QAAM,UAAU,OAAO,MAAM,GAAG,CAAC;AAEjC,SACE,6CAAC,SAAI,WAAU,4FAGb;AAAA,iDAAC,YAAAA,SAAA,EAAK,MAAM,gBAAgB,WAAU,yCACpC;AAAA,kDAAC,SAAI,WAAU,kLACZ,4BACC,4CAAC,aAAAC,SAAA,EAAM,KAAK,iBAAiB,KAAI,IAAG,MAAI,MAAC,WAAU,gBAAe,aAAW,MAAC,IAC5E,MACN;AAAA,MACA,4CAAC,OAAE,WAAU,sGACV,0BACH;AAAA,MACA,4CAAC,SAAI,WAAU,+KACb,sDAAC,kCAAW,WAAU,eAAc,GACtC;AAAA,OACF;AAAA,IAGC,QAAQ,SAAS,KAChB,4CAAC,SAAI,WAAU,4BACZ,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM;AACvC,YAAM,UAAU,QAAQ,CAAC;AACzB,UAAI,CAAC,SAAS;AACZ,eAAO,4CAAC,SAAY,WAAU,0CAAb,CAAoD;AAAA,MACvE;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM,WAAW,QAAQ,OAAO;AAAA,UACzC,WAAU;AAAA,UAET,kBAAQ,QACP;AAAA,YAAC,aAAAA;AAAA,YAAA;AAAA,cACC,KAAK,QAAQ;AAAA,cACb,KAAI;AAAA,cACJ,MAAI;AAAA,cACJ,WAAU;AAAA,cACV,aAAW;AAAA;AAAA,UACb,IAEA,4CAAC,SAAI,WAAU,0BAAyB;AAAA;AAAA,QAdrC,QAAQ;AAAA,MAgBf;AAAA,IAEJ,CAAC,GACH;AAAA,KAEJ;AAEJ;","names":["Link","Image"]}
|
|
@@ -1,15 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import Image from "next/image";
|
|
4
4
|
import Link from "next/link";
|
|
5
5
|
import { ArrowRight } from "lucide-react";
|
|
6
|
-
import { cn } from "../utils/cn.js";
|
|
7
|
-
const GRID_COLS = {
|
|
8
|
-
1: "grid-cols-1",
|
|
9
|
-
2: "grid-cols-2",
|
|
10
|
-
3: "grid-cols-3",
|
|
11
|
-
4: "grid-cols-4"
|
|
12
|
-
};
|
|
13
6
|
function AssetCollectionBar({
|
|
14
7
|
collectionName,
|
|
15
8
|
collectionImage,
|
|
@@ -18,76 +11,41 @@ function AssetCollectionBar({
|
|
|
18
11
|
siblingTokens,
|
|
19
12
|
onNavigate
|
|
20
13
|
}) {
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
(t) => String(t.tokenId) === String(currentTokenId)
|
|
24
|
-
);
|
|
25
|
-
const PREVIEW_SIZE = 4;
|
|
26
|
-
const windowStart = Math.max(
|
|
27
|
-
0,
|
|
28
|
-
Math.min(currentIndex - 1, total - PREVIEW_SIZE)
|
|
14
|
+
const others = siblingTokens.filter(
|
|
15
|
+
(t) => String(t.tokenId) !== String(currentTokenId)
|
|
29
16
|
);
|
|
30
|
-
const preview =
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
/* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60 mb-2.5 select-none", children: "Collection" }),
|
|
37
|
-
/* @__PURE__ */ jsxs(Link, { href: collectionHref, className: "flex items-center gap-3 group min-w-0", children: [
|
|
38
|
-
/* @__PURE__ */ jsx("div", { className: "relative h-11 w-11 rounded-xl overflow-hidden shrink-0 bg-gradient-to-br from-brand-blue/20 to-brand-purple/20 ring-1 ring-border/40 group-hover:ring-border/70 transition-all", children: collectionImage ? /* @__PURE__ */ jsx(Image, { src: collectionImage, alt: "", fill: true, className: "object-cover", unoptimized: true }) : null }),
|
|
39
|
-
/* @__PURE__ */ jsx("p", { className: "text-sm font-bold leading-tight truncate min-w-0 flex-1 group-hover:text-primary transition-colors", children: collectionName }),
|
|
40
|
-
/* @__PURE__ */ jsx("div", { className: "shrink-0 h-8 w-8 rounded-xl bg-muted/60 flex items-center justify-center text-muted-foreground group-hover:bg-muted group-hover:text-foreground transition-all", children: /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5" }) })
|
|
41
|
-
] })
|
|
17
|
+
const preview = others.slice(0, 4);
|
|
18
|
+
return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl bg-gradient-to-br from-muted/40 to-transparent overflow-hidden p-4 space-y-3", children: [
|
|
19
|
+
/* @__PURE__ */ jsxs(Link, { href: collectionHref, className: "flex items-center gap-3 group min-w-0", children: [
|
|
20
|
+
/* @__PURE__ */ jsx("div", { className: "relative h-11 w-11 rounded-xl overflow-hidden shrink-0 bg-gradient-to-br from-brand-blue/20 to-brand-purple/20 ring-1 ring-border/30 group-hover:ring-border/60 transition-all", children: collectionImage ? /* @__PURE__ */ jsx(Image, { src: collectionImage, alt: "", fill: true, className: "object-cover", unoptimized: true }) : null }),
|
|
21
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm font-bold leading-tight truncate min-w-0 flex-1 group-hover:text-primary transition-colors", children: collectionName }),
|
|
22
|
+
/* @__PURE__ */ jsx("div", { className: "shrink-0 h-8 w-8 rounded-xl bg-background/40 flex items-center justify-center text-muted-foreground group-hover:bg-background/70 group-hover:text-foreground transition-all", children: /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5" }) })
|
|
42
23
|
] }),
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
/* @__PURE__ */
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
24
|
+
preview.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-1.5", children: Array.from({ length: 4 }).map((_, i) => {
|
|
25
|
+
const sibling = preview[i];
|
|
26
|
+
if (!sibling) {
|
|
27
|
+
return /* @__PURE__ */ jsx("div", { className: "aspect-square rounded-xl bg-muted/20" }, i);
|
|
28
|
+
}
|
|
29
|
+
return /* @__PURE__ */ jsx(
|
|
30
|
+
"button",
|
|
31
|
+
{
|
|
32
|
+
type: "button",
|
|
33
|
+
onClick: () => onNavigate(sibling.tokenId),
|
|
34
|
+
className: "group relative aspect-square rounded-xl overflow-hidden transition-all duration-200 hover:scale-[1.02] active:scale-95",
|
|
35
|
+
children: sibling.image ? /* @__PURE__ */ jsx(
|
|
36
|
+
Image,
|
|
53
37
|
{
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
38
|
+
src: sibling.image,
|
|
39
|
+
alt: "",
|
|
40
|
+
fill: true,
|
|
41
|
+
className: "object-cover transition-transform duration-300 group-hover:scale-105",
|
|
42
|
+
unoptimized: true
|
|
57
43
|
}
|
|
58
|
-
)
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
"button",
|
|
64
|
-
{
|
|
65
|
-
type: "button",
|
|
66
|
-
onClick: () => !isCurrent && onNavigate(sibling.tokenId),
|
|
67
|
-
disabled: isCurrent,
|
|
68
|
-
className: cn(
|
|
69
|
-
"group relative aspect-square rounded-xl overflow-hidden transition-all duration-200",
|
|
70
|
-
isCurrent ? "opacity-100 cursor-default" : "opacity-50 hover:opacity-100 active:scale-95"
|
|
71
|
-
),
|
|
72
|
-
children: sibling.image ? /* @__PURE__ */ jsx(
|
|
73
|
-
Image,
|
|
74
|
-
{
|
|
75
|
-
src: sibling.image,
|
|
76
|
-
alt: "",
|
|
77
|
-
fill: true,
|
|
78
|
-
className: cn(
|
|
79
|
-
"object-cover transition-transform duration-300",
|
|
80
|
-
!isCurrent && "group-hover:scale-105"
|
|
81
|
-
),
|
|
82
|
-
unoptimized: true
|
|
83
|
-
}
|
|
84
|
-
) : /* @__PURE__ */ jsx("div", { className: "h-full w-full bg-muted" })
|
|
85
|
-
},
|
|
86
|
-
sibling.tokenId
|
|
87
|
-
);
|
|
88
|
-
}) })
|
|
89
|
-
] })
|
|
90
|
-
] })
|
|
44
|
+
) : /* @__PURE__ */ jsx("div", { className: "h-full w-full bg-muted" })
|
|
45
|
+
},
|
|
46
|
+
sibling.tokenId
|
|
47
|
+
);
|
|
48
|
+
}) })
|
|
91
49
|
] });
|
|
92
50
|
}
|
|
93
51
|
export {
|
|
@@ -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 { ArrowRight } from \"lucide-react\";\
|
|
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 { ArrowRight } from \"lucide-react\";\nexport interface AssetCollectionBarSibling {\n tokenId: string;\n /** Already-resolved, ready-to-render src. `null` renders a placeholder. */\n image: string | null;\n}\n\nexport interface AssetCollectionBarProps {\n collectionName: string;\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 // Show up to 4 OTHER tokens — never the current one\n const others = siblingTokens.filter(\n (t) => String(t.tokenId) !== String(currentTokenId)\n );\n const preview = others.slice(0, 4);\n\n return (\n <div className=\"rounded-2xl bg-gradient-to-br from-muted/40 to-transparent overflow-hidden p-4 space-y-3\">\n\n {/* Collection identity — links to collection page */}\n <Link href={collectionHref} className=\"flex items-center gap-3 group min-w-0\">\n <div className=\"relative h-11 w-11 rounded-xl overflow-hidden shrink-0 bg-gradient-to-br from-brand-blue/20 to-brand-purple/20 ring-1 ring-border/30 group-hover:ring-border/60 transition-all\">\n {collectionImage ? (\n <Image src={collectionImage} alt=\"\" fill className=\"object-cover\" unoptimized />\n ) : null}\n </div>\n <p className=\"text-sm font-bold leading-tight truncate min-w-0 flex-1 group-hover:text-primary transition-colors\">\n {collectionName}\n </p>\n <div className=\"shrink-0 h-8 w-8 rounded-xl bg-background/40 flex items-center justify-center text-muted-foreground group-hover:bg-background/70 group-hover:text-foreground transition-all\">\n <ArrowRight className=\"h-3.5 w-3.5\" />\n </div>\n </Link>\n\n {/* Grid — always 4 columns so thumbnails stay the same size regardless of count */}\n {preview.length > 0 && (\n <div className=\"grid grid-cols-4 gap-1.5\">\n {Array.from({ length: 4 }).map((_, i) => {\n const sibling = preview[i];\n if (!sibling) {\n return <div key={i} className=\"aspect-square rounded-xl bg-muted/20\" />;\n }\n return (\n <button\n key={sibling.tokenId}\n type=\"button\"\n onClick={() => onNavigate(sibling.tokenId)}\n className=\"group relative aspect-square rounded-xl overflow-hidden transition-all duration-200 hover:scale-[1.02] active:scale-95\"\n >\n {sibling.image ? (\n <Image\n src={sibling.image}\n alt=\"\"\n fill\n className=\"object-cover transition-transform duration-300 group-hover:scale-105\"\n unoptimized\n />\n ) : (\n <div className=\"h-full w-full bg-muted\" />\n )}\n </button>\n );\n })}\n </div>\n )}\n </div>\n );\n}\n"],"mappings":";AAsCM,SAGM,KAHN;AApCN,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAgBpB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAE1B,QAAM,SAAS,cAAc;AAAA,IAC3B,CAAC,MAAM,OAAO,EAAE,OAAO,MAAM,OAAO,cAAc;AAAA,EACpD;AACA,QAAM,UAAU,OAAO,MAAM,GAAG,CAAC;AAEjC,SACE,qBAAC,SAAI,WAAU,4FAGb;AAAA,yBAAC,QAAK,MAAM,gBAAgB,WAAU,yCACpC;AAAA,0BAAC,SAAI,WAAU,kLACZ,4BACC,oBAAC,SAAM,KAAK,iBAAiB,KAAI,IAAG,MAAI,MAAC,WAAU,gBAAe,aAAW,MAAC,IAC5E,MACN;AAAA,MACA,oBAAC,OAAE,WAAU,sGACV,0BACH;AAAA,MACA,oBAAC,SAAI,WAAU,+KACb,8BAAC,cAAW,WAAU,eAAc,GACtC;AAAA,OACF;AAAA,IAGC,QAAQ,SAAS,KAChB,oBAAC,SAAI,WAAU,4BACZ,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM;AACvC,YAAM,UAAU,QAAQ,CAAC;AACzB,UAAI,CAAC,SAAS;AACZ,eAAO,oBAAC,SAAY,WAAU,0CAAb,CAAoD;AAAA,MACvE;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM,WAAW,QAAQ,OAAO;AAAA,UACzC,WAAU;AAAA,UAET,kBAAQ,QACP;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,QAAQ;AAAA,cACb,KAAI;AAAA,cACJ,MAAI;AAAA,cACJ,WAAU;AAAA,cACV,aAAW;AAAA;AAAA,UACb,IAEA,oBAAC,SAAI,WAAU,0BAAyB;AAAA;AAAA,QAdrC,QAAQ;AAAA,MAgBf;AAAA,IAEJ,CAAC,GACH;AAAA,KAEJ;AAEJ;","names":[]}
|