@medialane/ui 0.19.0 → 0.20.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-overview-content.cjs +42 -19
- package/dist/components/asset-overview-content.cjs.map +1 -1
- package/dist/components/asset-overview-content.d.cts +5 -4
- package/dist/components/asset-overview-content.d.ts +5 -4
- package/dist/components/asset-overview-content.js +43 -20
- package/dist/components/asset-overview-content.js.map +1 -1
- package/package.json +1 -1
|
@@ -28,14 +28,25 @@ var import_ip_type_display = require("./ip-type-display.js");
|
|
|
28
28
|
var import_address_display = require("./address-display.js");
|
|
29
29
|
var import_license_summary = require("../utils/license-summary.js");
|
|
30
30
|
const isAddressLike = (v) => !!v && /^0x[0-9a-fA-F]{16,}$/.test(v.trim());
|
|
31
|
-
function
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
31
|
+
function Cell({
|
|
32
|
+
icon,
|
|
33
|
+
label,
|
|
34
|
+
value,
|
|
35
|
+
wide
|
|
36
|
+
}) {
|
|
37
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
38
|
+
"div",
|
|
39
|
+
{
|
|
40
|
+
className: `flex flex-col justify-between gap-2 rounded-xl bg-muted/25 ring-1 ring-border/40 p-3.5 ${wide ? "col-span-2" : ""}`,
|
|
41
|
+
children: [
|
|
42
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-primary/70", children: icon }) : null,
|
|
43
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-0.5", children: [
|
|
44
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground truncate", title: label, children: label }),
|
|
45
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-bold text-foreground truncate", children: value })
|
|
46
|
+
] })
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
);
|
|
39
50
|
}
|
|
40
51
|
function AssetOverviewContent({
|
|
41
52
|
attributes,
|
|
@@ -60,7 +71,6 @@ function AssetOverviewContent({
|
|
|
60
71
|
{ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.UserCheck, { className: "h-4 w-4" }), label: "Attribution", value: attribution },
|
|
61
72
|
{ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Globe, { className: "h-4 w-4" }), label: "Territory", value: territory },
|
|
62
73
|
{ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Bot, { className: "h-4 w-4" }), label: "AI & data mining", value: aiPolicy },
|
|
63
|
-
{ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ShieldCheck, { className: "h-4 w-4" }), label: "License", value: licenseType },
|
|
64
74
|
{ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Percent, { className: "h-4 w-4" }), label: "Royalty", value: royalty },
|
|
65
75
|
{ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Calendar, { className: "h-4 w-4" }), label: "Registered", value: registration }
|
|
66
76
|
].filter((row) => !!row.value);
|
|
@@ -68,20 +78,33 @@ function AssetOverviewContent({
|
|
|
68
78
|
hasTemplateData ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ip_type_display.IPTypeDisplay, { attributes }) : null,
|
|
69
79
|
hasLicenseData ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "space-y-3", children: [
|
|
70
80
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Rights" }),
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
81
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
|
|
82
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
83
|
+
"div",
|
|
84
|
+
{
|
|
85
|
+
"aria-hidden": true,
|
|
86
|
+
className: "aurora-purple pointer-events-none",
|
|
87
|
+
style: { position: "absolute", width: 260, height: 260, top: -40, left: "30%" }
|
|
88
|
+
}
|
|
89
|
+
),
|
|
90
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative grid grid-cols-2 sm:grid-cols-4 gap-3 [grid-auto-flow:dense] auto-rows-[minmax(6rem,auto)]", children: [
|
|
91
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "col-span-2 sm:row-span-2 flex flex-col justify-between gap-4 rounded-2xl bg-gradient-to-br from-primary/10 via-primary/5 to-accent/10 ring-1 ring-primary/15 p-5", children: [
|
|
92
|
+
licenseType ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pill-badge self-start text-[10px] uppercase tracking-wider", children: licenseType }) : null,
|
|
93
|
+
summary ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-base sm:text-lg font-semibold leading-snug text-foreground", children: summary }) : null
|
|
94
|
+
] }),
|
|
95
|
+
facts.map(({ icon, label, value }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Cell, { icon, label, value }, label))
|
|
96
|
+
] })
|
|
97
|
+
] }),
|
|
98
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground/70", children: "Kept in permanent, tamper-proof storage \xB7 recognized under international copyright law" })
|
|
77
99
|
] }) : null,
|
|
78
|
-
displayAttributes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "space-y-
|
|
100
|
+
displayAttributes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "space-y-3", children: [
|
|
79
101
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Details" }),
|
|
80
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-
|
|
81
|
-
|
|
102
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3 [grid-auto-flow:dense] auto-rows-[minmax(6rem,auto)]", children: displayAttributes.map((attribute, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
103
|
+
Cell,
|
|
82
104
|
{
|
|
83
105
|
label: attribute.trait_type ?? "Trait",
|
|
84
|
-
|
|
106
|
+
wide: isAddressLike(attribute.value),
|
|
107
|
+
value: isAddressLike(attribute.value) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_address_display.AddressDisplay, { address: attribute.value, chars: 4, className: "text-sm font-bold" }) : attribute.value ?? "\u2014"
|
|
85
108
|
},
|
|
86
109
|
index
|
|
87
110
|
)) })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/asset-overview-content.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { Bot, Calendar, DollarSign, GitBranch, Globe, Percent,
|
|
1
|
+
{"version":3,"sources":["../../src/components/asset-overview-content.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { Bot, Calendar, DollarSign, GitBranch, Globe, Percent, UserCheck } from \"lucide-react\";\nimport { IPTypeDisplay } from \"./ip-type-display.js\";\nimport { AddressDisplay } from \"./address-display.js\";\nimport { licenseSummary } from \"../utils/license-summary.js\";\n\ninterface AssetAttribute {\n trait_type?: string;\n value?: string;\n}\n\ninterface AssetOverviewContentProps {\n attributes: AssetAttribute[];\n hasTemplateData: boolean;\n isDisplayAttr: (attribute: AssetAttribute) => boolean;\n}\n\nconst isAddressLike = (v?: string): boolean => !!v && /^0x[0-9a-fA-F]{16,}$/.test(v.trim());\n\n/** A standard bento square: a brand-tinted icon, an uppercase label, a bold value.\n * `wide` stretches it across two columns for an emphasized detail. */\nfunction Cell({\n icon,\n label,\n value,\n wide,\n}: {\n icon?: ReactNode;\n label: string;\n value: ReactNode;\n wide?: boolean;\n}) {\n return (\n <div\n className={`flex flex-col justify-between gap-2 rounded-xl bg-muted/25 ring-1 ring-border/40 p-3.5 ${\n wide ? \"col-span-2\" : \"\"\n }`}\n >\n {icon ? <span className=\"text-primary/70\">{icon}</span> : null}\n <div className=\"space-y-0.5\">\n <p className=\"text-[10px] font-medium uppercase tracking-wider text-muted-foreground truncate\" title={label}>\n {label}\n </p>\n <div className=\"text-sm font-bold text-foreground truncate\">{value}</div>\n </div>\n </div>\n );\n}\n\n/**\n * Asset Overview tab, as a Bento 2.0 grid: an asymmetrical lattice of rounded\n * compartments on a soft brand light-leak, uniform gaps throughout. The license\n * summary is the emphasized cell (stretched 2×2, brand-gradient wash + license\n * stamp + emerald trust seal); each right is a standard square; Details follow.\n * Uses only design-system tokens (brand-* / primary / aurora / emerald-for-trust).\n */\nexport function AssetOverviewContent({\n attributes,\n hasTemplateData,\n isDisplayAttr,\n}: AssetOverviewContentProps) {\n const attr = (trait: string) => attributes.find((attribute) => attribute.trait_type === trait)?.value;\n const licenseType = attr(\"License\");\n const commercialUse = attr(\"Commercial Use\");\n const derivatives = attr(\"Derivatives\");\n const attribution = attr(\"Attribution\");\n const territory = attr(\"Territory\");\n const aiPolicy = attr(\"AI Policy\");\n const royalty = attr(\"Royalty\");\n const registration = attr(\"Registration\");\n const summary = licenseSummary(attributes);\n const hasLicenseData = !!(licenseType || commercialUse || derivatives || attribution);\n const displayAttributes = attributes.filter((attribute) => isDisplayAttr(attribute));\n\n const facts = [\n { icon: <DollarSign className=\"h-4 w-4\" />, label: \"Commercial use\", value: commercialUse },\n { icon: <GitBranch className=\"h-4 w-4\" />, label: \"Derivatives\", value: derivatives },\n { icon: <UserCheck className=\"h-4 w-4\" />, label: \"Attribution\", value: attribution },\n { icon: <Globe className=\"h-4 w-4\" />, label: \"Territory\", value: territory },\n { icon: <Bot className=\"h-4 w-4\" />, label: \"AI & data mining\", value: aiPolicy },\n { icon: <Percent className=\"h-4 w-4\" />, label: \"Royalty\", value: royalty },\n { icon: <Calendar className=\"h-4 w-4\" />, label: \"Registered\", value: registration },\n ].filter((row) => !!row.value);\n\n return (\n <div className=\"mt-4 space-y-7\">\n {hasTemplateData ? <IPTypeDisplay attributes={attributes} /> : null}\n\n {hasLicenseData ? (\n <section className=\"space-y-3\">\n <h3 className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">Rights</h3>\n <div className=\"relative\">\n {/* soft brand light-leak behind the lattice */}\n <div\n aria-hidden\n className=\"aurora-purple pointer-events-none\"\n style={{ position: \"absolute\", width: 260, height: 260, top: -40, left: \"30%\" }}\n />\n <div className=\"relative grid grid-cols-2 sm:grid-cols-4 gap-3 [grid-auto-flow:dense] auto-rows-[minmax(6rem,auto)]\">\n {/* emphasized cell — the license summary, stretched 2×2 */}\n <div className=\"col-span-2 sm:row-span-2 flex flex-col justify-between gap-4 rounded-2xl bg-gradient-to-br from-primary/10 via-primary/5 to-accent/10 ring-1 ring-primary/15 p-5\">\n {licenseType ? (\n <span className=\"pill-badge self-start text-[10px] uppercase tracking-wider\">{licenseType}</span>\n ) : null}\n {summary ? (\n <p className=\"text-base sm:text-lg font-semibold leading-snug text-foreground\">{summary}</p>\n ) : null}\n </div>\n\n {facts.map(({ icon, label, value }) => (\n <Cell key={label} icon={icon} label={label} value={value} />\n ))}\n </div>\n </div>\n <p className=\"text-xs text-muted-foreground/70\">\n Kept in permanent, tamper-proof storage · recognized under international copyright law\n </p>\n </section>\n ) : null}\n\n {displayAttributes.length > 0 ? (\n <section className=\"space-y-3\">\n <h3 className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">Details</h3>\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3 [grid-auto-flow:dense] auto-rows-[minmax(6rem,auto)]\">\n {displayAttributes.map((attribute, index) => (\n <Cell\n key={index}\n label={attribute.trait_type ?? \"Trait\"}\n wide={isAddressLike(attribute.value)}\n value={\n isAddressLike(attribute.value) ? (\n <AddressDisplay address={attribute.value!} chars={4} className=\"text-sm font-bold\" />\n ) : (\n attribute.value ?? \"—\"\n )\n }\n />\n ))}\n </div>\n </section>\n ) : null}\n\n {!hasTemplateData && !hasLicenseData && displayAttributes.length === 0 ? (\n <p className=\"text-sm text-muted-foreground\">No additional details available.</p>\n ) : null}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -10,10 +10,11 @@ interface AssetOverviewContentProps {
|
|
|
10
10
|
isDisplayAttr: (attribute: AssetAttribute) => boolean;
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
13
|
-
* Asset Overview tab
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
13
|
+
* Asset Overview tab, as a Bento 2.0 grid: an asymmetrical lattice of rounded
|
|
14
|
+
* compartments on a soft brand light-leak, uniform gaps throughout. The license
|
|
15
|
+
* summary is the emphasized cell (stretched 2×2, brand-gradient wash + license
|
|
16
|
+
* stamp + emerald trust seal); each right is a standard square; Details follow.
|
|
17
|
+
* Uses only design-system tokens (brand-* / primary / aurora / emerald-for-trust).
|
|
17
18
|
*/
|
|
18
19
|
declare function AssetOverviewContent({ attributes, hasTemplateData, isDisplayAttr, }: AssetOverviewContentProps): react_jsx_runtime.JSX.Element;
|
|
19
20
|
|
|
@@ -10,10 +10,11 @@ interface AssetOverviewContentProps {
|
|
|
10
10
|
isDisplayAttr: (attribute: AssetAttribute) => boolean;
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
13
|
-
* Asset Overview tab
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
13
|
+
* Asset Overview tab, as a Bento 2.0 grid: an asymmetrical lattice of rounded
|
|
14
|
+
* compartments on a soft brand light-leak, uniform gaps throughout. The license
|
|
15
|
+
* summary is the emphasized cell (stretched 2×2, brand-gradient wash + license
|
|
16
|
+
* stamp + emerald trust seal); each right is a standard square; Details follow.
|
|
17
|
+
* Uses only design-system tokens (brand-* / primary / aurora / emerald-for-trust).
|
|
17
18
|
*/
|
|
18
19
|
declare function AssetOverviewContent({ attributes, hasTemplateData, isDisplayAttr, }: AssetOverviewContentProps): react_jsx_runtime.JSX.Element;
|
|
19
20
|
|
|
@@ -1,18 +1,29 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Bot, Calendar, DollarSign, GitBranch, Globe, Percent,
|
|
3
|
+
import { Bot, Calendar, DollarSign, GitBranch, Globe, Percent, UserCheck } from "lucide-react";
|
|
4
4
|
import { IPTypeDisplay } from "./ip-type-display.js";
|
|
5
5
|
import { AddressDisplay } from "./address-display.js";
|
|
6
6
|
import { licenseSummary } from "../utils/license-summary.js";
|
|
7
7
|
const isAddressLike = (v) => !!v && /^0x[0-9a-fA-F]{16,}$/.test(v.trim());
|
|
8
|
-
function
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
function Cell({
|
|
9
|
+
icon,
|
|
10
|
+
label,
|
|
11
|
+
value,
|
|
12
|
+
wide
|
|
13
|
+
}) {
|
|
14
|
+
return /* @__PURE__ */ jsxs(
|
|
15
|
+
"div",
|
|
16
|
+
{
|
|
17
|
+
className: `flex flex-col justify-between gap-2 rounded-xl bg-muted/25 ring-1 ring-border/40 p-3.5 ${wide ? "col-span-2" : ""}`,
|
|
18
|
+
children: [
|
|
19
|
+
icon ? /* @__PURE__ */ jsx("span", { className: "text-primary/70", children: icon }) : null,
|
|
20
|
+
/* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
|
|
21
|
+
/* @__PURE__ */ jsx("p", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground truncate", title: label, children: label }),
|
|
22
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-bold text-foreground truncate", children: value })
|
|
23
|
+
] })
|
|
24
|
+
]
|
|
25
|
+
}
|
|
26
|
+
);
|
|
16
27
|
}
|
|
17
28
|
function AssetOverviewContent({
|
|
18
29
|
attributes,
|
|
@@ -37,7 +48,6 @@ function AssetOverviewContent({
|
|
|
37
48
|
{ icon: /* @__PURE__ */ jsx(UserCheck, { className: "h-4 w-4" }), label: "Attribution", value: attribution },
|
|
38
49
|
{ icon: /* @__PURE__ */ jsx(Globe, { className: "h-4 w-4" }), label: "Territory", value: territory },
|
|
39
50
|
{ icon: /* @__PURE__ */ jsx(Bot, { className: "h-4 w-4" }), label: "AI & data mining", value: aiPolicy },
|
|
40
|
-
{ icon: /* @__PURE__ */ jsx(ShieldCheck, { className: "h-4 w-4" }), label: "License", value: licenseType },
|
|
41
51
|
{ icon: /* @__PURE__ */ jsx(Percent, { className: "h-4 w-4" }), label: "Royalty", value: royalty },
|
|
42
52
|
{ icon: /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4" }), label: "Registered", value: registration }
|
|
43
53
|
].filter((row) => !!row.value);
|
|
@@ -45,20 +55,33 @@ function AssetOverviewContent({
|
|
|
45
55
|
hasTemplateData ? /* @__PURE__ */ jsx(IPTypeDisplay, { attributes }) : null,
|
|
46
56
|
hasLicenseData ? /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
|
|
47
57
|
/* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Rights" }),
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
58
|
+
/* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
59
|
+
/* @__PURE__ */ jsx(
|
|
60
|
+
"div",
|
|
61
|
+
{
|
|
62
|
+
"aria-hidden": true,
|
|
63
|
+
className: "aurora-purple pointer-events-none",
|
|
64
|
+
style: { position: "absolute", width: 260, height: 260, top: -40, left: "30%" }
|
|
65
|
+
}
|
|
66
|
+
),
|
|
67
|
+
/* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-2 sm:grid-cols-4 gap-3 [grid-auto-flow:dense] auto-rows-[minmax(6rem,auto)]", children: [
|
|
68
|
+
/* @__PURE__ */ jsxs("div", { className: "col-span-2 sm:row-span-2 flex flex-col justify-between gap-4 rounded-2xl bg-gradient-to-br from-primary/10 via-primary/5 to-accent/10 ring-1 ring-primary/15 p-5", children: [
|
|
69
|
+
licenseType ? /* @__PURE__ */ jsx("span", { className: "pill-badge self-start text-[10px] uppercase tracking-wider", children: licenseType }) : null,
|
|
70
|
+
summary ? /* @__PURE__ */ jsx("p", { className: "text-base sm:text-lg font-semibold leading-snug text-foreground", children: summary }) : null
|
|
71
|
+
] }),
|
|
72
|
+
facts.map(({ icon, label, value }) => /* @__PURE__ */ jsx(Cell, { icon, label, value }, label))
|
|
73
|
+
] })
|
|
74
|
+
] }),
|
|
75
|
+
/* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/70", children: "Kept in permanent, tamper-proof storage \xB7 recognized under international copyright law" })
|
|
54
76
|
] }) : null,
|
|
55
|
-
displayAttributes.length > 0 ? /* @__PURE__ */ jsxs("section", { className: "space-y-
|
|
77
|
+
displayAttributes.length > 0 ? /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
|
|
56
78
|
/* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Details" }),
|
|
57
|
-
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-
|
|
58
|
-
|
|
79
|
+
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3 [grid-auto-flow:dense] auto-rows-[minmax(6rem,auto)]", children: displayAttributes.map((attribute, index) => /* @__PURE__ */ jsx(
|
|
80
|
+
Cell,
|
|
59
81
|
{
|
|
60
82
|
label: attribute.trait_type ?? "Trait",
|
|
61
|
-
|
|
83
|
+
wide: isAddressLike(attribute.value),
|
|
84
|
+
value: isAddressLike(attribute.value) ? /* @__PURE__ */ jsx(AddressDisplay, { address: attribute.value, chars: 4, className: "text-sm font-bold" }) : attribute.value ?? "\u2014"
|
|
62
85
|
},
|
|
63
86
|
index
|
|
64
87
|
)) })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/asset-overview-content.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { Bot, Calendar, DollarSign, GitBranch, Globe, Percent,
|
|
1
|
+
{"version":3,"sources":["../../src/components/asset-overview-content.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { Bot, Calendar, DollarSign, GitBranch, Globe, Percent, UserCheck } from \"lucide-react\";\nimport { IPTypeDisplay } from \"./ip-type-display.js\";\nimport { AddressDisplay } from \"./address-display.js\";\nimport { licenseSummary } from \"../utils/license-summary.js\";\n\ninterface AssetAttribute {\n trait_type?: string;\n value?: string;\n}\n\ninterface AssetOverviewContentProps {\n attributes: AssetAttribute[];\n hasTemplateData: boolean;\n isDisplayAttr: (attribute: AssetAttribute) => boolean;\n}\n\nconst isAddressLike = (v?: string): boolean => !!v && /^0x[0-9a-fA-F]{16,}$/.test(v.trim());\n\n/** A standard bento square: a brand-tinted icon, an uppercase label, a bold value.\n * `wide` stretches it across two columns for an emphasized detail. */\nfunction Cell({\n icon,\n label,\n value,\n wide,\n}: {\n icon?: ReactNode;\n label: string;\n value: ReactNode;\n wide?: boolean;\n}) {\n return (\n <div\n className={`flex flex-col justify-between gap-2 rounded-xl bg-muted/25 ring-1 ring-border/40 p-3.5 ${\n wide ? \"col-span-2\" : \"\"\n }`}\n >\n {icon ? <span className=\"text-primary/70\">{icon}</span> : null}\n <div className=\"space-y-0.5\">\n <p className=\"text-[10px] font-medium uppercase tracking-wider text-muted-foreground truncate\" title={label}>\n {label}\n </p>\n <div className=\"text-sm font-bold text-foreground truncate\">{value}</div>\n </div>\n </div>\n );\n}\n\n/**\n * Asset Overview tab, as a Bento 2.0 grid: an asymmetrical lattice of rounded\n * compartments on a soft brand light-leak, uniform gaps throughout. The license\n * summary is the emphasized cell (stretched 2×2, brand-gradient wash + license\n * stamp + emerald trust seal); each right is a standard square; Details follow.\n * Uses only design-system tokens (brand-* / primary / aurora / emerald-for-trust).\n */\nexport function AssetOverviewContent({\n attributes,\n hasTemplateData,\n isDisplayAttr,\n}: AssetOverviewContentProps) {\n const attr = (trait: string) => attributes.find((attribute) => attribute.trait_type === trait)?.value;\n const licenseType = attr(\"License\");\n const commercialUse = attr(\"Commercial Use\");\n const derivatives = attr(\"Derivatives\");\n const attribution = attr(\"Attribution\");\n const territory = attr(\"Territory\");\n const aiPolicy = attr(\"AI Policy\");\n const royalty = attr(\"Royalty\");\n const registration = attr(\"Registration\");\n const summary = licenseSummary(attributes);\n const hasLicenseData = !!(licenseType || commercialUse || derivatives || attribution);\n const displayAttributes = attributes.filter((attribute) => isDisplayAttr(attribute));\n\n const facts = [\n { icon: <DollarSign className=\"h-4 w-4\" />, label: \"Commercial use\", value: commercialUse },\n { icon: <GitBranch className=\"h-4 w-4\" />, label: \"Derivatives\", value: derivatives },\n { icon: <UserCheck className=\"h-4 w-4\" />, label: \"Attribution\", value: attribution },\n { icon: <Globe className=\"h-4 w-4\" />, label: \"Territory\", value: territory },\n { icon: <Bot className=\"h-4 w-4\" />, label: \"AI & data mining\", value: aiPolicy },\n { icon: <Percent className=\"h-4 w-4\" />, label: \"Royalty\", value: royalty },\n { icon: <Calendar className=\"h-4 w-4\" />, label: \"Registered\", value: registration },\n ].filter((row) => !!row.value);\n\n return (\n <div className=\"mt-4 space-y-7\">\n {hasTemplateData ? <IPTypeDisplay attributes={attributes} /> : null}\n\n {hasLicenseData ? (\n <section className=\"space-y-3\">\n <h3 className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">Rights</h3>\n <div className=\"relative\">\n {/* soft brand light-leak behind the lattice */}\n <div\n aria-hidden\n className=\"aurora-purple pointer-events-none\"\n style={{ position: \"absolute\", width: 260, height: 260, top: -40, left: \"30%\" }}\n />\n <div className=\"relative grid grid-cols-2 sm:grid-cols-4 gap-3 [grid-auto-flow:dense] auto-rows-[minmax(6rem,auto)]\">\n {/* emphasized cell — the license summary, stretched 2×2 */}\n <div className=\"col-span-2 sm:row-span-2 flex flex-col justify-between gap-4 rounded-2xl bg-gradient-to-br from-primary/10 via-primary/5 to-accent/10 ring-1 ring-primary/15 p-5\">\n {licenseType ? (\n <span className=\"pill-badge self-start text-[10px] uppercase tracking-wider\">{licenseType}</span>\n ) : null}\n {summary ? (\n <p className=\"text-base sm:text-lg font-semibold leading-snug text-foreground\">{summary}</p>\n ) : null}\n </div>\n\n {facts.map(({ icon, label, value }) => (\n <Cell key={label} icon={icon} label={label} value={value} />\n ))}\n </div>\n </div>\n <p className=\"text-xs text-muted-foreground/70\">\n Kept in permanent, tamper-proof storage · recognized under international copyright law\n </p>\n </section>\n ) : null}\n\n {displayAttributes.length > 0 ? (\n <section className=\"space-y-3\">\n <h3 className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">Details</h3>\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3 [grid-auto-flow:dense] auto-rows-[minmax(6rem,auto)]\">\n {displayAttributes.map((attribute, index) => (\n <Cell\n key={index}\n label={attribute.trait_type ?? \"Trait\"}\n wide={isAddressLike(attribute.value)}\n value={\n isAddressLike(attribute.value) ? (\n <AddressDisplay address={attribute.value!} chars={4} className=\"text-sm font-bold\" />\n ) : (\n attribute.value ?? \"—\"\n )\n }\n />\n ))}\n </div>\n </section>\n ) : null}\n\n {!hasTemplateData && !hasLicenseData && displayAttributes.length === 0 ? (\n <p className=\"text-sm text-muted-foreground\">No additional details available.</p>\n ) : null}\n </div>\n );\n}\n"],"mappings":";AAwCc,cACR,YADQ;AArCd,SAAS,KAAK,UAAU,YAAY,WAAW,OAAO,SAAS,iBAAiB;AAChF,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAa/B,MAAM,gBAAgB,CAAC,MAAwB,CAAC,CAAC,KAAK,uBAAuB,KAAK,EAAE,KAAK,CAAC;AAI1F,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,0FACT,OAAO,eAAe,EACxB;AAAA,MAEC;AAAA,eAAO,oBAAC,UAAK,WAAU,mBAAmB,gBAAK,IAAU;AAAA,QAC1D,qBAAC,SAAI,WAAU,eACb;AAAA,8BAAC,OAAE,WAAU,mFAAkF,OAAO,OACnG,iBACH;AAAA,UACA,oBAAC,SAAI,WAAU,8CAA8C,iBAAM;AAAA,WACrE;AAAA;AAAA;AAAA,EACF;AAEJ;AASO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,OAAO,CAAC,UAAkB,WAAW,KAAK,CAAC,cAAc,UAAU,eAAe,KAAK,GAAG;AAChG,QAAM,cAAc,KAAK,SAAS;AAClC,QAAM,gBAAgB,KAAK,gBAAgB;AAC3C,QAAM,cAAc,KAAK,aAAa;AACtC,QAAM,cAAc,KAAK,aAAa;AACtC,QAAM,YAAY,KAAK,WAAW;AAClC,QAAM,WAAW,KAAK,WAAW;AACjC,QAAM,UAAU,KAAK,SAAS;AAC9B,QAAM,eAAe,KAAK,cAAc;AACxC,QAAM,UAAU,eAAe,UAAU;AACzC,QAAM,iBAAiB,CAAC,EAAE,eAAe,iBAAiB,eAAe;AACzE,QAAM,oBAAoB,WAAW,OAAO,CAAC,cAAc,cAAc,SAAS,CAAC;AAEnF,QAAM,QAAQ;AAAA,IACZ,EAAE,MAAM,oBAAC,cAAW,WAAU,WAAU,GAAI,OAAO,kBAAkB,OAAO,cAAc;AAAA,IAC1F,EAAE,MAAM,oBAAC,aAAU,WAAU,WAAU,GAAI,OAAO,eAAe,OAAO,YAAY;AAAA,IACpF,EAAE,MAAM,oBAAC,aAAU,WAAU,WAAU,GAAI,OAAO,eAAe,OAAO,YAAY;AAAA,IACpF,EAAE,MAAM,oBAAC,SAAM,WAAU,WAAU,GAAI,OAAO,aAAa,OAAO,UAAU;AAAA,IAC5E,EAAE,MAAM,oBAAC,OAAI,WAAU,WAAU,GAAI,OAAO,oBAAoB,OAAO,SAAS;AAAA,IAChF,EAAE,MAAM,oBAAC,WAAQ,WAAU,WAAU,GAAI,OAAO,WAAW,OAAO,QAAQ;AAAA,IAC1E,EAAE,MAAM,oBAAC,YAAS,WAAU,WAAU,GAAI,OAAO,cAAc,OAAO,aAAa;AAAA,EACrF,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,KAAK;AAE7B,SACE,qBAAC,SAAI,WAAU,kBACZ;AAAA,sBAAkB,oBAAC,iBAAc,YAAwB,IAAK;AAAA,IAE9D,iBACC,qBAAC,aAAQ,WAAU,aACjB;AAAA,0BAAC,QAAG,WAAU,wEAAuE,oBAAM;AAAA,MAC3F,qBAAC,SAAI,WAAU,YAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAU;AAAA,YACV,OAAO,EAAE,UAAU,YAAY,OAAO,KAAK,QAAQ,KAAK,KAAK,KAAK,MAAM,MAAM;AAAA;AAAA,QAChF;AAAA,QACA,qBAAC,SAAI,WAAU,uGAEb;AAAA,+BAAC,SAAI,WAAU,oKACZ;AAAA,0BACC,oBAAC,UAAK,WAAU,8DAA8D,uBAAY,IACxF;AAAA,YACH,UACC,oBAAC,OAAE,WAAU,mEAAmE,mBAAQ,IACtF;AAAA,aACN;AAAA,UAEC,MAAM,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,MAC/B,oBAAC,QAAiB,MAAY,OAAc,SAAjC,KAA+C,CAC3D;AAAA,WACH;AAAA,SACF;AAAA,MACA,oBAAC,OAAE,WAAU,oCAAmC,uGAEhD;AAAA,OACF,IACE;AAAA,IAEH,kBAAkB,SAAS,IAC1B,qBAAC,aAAQ,WAAU,aACjB;AAAA,0BAAC,QAAG,WAAU,wEAAuE,qBAAO;AAAA,MAC5F,oBAAC,SAAI,WAAU,8FACZ,4BAAkB,IAAI,CAAC,WAAW,UACjC;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,UAAU,cAAc;AAAA,UAC/B,MAAM,cAAc,UAAU,KAAK;AAAA,UACnC,OACE,cAAc,UAAU,KAAK,IAC3B,oBAAC,kBAAe,SAAS,UAAU,OAAQ,OAAO,GAAG,WAAU,qBAAoB,IAEnF,UAAU,SAAS;AAAA;AAAA,QAPlB;AAAA,MAUP,CACD,GACH;AAAA,OACF,IACE;AAAA,IAEH,CAAC,mBAAmB,CAAC,kBAAkB,kBAAkB,WAAW,IACnE,oBAAC,OAAE,WAAU,iCAAgC,8CAAgC,IAC3E;AAAA,KACN;AAEJ;","names":[]}
|