@medialane/ui 0.113.0 → 0.114.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 +15 -4
- package/dist/components/asset-card.cjs.map +1 -1
- package/dist/components/asset-card.d.cts +6 -0
- package/dist/components/asset-card.d.ts +6 -0
- package/dist/components/asset-card.js +17 -6
- package/dist/components/asset-card.js.map +1 -1
- package/package.json +1 -1
|
@@ -83,10 +83,21 @@ function AssetCard({
|
|
|
83
83
|
] }) })
|
|
84
84
|
}
|
|
85
85
|
),
|
|
86
|
-
hasPrice && !indexing &&
|
|
87
|
-
|
|
88
|
-
(0, import_format.
|
|
89
|
-
|
|
86
|
+
hasPrice && !indexing && (() => {
|
|
87
|
+
const cryptoDisplay = (0, import_format.formatDisplayPrice)(price.formatted);
|
|
88
|
+
const stable = (0, import_format.isStableCurrency)(price.currency);
|
|
89
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute bottom-2 right-2 inline-flex items-center gap-1.5 text-sm font-bold text-white/95 backdrop-blur-md bg-black/40 rounded-full pl-3 pr-3 py-1.5 tabular-nums", children: price.usdValue ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
90
|
+
price.usdValue,
|
|
91
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-white/30", children: "\xB7" }),
|
|
92
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex items-center gap-1 font-semibold text-white/65", children: [
|
|
93
|
+
price.currency && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyIcon, { symbol: price.currency, size: 12 }),
|
|
94
|
+
stable ? price.currency : cryptoDisplay
|
|
95
|
+
] })
|
|
96
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
97
|
+
price.currency && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyIcon, { symbol: price.currency, size: 13 }),
|
|
98
|
+
cryptoDisplay
|
|
99
|
+
] }) });
|
|
100
|
+
})(),
|
|
90
101
|
indexing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("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", children: [
|
|
91
102
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Loader2, { className: "h-3 w-3 animate-spin text-white/70" }),
|
|
92
103
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-2xs text-white/70", children: "Indexing\u2026" })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/asset-card.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\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\";\nimport { AnimatedTokenMedia } from \"./animated-token-media.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 /** Resolved animation_url — the live on-chain renderer, if any. */\n animationUrl?: string | null;\n /** Caller-computed eligibility for the living-render treatment. */\n live?: boolean;\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) with the price as a glass pill on the artwork (the collection cards'\n * Floor-pill vocabulary) → one body row: display-face title + optional\n * subtitle, with the optional ipType badge inline on the right.\n */\nexport function AssetCard({\n href,\n name,\n image,\n animationUrl,\n live = false,\n subtitle,\n ipType,\n price,\n fallbackId,\n indexing = false,\n ipTypeBaseUrl = \"\",\n className,\n}: AssetCardProps) {\n const resolved = image ? ipfsToHttp(image) : null;\n const hasPrice = !!price?.formatted;\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 <AnimatedTokenMedia\n image={resolved}\n animationUrl={animationUrl}\n live={live}\n alt={name}\n mode=\"fill\"\n sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw\"\n className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n fallback={\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\n {/* Price pill — anchored on the artwork, same glass chip as the\n collection cards' Floor pill */}\n {hasPrice && !indexing && (\n <span className=\"absolute bottom-2 right-2 inline-flex items-center gap-1 text-
|
|
1
|
+
{"version":3,"sources":["../../src/components/asset-card.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { Loader2 } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\nimport { AnimatedTokenMedia } from \"./animated-token-media.js\";\n\nexport interface AssetCardPrice {\n formatted?: string | null;\n currency?: string | null;\n /**\n * Pre-formatted USD equivalent (e.g. \"$13.15\"), computed by the host from\n * its own live rate feed — this package has no price-feed access by\n * design. Omit/null renders the crypto amount alone (today's behavior).\n */\n usdValue?: 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 /** Resolved animation_url — the live on-chain renderer, if any. */\n animationUrl?: string | null;\n /** Caller-computed eligibility for the living-render treatment. */\n live?: boolean;\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) with the price as a glass pill on the artwork (the collection cards'\n * Floor-pill vocabulary) → one body row: display-face title + optional\n * subtitle, with the optional ipType badge inline on the right.\n */\nexport function AssetCard({\n href,\n name,\n image,\n animationUrl,\n live = false,\n subtitle,\n ipType,\n price,\n fallbackId,\n indexing = false,\n ipTypeBaseUrl = \"\",\n className,\n}: AssetCardProps) {\n const resolved = image ? ipfsToHttp(image) : null;\n const hasPrice = !!price?.formatted;\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 <AnimatedTokenMedia\n image={resolved}\n animationUrl={animationUrl}\n live={live}\n alt={name}\n mode=\"fill\"\n sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw\"\n className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n fallback={\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\n {/* Price pill — anchored on the artwork, same glass chip as the\n collection cards' Floor pill. Fiat leads when a live rate is\n available; the on-chain amount trails, dimmer, as a secondary\n fact — never a second full-weight number competing for\n attention. Stablecoins collapse to fiat + symbol alone, since\n the crypto amount would just repeat the same figure. */}\n {hasPrice && !indexing && (() => {\n const cryptoDisplay = formatDisplayPrice(price!.formatted!);\n const stable = isStableCurrency(price!.currency);\n return (\n <span className=\"absolute bottom-2 right-2 inline-flex items-center gap-1.5 text-sm font-bold text-white/95 backdrop-blur-md bg-black/40 rounded-full pl-3 pr-3 py-1.5 tabular-nums\">\n {price!.usdValue ? (\n <>\n {price!.usdValue}\n <span className=\"text-white/30\">·</span>\n <span className=\"inline-flex items-center gap-1 font-semibold text-white/65\">\n {price!.currency && <CurrencyIcon symbol={price!.currency} size={12} />}\n {stable ? price!.currency : cryptoDisplay}\n </span>\n </>\n ) : (\n <>\n {price!.currency && <CurrencyIcon symbol={price!.currency} size={13} />}\n {cryptoDisplay}\n </>\n )}\n </span>\n );\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-2xs text-white/70\">Indexing…</span>\n </div>\n )}\n </div>\n </Link>\n\n {/* Body — one tight block: title (+ optional ipType badge inline) and subtitle */}\n <div className=\"flex items-start justify-between gap-2 px-3 py-3\">\n <Link href={href} className=\"block min-w-0 flex-1\">\n <p className=\"text-base font-bold line-clamp-1 leading-snug\">\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 {ipType && (\n <div className=\"shrink-0 mt-0.5\">\n <IpTypeBadge ipType={ipType} size=\"sm\" baseUrl={ipTypeBaseUrl} />\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;AAiGc;AA/Fd,kBAAiB;AACjB,0BAAwB;AACxB,gBAAmB;AACnB,kBAA2B;AAC3B,oBAAqD;AACrD,2BAA6B;AAC7B,2BAA4B;AAC5B,kCAAmC;AAoD5B,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AACF,GAAmB;AACjB,QAAM,WAAW,YAAQ,wBAAW,KAAK,IAAI;AAC7C,QAAM,WAAW,CAAC,CAAC,OAAO;AAE1B,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,uFACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA,KAAK;AAAA,cACL,MAAK;AAAA,cACL,OAAM;AAAA,cACN,WAAU;AAAA,cACV,UACE,4CAAC,SAAI,WAAU,+HACb,uDAAC,UAAK,WAAU,4DAA2D;AAAA;AAAA,gBACvE,cAAc;AAAA,iBAClB,GACF;AAAA;AAAA,UAEJ;AAAA,UAQC,YAAY,CAAC,aAAa,MAAM;AAC/B,kBAAM,oBAAgB,kCAAmB,MAAO,SAAU;AAC1D,kBAAM,aAAS,gCAAiB,MAAO,QAAQ;AAC/C,mBACE,4CAAC,UAAK,WAAU,sKACb,gBAAO,WACN,4EACG;AAAA,oBAAO;AAAA,cACR,4CAAC,UAAK,WAAU,iBAAgB,kBAAC;AAAA,cACjC,6CAAC,UAAK,WAAU,8DACb;AAAA,sBAAO,YAAY,4CAAC,qCAAa,QAAQ,MAAO,UAAU,MAAM,IAAI;AAAA,gBACpE,SAAS,MAAO,WAAW;AAAA,iBAC9B;AAAA,eACF,IAEA,4EACG;AAAA,oBAAO,YAAY,4CAAC,qCAAa,QAAQ,MAAO,UAAU,MAAM,IAAI;AAAA,cACpE;AAAA,eACH,GAEJ;AAAA,UAEJ,GAAG;AAAA,UAEF,YACC,6CAAC,SAAI,WAAU,4GACb;AAAA,wDAAC,+BAAQ,WAAU,sCAAqC;AAAA,YACxD,4CAAC,UAAK,WAAU,0BAAyB,4BAAS;AAAA,aACpD;AAAA,WAEJ,GACF;AAAA,QAGA,6CAAC,SAAI,WAAU,oDACb;AAAA,uDAAC,YAAAA,SAAA,EAAK,MAAY,WAAU,wBAC1B;AAAA,wDAAC,OAAE,WAAU,iDACV,gBACH;AAAA,YACC,YACC,4CAAC,OAAE,WAAU,2DACV,oBACH;AAAA,aAEJ;AAAA,UAEC,UACC,4CAAC,SAAI,WAAU,mBACb,sDAAC,oCAAY,QAAgB,MAAK,MAAK,SAAS,eAAe,GACjE;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"]}
|
|
@@ -3,6 +3,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
3
3
|
interface AssetCardPrice {
|
|
4
4
|
formatted?: string | null;
|
|
5
5
|
currency?: string | null;
|
|
6
|
+
/**
|
|
7
|
+
* Pre-formatted USD equivalent (e.g. "$13.15"), computed by the host from
|
|
8
|
+
* its own live rate feed — this package has no price-feed access by
|
|
9
|
+
* design. Omit/null renders the crypto amount alone (today's behavior).
|
|
10
|
+
*/
|
|
11
|
+
usdValue?: string | null;
|
|
6
12
|
}
|
|
7
13
|
interface AssetCardProps {
|
|
8
14
|
/** Asset detail link. */
|
|
@@ -3,6 +3,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
3
3
|
interface AssetCardPrice {
|
|
4
4
|
formatted?: string | null;
|
|
5
5
|
currency?: string | null;
|
|
6
|
+
/**
|
|
7
|
+
* Pre-formatted USD equivalent (e.g. "$13.15"), computed by the host from
|
|
8
|
+
* its own live rate feed — this package has no price-feed access by
|
|
9
|
+
* design. Omit/null renders the crypto amount alone (today's behavior).
|
|
10
|
+
*/
|
|
11
|
+
usdValue?: string | null;
|
|
6
12
|
}
|
|
7
13
|
interface AssetCardProps {
|
|
8
14
|
/** Asset detail link. */
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import Link from "next/link";
|
|
4
4
|
import { Loader2 } from "lucide-react";
|
|
5
5
|
import { cn } from "../utils/cn.js";
|
|
6
6
|
import { ipfsToHttp } from "../utils/ipfs.js";
|
|
7
|
-
import { formatDisplayPrice } from "../utils/format.js";
|
|
7
|
+
import { formatDisplayPrice, isStableCurrency } from "../utils/format.js";
|
|
8
8
|
import { CurrencyIcon } from "./currency-icon.js";
|
|
9
9
|
import { IpTypeBadge } from "./ip-type-badge.js";
|
|
10
10
|
import { AnimatedTokenMedia } from "./animated-token-media.js";
|
|
@@ -49,10 +49,21 @@ function AssetCard({
|
|
|
49
49
|
] }) })
|
|
50
50
|
}
|
|
51
51
|
),
|
|
52
|
-
hasPrice && !indexing &&
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
hasPrice && !indexing && (() => {
|
|
53
|
+
const cryptoDisplay = formatDisplayPrice(price.formatted);
|
|
54
|
+
const stable = isStableCurrency(price.currency);
|
|
55
|
+
return /* @__PURE__ */ jsx("span", { className: "absolute bottom-2 right-2 inline-flex items-center gap-1.5 text-sm font-bold text-white/95 backdrop-blur-md bg-black/40 rounded-full pl-3 pr-3 py-1.5 tabular-nums", children: price.usdValue ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
56
|
+
price.usdValue,
|
|
57
|
+
/* @__PURE__ */ jsx("span", { className: "text-white/30", children: "\xB7" }),
|
|
58
|
+
/* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 font-semibold text-white/65", children: [
|
|
59
|
+
price.currency && /* @__PURE__ */ jsx(CurrencyIcon, { symbol: price.currency, size: 12 }),
|
|
60
|
+
stable ? price.currency : cryptoDisplay
|
|
61
|
+
] })
|
|
62
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
63
|
+
price.currency && /* @__PURE__ */ jsx(CurrencyIcon, { symbol: price.currency, size: 13 }),
|
|
64
|
+
cryptoDisplay
|
|
65
|
+
] }) });
|
|
66
|
+
})(),
|
|
56
67
|
indexing && /* @__PURE__ */ jsxs("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", children: [
|
|
57
68
|
/* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin text-white/70" }),
|
|
58
69
|
/* @__PURE__ */ jsx("span", { className: "text-2xs text-white/70", children: "Indexing\u2026" })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/asset-card.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\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\";\nimport { AnimatedTokenMedia } from \"./animated-token-media.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 /** Resolved animation_url — the live on-chain renderer, if any. */\n animationUrl?: string | null;\n /** Caller-computed eligibility for the living-render treatment. */\n live?: boolean;\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) with the price as a glass pill on the artwork (the collection cards'\n * Floor-pill vocabulary) → one body row: display-face title + optional\n * subtitle, with the optional ipType badge inline on the right.\n */\nexport function AssetCard({\n href,\n name,\n image,\n animationUrl,\n live = false,\n subtitle,\n ipType,\n price,\n fallbackId,\n indexing = false,\n ipTypeBaseUrl = \"\",\n className,\n}: AssetCardProps) {\n const resolved = image ? ipfsToHttp(image) : null;\n const hasPrice = !!price?.formatted;\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 <AnimatedTokenMedia\n image={resolved}\n animationUrl={animationUrl}\n live={live}\n alt={name}\n mode=\"fill\"\n sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw\"\n className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n fallback={\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\n {/* Price pill — anchored on the artwork, same glass chip as the\n collection cards' Floor pill */}\n {hasPrice && !indexing && (\n <span className=\"absolute bottom-2 right-2 inline-flex items-center gap-1 text-
|
|
1
|
+
{"version":3,"sources":["../../src/components/asset-card.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { Loader2 } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\nimport { AnimatedTokenMedia } from \"./animated-token-media.js\";\n\nexport interface AssetCardPrice {\n formatted?: string | null;\n currency?: string | null;\n /**\n * Pre-formatted USD equivalent (e.g. \"$13.15\"), computed by the host from\n * its own live rate feed — this package has no price-feed access by\n * design. Omit/null renders the crypto amount alone (today's behavior).\n */\n usdValue?: 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 /** Resolved animation_url — the live on-chain renderer, if any. */\n animationUrl?: string | null;\n /** Caller-computed eligibility for the living-render treatment. */\n live?: boolean;\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) with the price as a glass pill on the artwork (the collection cards'\n * Floor-pill vocabulary) → one body row: display-face title + optional\n * subtitle, with the optional ipType badge inline on the right.\n */\nexport function AssetCard({\n href,\n name,\n image,\n animationUrl,\n live = false,\n subtitle,\n ipType,\n price,\n fallbackId,\n indexing = false,\n ipTypeBaseUrl = \"\",\n className,\n}: AssetCardProps) {\n const resolved = image ? ipfsToHttp(image) : null;\n const hasPrice = !!price?.formatted;\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 <AnimatedTokenMedia\n image={resolved}\n animationUrl={animationUrl}\n live={live}\n alt={name}\n mode=\"fill\"\n sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw\"\n className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n fallback={\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\n {/* Price pill — anchored on the artwork, same glass chip as the\n collection cards' Floor pill. Fiat leads when a live rate is\n available; the on-chain amount trails, dimmer, as a secondary\n fact — never a second full-weight number competing for\n attention. Stablecoins collapse to fiat + symbol alone, since\n the crypto amount would just repeat the same figure. */}\n {hasPrice && !indexing && (() => {\n const cryptoDisplay = formatDisplayPrice(price!.formatted!);\n const stable = isStableCurrency(price!.currency);\n return (\n <span className=\"absolute bottom-2 right-2 inline-flex items-center gap-1.5 text-sm font-bold text-white/95 backdrop-blur-md bg-black/40 rounded-full pl-3 pr-3 py-1.5 tabular-nums\">\n {price!.usdValue ? (\n <>\n {price!.usdValue}\n <span className=\"text-white/30\">·</span>\n <span className=\"inline-flex items-center gap-1 font-semibold text-white/65\">\n {price!.currency && <CurrencyIcon symbol={price!.currency} size={12} />}\n {stable ? price!.currency : cryptoDisplay}\n </span>\n </>\n ) : (\n <>\n {price!.currency && <CurrencyIcon symbol={price!.currency} size={13} />}\n {cryptoDisplay}\n </>\n )}\n </span>\n );\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-2xs text-white/70\">Indexing…</span>\n </div>\n )}\n </div>\n </Link>\n\n {/* Body — one tight block: title (+ optional ipType badge inline) and subtitle */}\n <div className=\"flex items-start justify-between gap-2 px-3 py-3\">\n <Link href={href} className=\"block min-w-0 flex-1\">\n <p className=\"text-base font-bold line-clamp-1 leading-snug\">\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 {ipType && (\n <div className=\"shrink-0 mt-0.5\">\n <IpTypeBadge ipType={ipType} size=\"sm\" baseUrl={ipTypeBaseUrl} />\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":";AAiGc,SAoBI,UApBJ,KACE,YADF;AA/Fd,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB,wBAAwB;AACrD,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AAoD5B,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AACF,GAAmB;AACjB,QAAM,WAAW,QAAQ,WAAW,KAAK,IAAI;AAC7C,QAAM,WAAW,CAAC,CAAC,OAAO;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAGA;AAAA,4BAAC,QAAK,MAAY,WAAU,oBAC1B,+BAAC,SAAI,WAAU,uFACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA,KAAK;AAAA,cACL,MAAK;AAAA,cACL,OAAM;AAAA,cACN,WAAU;AAAA,cACV,UACE,oBAAC,SAAI,WAAU,+HACb,+BAAC,UAAK,WAAU,4DAA2D;AAAA;AAAA,gBACvE,cAAc;AAAA,iBAClB,GACF;AAAA;AAAA,UAEJ;AAAA,UAQC,YAAY,CAAC,aAAa,MAAM;AAC/B,kBAAM,gBAAgB,mBAAmB,MAAO,SAAU;AAC1D,kBAAM,SAAS,iBAAiB,MAAO,QAAQ;AAC/C,mBACE,oBAAC,UAAK,WAAU,sKACb,gBAAO,WACN,iCACG;AAAA,oBAAO;AAAA,cACR,oBAAC,UAAK,WAAU,iBAAgB,kBAAC;AAAA,cACjC,qBAAC,UAAK,WAAU,8DACb;AAAA,sBAAO,YAAY,oBAAC,gBAAa,QAAQ,MAAO,UAAU,MAAM,IAAI;AAAA,gBACpE,SAAS,MAAO,WAAW;AAAA,iBAC9B;AAAA,eACF,IAEA,iCACG;AAAA,oBAAO,YAAY,oBAAC,gBAAa,QAAQ,MAAO,UAAU,MAAM,IAAI;AAAA,cACpE;AAAA,eACH,GAEJ;AAAA,UAEJ,GAAG;AAAA,UAEF,YACC,qBAAC,SAAI,WAAU,4GACb;AAAA,gCAAC,WAAQ,WAAU,sCAAqC;AAAA,YACxD,oBAAC,UAAK,WAAU,0BAAyB,4BAAS;AAAA,aACpD;AAAA,WAEJ,GACF;AAAA,QAGA,qBAAC,SAAI,WAAU,oDACb;AAAA,+BAAC,QAAK,MAAY,WAAU,wBAC1B;AAAA,gCAAC,OAAE,WAAU,iDACV,gBACH;AAAA,YACC,YACC,oBAAC,OAAE,WAAU,2DACV,oBACH;AAAA,aAEJ;AAAA,UAEC,UACC,oBAAC,SAAI,WAAU,mBACb,8BAAC,eAAY,QAAgB,MAAK,MAAK,SAAS,eAAe,GACjE;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":[]}
|