@medialane/ui 0.56.0 → 0.57.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-card.cjs +12 -5
- package/dist/components/asset-card.cjs.map +1 -1
- package/dist/components/asset-card.d.cts +2 -1
- package/dist/components/asset-card.d.ts +2 -1
- package/dist/components/asset-card.js +12 -5
- package/dist/components/asset-card.js.map +1 -1
- package/package.json +1 -1
|
@@ -67,7 +67,7 @@ function AssetCard({
|
|
|
67
67
|
className
|
|
68
68
|
),
|
|
69
69
|
children: [
|
|
70
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href, className: "block", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-
|
|
70
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href, className: "block p-1.5 pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-[4/5] rounded-[12px] bg-muted overflow-hidden ring-1 ring-border/50", children: [
|
|
71
71
|
resolved && !imgError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
72
72
|
import_image.default,
|
|
73
73
|
{
|
|
@@ -79,7 +79,7 @@ function AssetCard({
|
|
|
79
79
|
className: "object-cover transition-transform duration-500 group-hover:scale-105",
|
|
80
80
|
onError: () => setImgError(true)
|
|
81
81
|
}
|
|
82
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-purple/
|
|
82
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-blue/25 via-brand-purple/25 to-brand-rose/25", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-sm font-semibold text-muted-foreground tabular-nums", children: [
|
|
83
83
|
"#",
|
|
84
84
|
fallbackId ?? "?"
|
|
85
85
|
] }) }),
|
|
@@ -90,12 +90,19 @@ function AssetCard({
|
|
|
90
90
|
] }) }),
|
|
91
91
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1.5 px-3 py-3", children: [
|
|
92
92
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_link.default, { href, className: "block min-w-0", children: [
|
|
93
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
93
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
94
|
+
"p",
|
|
95
|
+
{
|
|
96
|
+
className: "text-[15px] font-bold line-clamp-1 leading-snug",
|
|
97
|
+
style: { fontFamily: "var(--font-display, inherit)" },
|
|
98
|
+
children: name
|
|
99
|
+
}
|
|
100
|
+
),
|
|
94
101
|
subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground line-clamp-1 leading-snug", children: subtitle })
|
|
95
102
|
] }),
|
|
96
103
|
showFooter && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
|
|
97
104
|
ipType ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ip_type_badge.IpTypeBadge, { ipType, size: "sm", baseUrl: ipTypeBaseUrl }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
|
|
98
|
-
hasPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex shrink-0 items-center gap-1 text-sm
|
|
105
|
+
hasPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex shrink-0 items-center gap-1 text-sm leading-none price-value", children: [
|
|
99
106
|
price.currency && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyIcon, { symbol: price.currency, size: 12 }),
|
|
100
107
|
(0, import_format.formatDisplayPrice)(price.formatted)
|
|
101
108
|
] })
|
|
@@ -107,7 +114,7 @@ function AssetCard({
|
|
|
107
114
|
}
|
|
108
115
|
function AssetCardSkeleton() {
|
|
109
116
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "card-base flex flex-col w-full", children: [
|
|
110
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-
|
|
117
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-1.5 pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-[4/5] w-full animate-pulse bg-muted rounded-[12px]" }) }),
|
|
111
118
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "px-3 py-3 space-y-1.5", children: [
|
|
112
119
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-3/4 rounded-md animate-pulse bg-muted" }),
|
|
113
120
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-3.5 w-2/5 rounded-md animate-pulse bg-muted" })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/asset-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Loader2 } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\n\nexport interface AssetCardPrice {\n formatted?: string | null;\n currency?: string | null;\n}\n\nexport interface AssetCardProps {\n /** Asset detail link. */\n href: string;\n /** Asset title. */\n name: string;\n /** Raw image (ipfs:// or http) — resolved internally. */\n image?: string | null;\n /** Secondary line under the title (collection or description). */\n subtitle?: string | null;\n /** IP type (apiValue or label) — renders the icon badge on the footer left. */\n ipType?: string | null;\n /** Listing price; omit/null shows no price. */\n price?: AssetCardPrice | null;\n /** Shown when the image is missing/errors (e.g. token id). */\n fallbackId?: string | null;\n /** Show the \"Indexing…\" overlay. */\n indexing?: boolean;\n /** Base URL for the ipType badge link. Default \"\" (relative). */\n ipTypeBaseUrl?: string;\n className?: string;\n}\n\n/**\n * The platform's shared asset card — lean and presentational.\n *\n * Intentionally has no action buttons, dropdowns or dialogs: the image and\n * text are the only interactive surface (a single asset link), which keeps\n * browse grids and carousels fast even when many cards render. Surfaces that\n * need owner/marketplace actions use the richer `TokenCard` / `ListingCard`.\n *\n * Layout:
|
|
1
|
+
{"version":3,"sources":["../../src/components/asset-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Loader2 } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\n\nexport interface AssetCardPrice {\n formatted?: string | null;\n currency?: string | null;\n}\n\nexport interface AssetCardProps {\n /** Asset detail link. */\n href: string;\n /** Asset title. */\n name: string;\n /** Raw image (ipfs:// or http) — resolved internally. */\n image?: string | null;\n /** Secondary line under the title (collection or description). */\n subtitle?: string | null;\n /** IP type (apiValue or label) — renders the icon badge on the footer left. */\n ipType?: string | null;\n /** Listing price; omit/null shows no price. */\n price?: AssetCardPrice | null;\n /** Shown when the image is missing/errors (e.g. token id). */\n fallbackId?: string | null;\n /** Show the \"Indexing…\" overlay. */\n indexing?: boolean;\n /** Base URL for the ipType badge link. Default \"\" (relative). */\n ipTypeBaseUrl?: string;\n className?: string;\n}\n\n/**\n * The platform's shared asset card — lean and presentational.\n *\n * Intentionally has no action buttons, dropdowns or dialogs: the image and\n * text are the only interactive surface (a single asset link), which keeps\n * browse grids and carousels fast even when many cards render. Surfaces that\n * need owner/marketplace actions use the richer `TokenCard` / `ListingCard`.\n *\n * Layout: inset 4:5 artwork (gallery ratio, echoing the Medialane Collection\n * Card) → display-face title → optional subtitle → footer row with the\n * (optional) ipType icon on the left and the (optional) price on the right.\n */\nexport function AssetCard({\n href,\n name,\n image,\n subtitle,\n ipType,\n price,\n fallbackId,\n indexing = false,\n ipTypeBaseUrl = \"\",\n className,\n}: AssetCardProps) {\n const [imgError, setImgError] = useState(false);\n const resolved = image ? ipfsToHttp(image) : null;\n const hasPrice = !!price?.formatted;\n const showFooter = !!ipType || hasPrice;\n\n return (\n <div\n className={cn(\n \"card-base group relative flex flex-col w-full transition-colors hover:border-foreground/20\",\n className\n )}\n >\n {/* Artwork — inset with a gallery 4:5 ratio, like the Collection Card */}\n <Link href={href} className=\"block p-1.5 pb-0\">\n <div className=\"relative aspect-[4/5] rounded-[12px] bg-muted overflow-hidden ring-1 ring-border/50\">\n {resolved && !imgError ? (\n <Image\n src={resolved}\n alt={name}\n fill\n unoptimized\n sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw\"\n className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n onError={() => setImgError(true)}\n />\n ) : (\n <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-blue/25 via-brand-purple/25 to-brand-rose/25\">\n <span className=\"text-sm font-semibold text-muted-foreground tabular-nums\">\n #{fallbackId ?? \"?\"}\n </span>\n </div>\n )}\n\n {indexing && (\n <div className=\"absolute bottom-0 inset-x-0 flex items-center justify-center gap-1.5 bg-black/50 backdrop-blur-sm py-1.5\">\n <Loader2 className=\"h-3 w-3 animate-spin text-white/70\" />\n <span className=\"text-[10px] text-white/70\">Indexing…</span>\n </div>\n )}\n </div>\n </Link>\n\n {/* Body */}\n <div className=\"flex flex-col gap-1.5 px-3 py-3\">\n <Link href={href} className=\"block min-w-0\">\n <p\n className=\"text-[15px] font-bold line-clamp-1 leading-snug\"\n style={{ fontFamily: \"var(--font-display, inherit)\" }}\n >\n {name}\n </p>\n {subtitle && (\n <p className=\"text-xs text-muted-foreground line-clamp-1 leading-snug\">\n {subtitle}\n </p>\n )}\n </Link>\n\n {showFooter && (\n <div className=\"flex items-center justify-between gap-2\">\n {ipType ? (\n <IpTypeBadge ipType={ipType} size=\"sm\" baseUrl={ipTypeBaseUrl} />\n ) : (\n <span />\n )}\n {hasPrice && (\n <span className=\"inline-flex shrink-0 items-center gap-1 text-sm leading-none price-value\">\n {price!.currency && <CurrencyIcon symbol={price!.currency} size={12} />}\n {formatDisplayPrice(price!.formatted!)}\n </span>\n )}\n </div>\n )}\n </div>\n </div>\n );\n}\n\nexport function AssetCardSkeleton() {\n return (\n <div className=\"card-base flex flex-col w-full\">\n <div className=\"p-1.5 pb-0\">\n <div className=\"aspect-[4/5] w-full animate-pulse bg-muted rounded-[12px]\" />\n </div>\n <div className=\"px-3 py-3 space-y-1.5\">\n <div className=\"h-4 w-3/4 rounded-md animate-pulse bg-muted\" />\n <div className=\"h-3.5 w-2/5 rounded-md animate-pulse bg-muted\" />\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EY;AA7EZ,mBAAyB;AACzB,kBAAiB;AACjB,mBAAkB;AAClB,0BAAwB;AACxB,gBAAmB;AACnB,kBAA2B;AAC3B,oBAAmC;AACnC,2BAA6B;AAC7B,2BAA4B;AAyCrB,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AACF,GAAmB;AACjB,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,WAAW,YAAQ,wBAAW,KAAK,IAAI;AAC7C,QAAM,WAAW,CAAC,CAAC,OAAO;AAC1B,QAAM,aAAa,CAAC,CAAC,UAAU;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAGA;AAAA,oDAAC,YAAAA,SAAA,EAAK,MAAY,WAAU,oBAC1B,uDAAC,SAAI,WAAU,uFACZ;AAAA,sBAAY,CAAC,WACZ;AAAA,YAAC,aAAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK;AAAA,cACL,MAAI;AAAA,cACJ,aAAW;AAAA,cACX,OAAM;AAAA,cACN,WAAU;AAAA,cACV,SAAS,MAAM,YAAY,IAAI;AAAA;AAAA,UACjC,IAEA,4CAAC,SAAI,WAAU,+HACb,uDAAC,UAAK,WAAU,4DAA2D;AAAA;AAAA,YACvE,cAAc;AAAA,aAClB,GACF;AAAA,UAGD,YACC,6CAAC,SAAI,WAAU,4GACb;AAAA,wDAAC,+BAAQ,WAAU,sCAAqC;AAAA,YACxD,4CAAC,UAAK,WAAU,6BAA4B,4BAAS;AAAA,aACvD;AAAA,WAEJ,GACF;AAAA,QAGA,6CAAC,SAAI,WAAU,mCACb;AAAA,uDAAC,YAAAD,SAAA,EAAK,MAAY,WAAU,iBAC1B;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,YAAY,+BAA+B;AAAA,gBAEnD;AAAA;AAAA,YACH;AAAA,YACC,YACC,4CAAC,OAAE,WAAU,2DACV,oBACH;AAAA,aAEJ;AAAA,UAEC,cACC,6CAAC,SAAI,WAAU,2CACZ;AAAA,qBACC,4CAAC,oCAAY,QAAgB,MAAK,MAAK,SAAS,eAAe,IAE/D,4CAAC,UAAK;AAAA,YAEP,YACC,6CAAC,UAAK,WAAU,4EACb;AAAA,oBAAO,YAAY,4CAAC,qCAAa,QAAQ,MAAO,UAAU,MAAM,IAAI;AAAA,kBACpE,kCAAmB,MAAO,SAAU;AAAA,eACvC;AAAA,aAEJ;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,oBAAoB;AAClC,SACE,6CAAC,SAAI,WAAU,kCACb;AAAA,gDAAC,SAAI,WAAU,cACb,sDAAC,SAAI,WAAU,6DAA4D,GAC7E;AAAA,IACA,6CAAC,SAAI,WAAU,yBACb;AAAA,kDAAC,SAAI,WAAU,+CAA8C;AAAA,MAC7D,4CAAC,SAAI,WAAU,iDAAgD;AAAA,OACjE;AAAA,KACF;AAEJ;","names":["Link","Image"]}
|
|
@@ -33,7 +33,8 @@ interface AssetCardProps {
|
|
|
33
33
|
* browse grids and carousels fast even when many cards render. Surfaces that
|
|
34
34
|
* need owner/marketplace actions use the richer `TokenCard` / `ListingCard`.
|
|
35
35
|
*
|
|
36
|
-
* Layout:
|
|
36
|
+
* Layout: inset 4:5 artwork (gallery ratio, echoing the Medialane Collection
|
|
37
|
+
* Card) → display-face title → optional subtitle → footer row with the
|
|
37
38
|
* (optional) ipType icon on the left and the (optional) price on the right.
|
|
38
39
|
*/
|
|
39
40
|
declare function AssetCard({ href, name, image, subtitle, ipType, price, fallbackId, indexing, ipTypeBaseUrl, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
|
|
@@ -33,7 +33,8 @@ interface AssetCardProps {
|
|
|
33
33
|
* browse grids and carousels fast even when many cards render. Surfaces that
|
|
34
34
|
* need owner/marketplace actions use the richer `TokenCard` / `ListingCard`.
|
|
35
35
|
*
|
|
36
|
-
* Layout:
|
|
36
|
+
* Layout: inset 4:5 artwork (gallery ratio, echoing the Medialane Collection
|
|
37
|
+
* Card) → display-face title → optional subtitle → footer row with the
|
|
37
38
|
* (optional) ipType icon on the left and the (optional) price on the right.
|
|
38
39
|
*/
|
|
39
40
|
declare function AssetCard({ href, name, image, subtitle, ipType, price, fallbackId, indexing, ipTypeBaseUrl, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
|
|
@@ -33,7 +33,7 @@ function AssetCard({
|
|
|
33
33
|
className
|
|
34
34
|
),
|
|
35
35
|
children: [
|
|
36
|
-
/* @__PURE__ */ jsx(Link, { href, className: "block", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-
|
|
36
|
+
/* @__PURE__ */ jsx(Link, { href, className: "block p-1.5 pb-0", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/5] rounded-[12px] bg-muted overflow-hidden ring-1 ring-border/50", children: [
|
|
37
37
|
resolved && !imgError ? /* @__PURE__ */ jsx(
|
|
38
38
|
Image,
|
|
39
39
|
{
|
|
@@ -45,7 +45,7 @@ function AssetCard({
|
|
|
45
45
|
className: "object-cover transition-transform duration-500 group-hover:scale-105",
|
|
46
46
|
onError: () => setImgError(true)
|
|
47
47
|
}
|
|
48
|
-
) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-purple/
|
|
48
|
+
) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-blue/25 via-brand-purple/25 to-brand-rose/25", children: /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-muted-foreground tabular-nums", children: [
|
|
49
49
|
"#",
|
|
50
50
|
fallbackId ?? "?"
|
|
51
51
|
] }) }),
|
|
@@ -56,12 +56,19 @@ function AssetCard({
|
|
|
56
56
|
] }) }),
|
|
57
57
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 px-3 py-3", children: [
|
|
58
58
|
/* @__PURE__ */ jsxs(Link, { href, className: "block min-w-0", children: [
|
|
59
|
-
/* @__PURE__ */ jsx(
|
|
59
|
+
/* @__PURE__ */ jsx(
|
|
60
|
+
"p",
|
|
61
|
+
{
|
|
62
|
+
className: "text-[15px] font-bold line-clamp-1 leading-snug",
|
|
63
|
+
style: { fontFamily: "var(--font-display, inherit)" },
|
|
64
|
+
children: name
|
|
65
|
+
}
|
|
66
|
+
),
|
|
60
67
|
subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground line-clamp-1 leading-snug", children: subtitle })
|
|
61
68
|
] }),
|
|
62
69
|
showFooter && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
|
|
63
70
|
ipType ? /* @__PURE__ */ jsx(IpTypeBadge, { ipType, size: "sm", baseUrl: ipTypeBaseUrl }) : /* @__PURE__ */ jsx("span", {}),
|
|
64
|
-
hasPrice && /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-sm
|
|
71
|
+
hasPrice && /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-sm leading-none price-value", children: [
|
|
65
72
|
price.currency && /* @__PURE__ */ jsx(CurrencyIcon, { symbol: price.currency, size: 12 }),
|
|
66
73
|
formatDisplayPrice(price.formatted)
|
|
67
74
|
] })
|
|
@@ -73,7 +80,7 @@ function AssetCard({
|
|
|
73
80
|
}
|
|
74
81
|
function AssetCardSkeleton() {
|
|
75
82
|
return /* @__PURE__ */ jsxs("div", { className: "card-base flex flex-col w-full", children: [
|
|
76
|
-
/* @__PURE__ */ jsx("div", { className: "aspect-
|
|
83
|
+
/* @__PURE__ */ jsx("div", { className: "p-1.5 pb-0", children: /* @__PURE__ */ jsx("div", { className: "aspect-[4/5] w-full animate-pulse bg-muted rounded-[12px]" }) }),
|
|
77
84
|
/* @__PURE__ */ jsxs("div", { className: "px-3 py-3 space-y-1.5", children: [
|
|
78
85
|
/* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 rounded-md animate-pulse bg-muted" }),
|
|
79
86
|
/* @__PURE__ */ jsx("div", { className: "h-3.5 w-2/5 rounded-md animate-pulse bg-muted" })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/asset-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Loader2 } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\n\nexport interface AssetCardPrice {\n formatted?: string | null;\n currency?: string | null;\n}\n\nexport interface AssetCardProps {\n /** Asset detail link. */\n href: string;\n /** Asset title. */\n name: string;\n /** Raw image (ipfs:// or http) — resolved internally. */\n image?: string | null;\n /** Secondary line under the title (collection or description). */\n subtitle?: string | null;\n /** IP type (apiValue or label) — renders the icon badge on the footer left. */\n ipType?: string | null;\n /** Listing price; omit/null shows no price. */\n price?: AssetCardPrice | null;\n /** Shown when the image is missing/errors (e.g. token id). */\n fallbackId?: string | null;\n /** Show the \"Indexing…\" overlay. */\n indexing?: boolean;\n /** Base URL for the ipType badge link. Default \"\" (relative). */\n ipTypeBaseUrl?: string;\n className?: string;\n}\n\n/**\n * The platform's shared asset card — lean and presentational.\n *\n * Intentionally has no action buttons, dropdowns or dialogs: the image and\n * text are the only interactive surface (a single asset link), which keeps\n * browse grids and carousels fast even when many cards render. Surfaces that\n * need owner/marketplace actions use the richer `TokenCard` / `ListingCard`.\n *\n * Layout:
|
|
1
|
+
{"version":3,"sources":["../../src/components/asset-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Loader2 } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\n\nexport interface AssetCardPrice {\n formatted?: string | null;\n currency?: string | null;\n}\n\nexport interface AssetCardProps {\n /** Asset detail link. */\n href: string;\n /** Asset title. */\n name: string;\n /** Raw image (ipfs:// or http) — resolved internally. */\n image?: string | null;\n /** Secondary line under the title (collection or description). */\n subtitle?: string | null;\n /** IP type (apiValue or label) — renders the icon badge on the footer left. */\n ipType?: string | null;\n /** Listing price; omit/null shows no price. */\n price?: AssetCardPrice | null;\n /** Shown when the image is missing/errors (e.g. token id). */\n fallbackId?: string | null;\n /** Show the \"Indexing…\" overlay. */\n indexing?: boolean;\n /** Base URL for the ipType badge link. Default \"\" (relative). */\n ipTypeBaseUrl?: string;\n className?: string;\n}\n\n/**\n * The platform's shared asset card — lean and presentational.\n *\n * Intentionally has no action buttons, dropdowns or dialogs: the image and\n * text are the only interactive surface (a single asset link), which keeps\n * browse grids and carousels fast even when many cards render. Surfaces that\n * need owner/marketplace actions use the richer `TokenCard` / `ListingCard`.\n *\n * Layout: inset 4:5 artwork (gallery ratio, echoing the Medialane Collection\n * Card) → display-face title → optional subtitle → footer row with the\n * (optional) ipType icon on the left and the (optional) price on the right.\n */\nexport function AssetCard({\n href,\n name,\n image,\n subtitle,\n ipType,\n price,\n fallbackId,\n indexing = false,\n ipTypeBaseUrl = \"\",\n className,\n}: AssetCardProps) {\n const [imgError, setImgError] = useState(false);\n const resolved = image ? ipfsToHttp(image) : null;\n const hasPrice = !!price?.formatted;\n const showFooter = !!ipType || hasPrice;\n\n return (\n <div\n className={cn(\n \"card-base group relative flex flex-col w-full transition-colors hover:border-foreground/20\",\n className\n )}\n >\n {/* Artwork — inset with a gallery 4:5 ratio, like the Collection Card */}\n <Link href={href} className=\"block p-1.5 pb-0\">\n <div className=\"relative aspect-[4/5] rounded-[12px] bg-muted overflow-hidden ring-1 ring-border/50\">\n {resolved && !imgError ? (\n <Image\n src={resolved}\n alt={name}\n fill\n unoptimized\n sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw\"\n className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n onError={() => setImgError(true)}\n />\n ) : (\n <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-blue/25 via-brand-purple/25 to-brand-rose/25\">\n <span className=\"text-sm font-semibold text-muted-foreground tabular-nums\">\n #{fallbackId ?? \"?\"}\n </span>\n </div>\n )}\n\n {indexing && (\n <div className=\"absolute bottom-0 inset-x-0 flex items-center justify-center gap-1.5 bg-black/50 backdrop-blur-sm py-1.5\">\n <Loader2 className=\"h-3 w-3 animate-spin text-white/70\" />\n <span className=\"text-[10px] text-white/70\">Indexing…</span>\n </div>\n )}\n </div>\n </Link>\n\n {/* Body */}\n <div className=\"flex flex-col gap-1.5 px-3 py-3\">\n <Link href={href} className=\"block min-w-0\">\n <p\n className=\"text-[15px] font-bold line-clamp-1 leading-snug\"\n style={{ fontFamily: \"var(--font-display, inherit)\" }}\n >\n {name}\n </p>\n {subtitle && (\n <p className=\"text-xs text-muted-foreground line-clamp-1 leading-snug\">\n {subtitle}\n </p>\n )}\n </Link>\n\n {showFooter && (\n <div className=\"flex items-center justify-between gap-2\">\n {ipType ? (\n <IpTypeBadge ipType={ipType} size=\"sm\" baseUrl={ipTypeBaseUrl} />\n ) : (\n <span />\n )}\n {hasPrice && (\n <span className=\"inline-flex shrink-0 items-center gap-1 text-sm leading-none price-value\">\n {price!.currency && <CurrencyIcon symbol={price!.currency} size={12} />}\n {formatDisplayPrice(price!.formatted!)}\n </span>\n )}\n </div>\n )}\n </div>\n </div>\n );\n}\n\nexport function AssetCardSkeleton() {\n return (\n <div className=\"card-base flex flex-col w-full\">\n <div className=\"p-1.5 pb-0\">\n <div className=\"aspect-[4/5] w-full animate-pulse bg-muted rounded-[12px]\" />\n </div>\n <div className=\"px-3 py-3 space-y-1.5\">\n <div className=\"h-4 w-3/4 rounded-md animate-pulse bg-muted\" />\n <div className=\"h-3.5 w-2/5 rounded-md animate-pulse bg-muted\" />\n </div>\n </div>\n );\n}\n"],"mappings":";AA+EY,cAWE,YAXF;AA7EZ,SAAS,gBAAgB;AACzB,OAAO,UAAU;AACjB,OAAO,WAAW;AAClB,SAAS,eAAe;AACxB,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAyCrB,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AACF,GAAmB;AACjB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,WAAW,QAAQ,WAAW,KAAK,IAAI;AAC7C,QAAM,WAAW,CAAC,CAAC,OAAO;AAC1B,QAAM,aAAa,CAAC,CAAC,UAAU;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAGA;AAAA,4BAAC,QAAK,MAAY,WAAU,oBAC1B,+BAAC,SAAI,WAAU,uFACZ;AAAA,sBAAY,CAAC,WACZ;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK;AAAA,cACL,MAAI;AAAA,cACJ,aAAW;AAAA,cACX,OAAM;AAAA,cACN,WAAU;AAAA,cACV,SAAS,MAAM,YAAY,IAAI;AAAA;AAAA,UACjC,IAEA,oBAAC,SAAI,WAAU,+HACb,+BAAC,UAAK,WAAU,4DAA2D;AAAA;AAAA,YACvE,cAAc;AAAA,aAClB,GACF;AAAA,UAGD,YACC,qBAAC,SAAI,WAAU,4GACb;AAAA,gCAAC,WAAQ,WAAU,sCAAqC;AAAA,YACxD,oBAAC,UAAK,WAAU,6BAA4B,4BAAS;AAAA,aACvD;AAAA,WAEJ,GACF;AAAA,QAGA,qBAAC,SAAI,WAAU,mCACb;AAAA,+BAAC,QAAK,MAAY,WAAU,iBAC1B;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,YAAY,+BAA+B;AAAA,gBAEnD;AAAA;AAAA,YACH;AAAA,YACC,YACC,oBAAC,OAAE,WAAU,2DACV,oBACH;AAAA,aAEJ;AAAA,UAEC,cACC,qBAAC,SAAI,WAAU,2CACZ;AAAA,qBACC,oBAAC,eAAY,QAAgB,MAAK,MAAK,SAAS,eAAe,IAE/D,oBAAC,UAAK;AAAA,YAEP,YACC,qBAAC,UAAK,WAAU,4EACb;AAAA,oBAAO,YAAY,oBAAC,gBAAa,QAAQ,MAAO,UAAU,MAAM,IAAI;AAAA,cACpE,mBAAmB,MAAO,SAAU;AAAA,eACvC;AAAA,aAEJ;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,oBAAoB;AAClC,SACE,qBAAC,SAAI,WAAU,kCACb;AAAA,wBAAC,SAAI,WAAU,cACb,8BAAC,SAAI,WAAU,6DAA4D,GAC7E;AAAA,IACA,qBAAC,SAAI,WAAU,yBACb;AAAA,0BAAC,SAAI,WAAU,+CAA8C;AAAA,MAC7D,oBAAC,SAAI,WAAU,iDAAgD;AAAA,OACjE;AAAA,KACF;AAEJ;","names":[]}
|