@medialane/ui 0.44.0 → 0.45.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 +75 -57
- 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 +77 -59
- package/dist/components/asset-collection-bar.js.map +1 -1
- package/package.json +1 -1
|
@@ -37,6 +37,12 @@ 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
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
|
+
};
|
|
40
46
|
function AssetCollectionBar({
|
|
41
47
|
collectionName,
|
|
42
48
|
collectionImage,
|
|
@@ -45,64 +51,76 @@ function AssetCollectionBar({
|
|
|
45
51
|
siblingTokens,
|
|
46
52
|
onNavigate
|
|
47
53
|
}) {
|
|
48
|
-
const
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
54
|
+
const total = siblingTokens.length;
|
|
55
|
+
const currentIndex = siblingTokens.findIndex(
|
|
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)
|
|
62
|
+
);
|
|
63
|
+
const preview = siblingTokens.slice(windowStart, windowStart + PREVIEW_SIZE);
|
|
64
|
+
const colCount = Math.min(preview.length, 4);
|
|
65
|
+
const gridCols = GRID_COLS[colCount] ?? "grid-cols-4";
|
|
66
|
+
const showGrid = total > 1;
|
|
67
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl border border-border/50 bg-card overflow-hidden", children: [
|
|
68
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "px-4 pt-4 pb-3.5", children: [
|
|
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
|
+
] })
|
|
75
|
+
] }),
|
|
76
|
+
showGrid && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
77
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-px bg-border/40 mx-4" }),
|
|
78
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "px-4 py-3.5", children: [
|
|
79
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
|
|
80
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60 select-none", children: [
|
|
81
|
+
"In this collection \xB7 ",
|
|
82
|
+
total
|
|
63
83
|
] }),
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
)
|
|
105
|
-
] }) : null
|
|
84
|
+
total > PREVIEW_SIZE && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
85
|
+
import_link.default,
|
|
86
|
+
{
|
|
87
|
+
href: collectionHref,
|
|
88
|
+
className: "text-[10px] font-semibold text-muted-foreground hover:text-foreground transition-colors",
|
|
89
|
+
children: "See all \u2192"
|
|
90
|
+
}
|
|
91
|
+
)
|
|
92
|
+
] }),
|
|
93
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("grid gap-1.5", gridCols), children: preview.map((sibling) => {
|
|
94
|
+
const isCurrent = String(sibling.tokenId) === String(currentTokenId);
|
|
95
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
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
|
+
] })
|
|
106
124
|
] });
|
|
107
125
|
}
|
|
108
126
|
// 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\";\nimport { cn } from \"../utils/cn.js\";\n\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\nconst GRID_COLS: Record<number, string> = {\n 1: \"grid-cols-1\",\n 2: \"grid-cols-2\",\n 3: \"grid-cols-3\",\n 4: \"grid-cols-4\",\n};\n\nexport function AssetCollectionBar({\n collectionName,\n collectionImage,\n collectionHref,\n currentTokenId,\n siblingTokens,\n onNavigate,\n}: AssetCollectionBarProps) {\n const total = siblingTokens.length;\n const currentIndex = siblingTokens.findIndex(\n (t) => String(t.tokenId) === String(currentTokenId)\n );\n\n // Window of up to 4 items centered around the current token\n const PREVIEW_SIZE = 4;\n const windowStart = Math.max(\n 0,\n Math.min(currentIndex - 1, total - PREVIEW_SIZE)\n );\n const preview = siblingTokens.slice(windowStart, windowStart + PREVIEW_SIZE);\n const colCount = Math.min(preview.length, 4) as 1 | 2 | 3 | 4;\n const gridCols = GRID_COLS[colCount] ?? \"grid-cols-4\";\n\n const showGrid = total > 1;\n\n return (\n <div className=\"rounded-2xl border border-border/50 bg-card overflow-hidden\">\n\n {/* ── Collection identity ── */}\n <div className=\"px-4 pt-4 pb-3.5\">\n <p className=\"text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60 mb-2.5 select-none\">\n Collection\n </p>\n <Link href={collectionHref} className=\"flex items-center gap-3 group min-w-0\">\n {/* Avatar */}\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/40 group-hover:ring-border/70 transition-all\">\n {collectionImage ? (\n <Image src={collectionImage} alt=\"\" fill className=\"object-cover\" unoptimized />\n ) : null}\n </div>\n\n {/* Name */}\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\n {/* Arrow chip */}\n <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\">\n <ArrowRight className=\"h-3.5 w-3.5\" />\n </div>\n </Link>\n </div>\n\n {/* ── Grid explorer ── */}\n {showGrid && (\n <>\n <div className=\"h-px bg-border/40 mx-4\" />\n <div className=\"px-4 py-3.5\">\n <div className=\"flex items-center justify-between mb-3\">\n <p className=\"text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60 select-none\">\n In this collection · {total}\n </p>\n {total > PREVIEW_SIZE && (\n <Link\n href={collectionHref}\n className=\"text-[10px] font-semibold text-muted-foreground hover:text-foreground transition-colors\"\n >\n See all →\n </Link>\n )}\n </div>\n\n <div className={cn(\"grid gap-1.5\", gridCols)}>\n {preview.map((sibling) => {\n const isCurrent =\n String(sibling.tokenId) === String(currentTokenId);\n return (\n <button\n key={sibling.tokenId}\n type=\"button\"\n onClick={() => !isCurrent && onNavigate(sibling.tokenId)}\n disabled={isCurrent}\n className={cn(\n \"group relative aspect-square rounded-xl overflow-hidden transition-all duration-200\",\n isCurrent\n ? \"opacity-100 cursor-default\"\n : \"opacity-50 hover:opacity-100 active:scale-95\"\n )}\n >\n {sibling.image ? (\n <Image\n src={sibling.image}\n alt=\"\"\n fill\n className={cn(\n \"object-cover transition-transform duration-300\",\n !isCurrent && \"group-hover:scale-105\"\n )}\n unoptimized\n />\n ) : (\n <div className=\"h-full w-full bg-muted\" />\n )}\n </button>\n );\n })}\n </div>\n </div>\n </>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2DQ;AAzDR,mBAAkB;AAClB,kBAAiB;AACjB,0BAA2B;AAC3B,gBAAmB;AAiBnB,MAAM,YAAoC;AAAA,EACxC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,QAAQ,cAAc;AAC5B,QAAM,eAAe,cAAc;AAAA,IACjC,CAAC,MAAM,OAAO,EAAE,OAAO,MAAM,OAAO,cAAc;AAAA,EACpD;AAGA,QAAM,eAAe;AACrB,QAAM,cAAc,KAAK;AAAA,IACvB;AAAA,IACA,KAAK,IAAI,eAAe,GAAG,QAAQ,YAAY;AAAA,EACjD;AACA,QAAM,UAAU,cAAc,MAAM,aAAa,cAAc,YAAY;AAC3E,QAAM,WAAW,KAAK,IAAI,QAAQ,QAAQ,CAAC;AAC3C,QAAM,WAAW,UAAU,QAAQ,KAAK;AAExC,QAAM,WAAW,QAAQ;AAEzB,SACE,6CAAC,SAAI,WAAU,+DAGb;AAAA,iDAAC,SAAI,WAAU,oBACb;AAAA,kDAAC,OAAE,WAAU,mGAAkG,wBAE/G;AAAA,MACA,6CAAC,YAAAA,SAAA,EAAK,MAAM,gBAAgB,WAAU,yCAEpC;AAAA,oDAAC,SAAI,WAAU,kLACZ,4BACC,4CAAC,aAAAC,SAAA,EAAM,KAAK,iBAAiB,KAAI,IAAG,MAAI,MAAC,WAAU,gBAAe,aAAW,MAAC,IAC5E,MACN;AAAA,QAGA,4CAAC,OAAE,WAAU,sGACV,0BACH;AAAA,QAGA,4CAAC,SAAI,WAAU,kKACb,sDAAC,kCAAW,WAAU,eAAc,GACtC;AAAA,SACF;AAAA,OACF;AAAA,IAGC,YACC,4EACE;AAAA,kDAAC,SAAI,WAAU,0BAAyB;AAAA,MACxC,6CAAC,SAAI,WAAU,eACb;AAAA,qDAAC,SAAI,WAAU,0CACb;AAAA,uDAAC,OAAE,WAAU,4FAA2F;AAAA;AAAA,YAChF;AAAA,aACxB;AAAA,UACC,QAAQ,gBACP;AAAA,YAAC,YAAAD;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,WAAU;AAAA,cACX;AAAA;AAAA,UAED;AAAA,WAEJ;AAAA,QAEA,4CAAC,SAAI,eAAW,cAAG,gBAAgB,QAAQ,GACxC,kBAAQ,IAAI,CAAC,YAAY;AACxB,gBAAM,YACJ,OAAO,QAAQ,OAAO,MAAM,OAAO,cAAc;AACnD,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,SAAS,MAAM,CAAC,aAAa,WAAW,QAAQ,OAAO;AAAA,cACvD,UAAU;AAAA,cACV,eAAW;AAAA,gBACT;AAAA,gBACA,YACI,+BACA;AAAA,cACN;AAAA,cAEC,kBAAQ,QACP;AAAA,gBAAC,aAAAC;AAAA,gBAAA;AAAA,kBACC,KAAK,QAAQ;AAAA,kBACb,KAAI;AAAA,kBACJ,MAAI;AAAA,kBACJ,eAAW;AAAA,oBACT;AAAA,oBACA,CAAC,aAAa;AAAA,kBAChB;AAAA,kBACA,aAAW;AAAA;AAAA,cACb,IAEA,4CAAC,SAAI,WAAU,0BAAyB;AAAA;AAAA,YAvBrC,QAAQ;AAAA,UAyBf;AAAA,QAEJ,CAAC,GACH;AAAA,SACF;AAAA,OACF;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;
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import Image from "next/image";
|
|
4
4
|
import Link from "next/link";
|
|
5
|
-
import {
|
|
5
|
+
import { ArrowRight } from "lucide-react";
|
|
6
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
|
+
};
|
|
7
13
|
function AssetCollectionBar({
|
|
8
14
|
collectionName,
|
|
9
15
|
collectionImage,
|
|
@@ -12,64 +18,76 @@ function AssetCollectionBar({
|
|
|
12
18
|
siblingTokens,
|
|
13
19
|
onNavigate
|
|
14
20
|
}) {
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
21
|
+
const total = siblingTokens.length;
|
|
22
|
+
const currentIndex = siblingTokens.findIndex(
|
|
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)
|
|
29
|
+
);
|
|
30
|
+
const preview = siblingTokens.slice(windowStart, windowStart + PREVIEW_SIZE);
|
|
31
|
+
const colCount = Math.min(preview.length, 4);
|
|
32
|
+
const gridCols = GRID_COLS[colCount] ?? "grid-cols-4";
|
|
33
|
+
const showGrid = total > 1;
|
|
34
|
+
return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border/50 bg-card overflow-hidden", children: [
|
|
35
|
+
/* @__PURE__ */ jsxs("div", { className: "px-4 pt-4 pb-3.5", children: [
|
|
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
|
+
] })
|
|
42
|
+
] }),
|
|
43
|
+
showGrid && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
44
|
+
/* @__PURE__ */ jsx("div", { className: "h-px bg-border/40 mx-4" }),
|
|
45
|
+
/* @__PURE__ */ jsxs("div", { className: "px-4 py-3.5", children: [
|
|
46
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
|
|
47
|
+
/* @__PURE__ */ jsxs("p", { className: "text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60 select-none", children: [
|
|
48
|
+
"In this collection \xB7 ",
|
|
49
|
+
total
|
|
30
50
|
] }),
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
)
|
|
72
|
-
] }) : null
|
|
51
|
+
total > PREVIEW_SIZE && /* @__PURE__ */ jsx(
|
|
52
|
+
Link,
|
|
53
|
+
{
|
|
54
|
+
href: collectionHref,
|
|
55
|
+
className: "text-[10px] font-semibold text-muted-foreground hover:text-foreground transition-colors",
|
|
56
|
+
children: "See all \u2192"
|
|
57
|
+
}
|
|
58
|
+
)
|
|
59
|
+
] }),
|
|
60
|
+
/* @__PURE__ */ jsx("div", { className: cn("grid gap-1.5", gridCols), children: preview.map((sibling) => {
|
|
61
|
+
const isCurrent = String(sibling.tokenId) === String(currentTokenId);
|
|
62
|
+
return /* @__PURE__ */ jsx(
|
|
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
|
+
] })
|
|
73
91
|
] });
|
|
74
92
|
}
|
|
75
93
|
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\";\nimport { cn } from \"../utils/cn.js\";\n\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\nconst GRID_COLS: Record<number, string> = {\n 1: \"grid-cols-1\",\n 2: \"grid-cols-2\",\n 3: \"grid-cols-3\",\n 4: \"grid-cols-4\",\n};\n\nexport function AssetCollectionBar({\n collectionName,\n collectionImage,\n collectionHref,\n currentTokenId,\n siblingTokens,\n onNavigate,\n}: AssetCollectionBarProps) {\n const total = siblingTokens.length;\n const currentIndex = siblingTokens.findIndex(\n (t) => String(t.tokenId) === String(currentTokenId)\n );\n\n // Window of up to 4 items centered around the current token\n const PREVIEW_SIZE = 4;\n const windowStart = Math.max(\n 0,\n Math.min(currentIndex - 1, total - PREVIEW_SIZE)\n );\n const preview = siblingTokens.slice(windowStart, windowStart + PREVIEW_SIZE);\n const colCount = Math.min(preview.length, 4) as 1 | 2 | 3 | 4;\n const gridCols = GRID_COLS[colCount] ?? \"grid-cols-4\";\n\n const showGrid = total > 1;\n\n return (\n <div className=\"rounded-2xl border border-border/50 bg-card overflow-hidden\">\n\n {/* ── Collection identity ── */}\n <div className=\"px-4 pt-4 pb-3.5\">\n <p className=\"text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60 mb-2.5 select-none\">\n Collection\n </p>\n <Link href={collectionHref} className=\"flex items-center gap-3 group min-w-0\">\n {/* Avatar */}\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/40 group-hover:ring-border/70 transition-all\">\n {collectionImage ? (\n <Image src={collectionImage} alt=\"\" fill className=\"object-cover\" unoptimized />\n ) : null}\n </div>\n\n {/* Name */}\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\n {/* Arrow chip */}\n <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\">\n <ArrowRight className=\"h-3.5 w-3.5\" />\n </div>\n </Link>\n </div>\n\n {/* ── Grid explorer ── */}\n {showGrid && (\n <>\n <div className=\"h-px bg-border/40 mx-4\" />\n <div className=\"px-4 py-3.5\">\n <div className=\"flex items-center justify-between mb-3\">\n <p className=\"text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60 select-none\">\n In this collection · {total}\n </p>\n {total > PREVIEW_SIZE && (\n <Link\n href={collectionHref}\n className=\"text-[10px] font-semibold text-muted-foreground hover:text-foreground transition-colors\"\n >\n See all →\n </Link>\n )}\n </div>\n\n <div className={cn(\"grid gap-1.5\", gridCols)}>\n {preview.map((sibling) => {\n const isCurrent =\n String(sibling.tokenId) === String(currentTokenId);\n return (\n <button\n key={sibling.tokenId}\n type=\"button\"\n onClick={() => !isCurrent && onNavigate(sibling.tokenId)}\n disabled={isCurrent}\n className={cn(\n \"group relative aspect-square rounded-xl overflow-hidden transition-all duration-200\",\n isCurrent\n ? \"opacity-100 cursor-default\"\n : \"opacity-50 hover:opacity-100 active:scale-95\"\n )}\n >\n {sibling.image ? (\n <Image\n src={sibling.image}\n alt=\"\"\n fill\n className={cn(\n \"object-cover transition-transform duration-300\",\n !isCurrent && \"group-hover:scale-105\"\n )}\n unoptimized\n />\n ) : (\n <div className=\"h-full w-full bg-muted\" />\n )}\n </button>\n );\n })}\n </div>\n </div>\n </>\n )}\n </div>\n );\n}\n"],"mappings":";AA2DQ,SAyBA,UAzBA,KAGA,YAHA;AAzDR,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAiBnB,MAAM,YAAoC;AAAA,EACxC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,QAAQ,cAAc;AAC5B,QAAM,eAAe,cAAc;AAAA,IACjC,CAAC,MAAM,OAAO,EAAE,OAAO,MAAM,OAAO,cAAc;AAAA,EACpD;AAGA,QAAM,eAAe;AACrB,QAAM,cAAc,KAAK;AAAA,IACvB;AAAA,IACA,KAAK,IAAI,eAAe,GAAG,QAAQ,YAAY;AAAA,EACjD;AACA,QAAM,UAAU,cAAc,MAAM,aAAa,cAAc,YAAY;AAC3E,QAAM,WAAW,KAAK,IAAI,QAAQ,QAAQ,CAAC;AAC3C,QAAM,WAAW,UAAU,QAAQ,KAAK;AAExC,QAAM,WAAW,QAAQ;AAEzB,SACE,qBAAC,SAAI,WAAU,+DAGb;AAAA,yBAAC,SAAI,WAAU,oBACb;AAAA,0BAAC,OAAE,WAAU,mGAAkG,wBAE/G;AAAA,MACA,qBAAC,QAAK,MAAM,gBAAgB,WAAU,yCAEpC;AAAA,4BAAC,SAAI,WAAU,kLACZ,4BACC,oBAAC,SAAM,KAAK,iBAAiB,KAAI,IAAG,MAAI,MAAC,WAAU,gBAAe,aAAW,MAAC,IAC5E,MACN;AAAA,QAGA,oBAAC,OAAE,WAAU,sGACV,0BACH;AAAA,QAGA,oBAAC,SAAI,WAAU,kKACb,8BAAC,cAAW,WAAU,eAAc,GACtC;AAAA,SACF;AAAA,OACF;AAAA,IAGC,YACC,iCACE;AAAA,0BAAC,SAAI,WAAU,0BAAyB;AAAA,MACxC,qBAAC,SAAI,WAAU,eACb;AAAA,6BAAC,SAAI,WAAU,0CACb;AAAA,+BAAC,OAAE,WAAU,4FAA2F;AAAA;AAAA,YAChF;AAAA,aACxB;AAAA,UACC,QAAQ,gBACP;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,WAAU;AAAA,cACX;AAAA;AAAA,UAED;AAAA,WAEJ;AAAA,QAEA,oBAAC,SAAI,WAAW,GAAG,gBAAgB,QAAQ,GACxC,kBAAQ,IAAI,CAAC,YAAY;AACxB,gBAAM,YACJ,OAAO,QAAQ,OAAO,MAAM,OAAO,cAAc;AACnD,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,SAAS,MAAM,CAAC,aAAa,WAAW,QAAQ,OAAO;AAAA,cACvD,UAAU;AAAA,cACV,WAAW;AAAA,gBACT;AAAA,gBACA,YACI,+BACA;AAAA,cACN;AAAA,cAEC,kBAAQ,QACP;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK,QAAQ;AAAA,kBACb,KAAI;AAAA,kBACJ,MAAI;AAAA,kBACJ,WAAW;AAAA,oBACT;AAAA,oBACA,CAAC,aAAa;AAAA,kBAChB;AAAA,kBACA,aAAW;AAAA;AAAA,cACb,IAEA,oBAAC,SAAI,WAAU,0BAAyB;AAAA;AAAA,YAvBrC,QAAQ;AAAA,UAyBf;AAAA,QAEJ,CAAC,GACH;AAAA,SACF;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}
|