@medialane/ui 0.44.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.
- package/dist/components/asset-collection-bar.cjs +31 -55
- package/dist/components/asset-collection-bar.cjs.map +1 -1
- package/dist/components/asset-collection-bar.d.cts +1 -2
- package/dist/components/asset-collection-bar.d.ts +1 -2
- package/dist/components/asset-collection-bar.js +32 -56
- package/dist/components/asset-collection-bar.js.map +1 -1
- package/package.json +1 -1
|
@@ -36,7 +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
39
|
function AssetCollectionBar({
|
|
41
40
|
collectionName,
|
|
42
41
|
collectionImage,
|
|
@@ -45,64 +44,41 @@ function AssetCollectionBar({
|
|
|
45
44
|
siblingTokens,
|
|
46
45
|
onNavigate
|
|
47
46
|
}) {
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
const
|
|
52
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
|
|
53
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
54
|
-
|
|
55
|
-
{
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
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
|
-
]
|
|
47
|
+
const others = siblingTokens.filter(
|
|
48
|
+
(t) => String(t.tokenId) !== String(currentTokenId)
|
|
49
|
+
);
|
|
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" }) })
|
|
56
|
+
] }),
|
|
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);
|
|
66
61
|
}
|
|
67
|
-
|
|
68
|
-
showFilmstrip ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
69
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
62
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
63
|
"button",
|
|
71
64
|
{
|
|
72
65
|
type: "button",
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
),
|
|
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" })
|
|
91
|
-
},
|
|
92
|
-
sibling.tokenId
|
|
93
|
-
);
|
|
94
|
-
}) }),
|
|
95
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
96
|
-
"button",
|
|
97
|
-
{
|
|
98
|
-
type: "button",
|
|
99
|
-
disabled: !nextToken,
|
|
100
|
-
onClick: () => nextToken && onNavigate(nextToken.tokenId),
|
|
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" })
|
|
103
|
-
}
|
|
104
|
-
)
|
|
105
|
-
] }) : null
|
|
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,
|
|
70
|
+
{
|
|
71
|
+
src: sibling.image,
|
|
72
|
+
alt: "",
|
|
73
|
+
fill: true,
|
|
74
|
+
className: "object-cover transition-transform duration-300 group-hover:scale-105",
|
|
75
|
+
unoptimized: true
|
|
76
|
+
}
|
|
77
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-full w-full bg-muted" })
|
|
78
|
+
},
|
|
79
|
+
sibling.tokenId
|
|
80
|
+
);
|
|
81
|
+
}) })
|
|
106
82
|
] });
|
|
107
83
|
}
|
|
108
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 {
|
|
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"]}
|
|
@@ -2,12 +2,11 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
|
|
3
3
|
interface AssetCollectionBarSibling {
|
|
4
4
|
tokenId: string;
|
|
5
|
-
/** Already-resolved, ready-to-render src
|
|
5
|
+
/** Already-resolved, ready-to-render src. `null` renders a placeholder. */
|
|
6
6
|
image: string | null;
|
|
7
7
|
}
|
|
8
8
|
interface AssetCollectionBarProps {
|
|
9
9
|
collectionName: string;
|
|
10
|
-
/** Already-resolved, ready-to-render src (e.g. via the caller's ipfsToHttp). */
|
|
11
10
|
collectionImage?: string | null;
|
|
12
11
|
collectionHref: string;
|
|
13
12
|
currentTokenId: string;
|
|
@@ -2,12 +2,11 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
|
|
3
3
|
interface AssetCollectionBarSibling {
|
|
4
4
|
tokenId: string;
|
|
5
|
-
/** Already-resolved, ready-to-render src
|
|
5
|
+
/** Already-resolved, ready-to-render src. `null` renders a placeholder. */
|
|
6
6
|
image: string | null;
|
|
7
7
|
}
|
|
8
8
|
interface AssetCollectionBarProps {
|
|
9
9
|
collectionName: string;
|
|
10
|
-
/** Already-resolved, ready-to-render src (e.g. via the caller's ipfsToHttp). */
|
|
11
10
|
collectionImage?: string | null;
|
|
12
11
|
collectionHref: string;
|
|
13
12
|
currentTokenId: string;
|
|
@@ -2,8 +2,7 @@
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import Image from "next/image";
|
|
4
4
|
import Link from "next/link";
|
|
5
|
-
import {
|
|
6
|
-
import { cn } from "../utils/cn.js";
|
|
5
|
+
import { ArrowRight } from "lucide-react";
|
|
7
6
|
function AssetCollectionBar({
|
|
8
7
|
collectionName,
|
|
9
8
|
collectionImage,
|
|
@@ -12,64 +11,41 @@ function AssetCollectionBar({
|
|
|
12
11
|
siblingTokens,
|
|
13
12
|
onNavigate
|
|
14
13
|
}) {
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const
|
|
19
|
-
return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
|
|
20
|
-
/* @__PURE__ */ jsxs(
|
|
21
|
-
|
|
22
|
-
{
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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
|
-
]
|
|
14
|
+
const others = siblingTokens.filter(
|
|
15
|
+
(t) => String(t.tokenId) !== String(currentTokenId)
|
|
16
|
+
);
|
|
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" }) })
|
|
23
|
+
] }),
|
|
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);
|
|
33
28
|
}
|
|
34
|
-
|
|
35
|
-
showFilmstrip ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
|
|
36
|
-
/* @__PURE__ */ jsx(
|
|
29
|
+
return /* @__PURE__ */ jsx(
|
|
37
30
|
"button",
|
|
38
31
|
{
|
|
39
32
|
type: "button",
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
),
|
|
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" })
|
|
58
|
-
},
|
|
59
|
-
sibling.tokenId
|
|
60
|
-
);
|
|
61
|
-
}) }),
|
|
62
|
-
/* @__PURE__ */ jsx(
|
|
63
|
-
"button",
|
|
64
|
-
{
|
|
65
|
-
type: "button",
|
|
66
|
-
disabled: !nextToken,
|
|
67
|
-
onClick: () => nextToken && onNavigate(nextToken.tokenId),
|
|
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" })
|
|
70
|
-
}
|
|
71
|
-
)
|
|
72
|
-
] }) : null
|
|
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,
|
|
37
|
+
{
|
|
38
|
+
src: sibling.image,
|
|
39
|
+
alt: "",
|
|
40
|
+
fill: true,
|
|
41
|
+
className: "object-cover transition-transform duration-300 group-hover:scale-105",
|
|
42
|
+
unoptimized: true
|
|
43
|
+
}
|
|
44
|
+
) : /* @__PURE__ */ jsx("div", { className: "h-full w-full bg-muted" })
|
|
45
|
+
},
|
|
46
|
+
sibling.tokenId
|
|
47
|
+
);
|
|
48
|
+
}) })
|
|
73
49
|
] });
|
|
74
50
|
}
|
|
75
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 {
|
|
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":[]}
|