@medialane/ui 0.18.0 → 0.19.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 +32 -46
- package/dist/components/asset-overview-content.cjs.map +1 -1
- package/dist/components/asset-overview-content.d.cts +4 -4
- package/dist/components/asset-overview-content.d.ts +4 -4
- package/dist/components/asset-overview-content.js +32 -46
- package/dist/components/asset-overview-content.js.map +1 -1
- package/package.json +1 -1
|
@@ -26,7 +26,17 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
26
26
|
var import_lucide_react = require("lucide-react");
|
|
27
27
|
var import_ip_type_display = require("./ip-type-display.js");
|
|
28
28
|
var import_address_display = require("./address-display.js");
|
|
29
|
+
var import_license_summary = require("../utils/license-summary.js");
|
|
29
30
|
const isAddressLike = (v) => !!v && /^0x[0-9a-fA-F]{16,}$/.test(v.trim());
|
|
31
|
+
function FactRow({ icon, label, value }) {
|
|
32
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-4 py-2.5 border-b border-border/40", children: [
|
|
33
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-2 text-sm text-muted-foreground min-w-0", children: [
|
|
34
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground/60 shrink-0", children: icon }) : null,
|
|
35
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: label })
|
|
36
|
+
] }),
|
|
37
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-semibold text-foreground text-right truncate", children: value })
|
|
38
|
+
] });
|
|
39
|
+
}
|
|
30
40
|
function AssetOverviewContent({
|
|
31
41
|
attributes,
|
|
32
42
|
hasTemplateData,
|
|
@@ -40,62 +50,38 @@ function AssetOverviewContent({
|
|
|
40
50
|
const territory = attr("Territory");
|
|
41
51
|
const aiPolicy = attr("AI Policy");
|
|
42
52
|
const royalty = attr("Royalty");
|
|
43
|
-
const standard = attr("Standard");
|
|
44
53
|
const registration = attr("Registration");
|
|
45
|
-
const
|
|
54
|
+
const summary = (0, import_license_summary.licenseSummary)(attributes);
|
|
55
|
+
const hasLicenseData = !!(licenseType || commercialUse || derivatives || attribution);
|
|
46
56
|
const displayAttributes = attributes.filter((attribute) => isDisplayAttr(attribute));
|
|
47
|
-
const
|
|
48
|
-
{ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.
|
|
49
|
-
{ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.DollarSign, { className: "h-4 w-4" }), label: "Commercial Use", value: commercialUse },
|
|
57
|
+
const facts = [
|
|
58
|
+
{ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.DollarSign, { className: "h-4 w-4" }), label: "Commercial use", value: commercialUse },
|
|
50
59
|
{ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.GitBranch, { className: "h-4 w-4" }), label: "Derivatives", value: derivatives },
|
|
51
60
|
{ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.UserCheck, { className: "h-4 w-4" }), label: "Attribution", value: attribution },
|
|
52
61
|
{ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Globe, { className: "h-4 w-4" }), label: "Territory", value: territory },
|
|
53
|
-
{ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Bot, { className: "h-4 w-4" }), label: "AI &
|
|
62
|
+
{ 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 },
|
|
54
64
|
{ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Percent, { className: "h-4 w-4" }), label: "Royalty", value: royalty },
|
|
55
|
-
{ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Calendar, { className: "h-4 w-4" }), label: "
|
|
65
|
+
{ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Calendar, { className: "h-4 w-4" }), label: "Registered", value: registration }
|
|
56
66
|
].filter((row) => !!row.value);
|
|
57
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4 space-y-
|
|
67
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4 space-y-7", children: [
|
|
58
68
|
hasTemplateData ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ip_type_display.IPTypeDisplay, { attributes }) : null,
|
|
59
|
-
hasLicenseData ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
] })
|
|
67
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-2.5", children: rows.map(({ icon, label, value }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
68
|
-
"div",
|
|
69
|
-
{
|
|
70
|
-
className: "rounded-xl border border-border/50 bg-muted/15 px-3.5 py-3 overflow-hidden transition-colors hover:bg-muted/30",
|
|
71
|
-
children: [
|
|
72
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1.5 mb-1 text-muted-foreground/70", children: [
|
|
73
|
-
icon,
|
|
74
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[10px] font-medium uppercase tracking-wider truncate", children: label })
|
|
75
|
-
] }),
|
|
76
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-semibold truncate", title: value, children: value })
|
|
77
|
-
]
|
|
78
|
-
},
|
|
79
|
-
label
|
|
80
|
-
)) })
|
|
69
|
+
hasLicenseData ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "space-y-3", children: [
|
|
70
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Rights" }),
|
|
71
|
+
summary ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[15px] font-medium leading-relaxed text-foreground/90", children: summary }) : null,
|
|
72
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 sm:gap-x-10", children: facts.map(({ icon, label, value }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FactRow, { icon, label, value }, label)) }),
|
|
73
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "flex items-center gap-1.5 pt-1 text-xs text-muted-foreground/70", children: [
|
|
74
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ShieldCheck, { className: "h-3.5 w-3.5 shrink-0" }),
|
|
75
|
+
"Kept in permanent, tamper-proof storage \xB7 recognized under international copyright law"
|
|
76
|
+
] })
|
|
81
77
|
] }) : null,
|
|
82
|
-
displayAttributes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("
|
|
83
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("
|
|
84
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-
|
|
85
|
-
|
|
78
|
+
displayAttributes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "space-y-1", children: [
|
|
79
|
+
/* @__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-1 sm:grid-cols-2 sm:gap-x-10", children: displayAttributes.map((attribute, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
81
|
+
FactRow,
|
|
86
82
|
{
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
|
-
"p",
|
|
91
|
-
{
|
|
92
|
-
className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70 truncate",
|
|
93
|
-
title: attribute.trait_type ?? "Trait",
|
|
94
|
-
children: attribute.trait_type ?? "Trait"
|
|
95
|
-
}
|
|
96
|
-
),
|
|
97
|
-
isAddressLike(attribute.value) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_address_display.AddressDisplay, { address: attribute.value, chars: 4, className: "text-sm font-semibold mt-1" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-semibold mt-1 truncate", title: attribute.value ?? "\u2014", children: attribute.value ?? "\u2014" })
|
|
98
|
-
]
|
|
83
|
+
label: attribute.trait_type ?? "Trait",
|
|
84
|
+
value: isAddressLike(attribute.value) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_address_display.AddressDisplay, { address: attribute.value, chars: 4, className: "text-sm font-semibold" }) : attribute.value ?? "\u2014"
|
|
99
85
|
},
|
|
100
86
|
index
|
|
101
87
|
)) })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/asset-overview-content.tsx"],"sourcesContent":["\"use client\";\n\nimport { Bot, Calendar, DollarSign, GitBranch, Globe, Percent, ShieldCheck, UserCheck } from \"lucide-react\";\nimport { IPTypeDisplay } from \"./ip-type-display.js\";\nimport { AddressDisplay } from \"./address-display.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/**\n * Asset Overview tab
|
|
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, ShieldCheck, 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 tidy label → value row: muted label on the left, bold value on the right,\n * hairline divider underneath. Used for both Rights and Details so the whole\n * tab reads like one calm sheet — no grey boxes. */\nfunction FactRow({ icon, label, value }: { icon?: ReactNode; label: string; value: ReactNode }) {\n return (\n <div className=\"flex items-center justify-between gap-4 py-2.5 border-b border-border/40\">\n <span className=\"flex items-center gap-2 text-sm text-muted-foreground min-w-0\">\n {icon ? <span className=\"text-muted-foreground/60 shrink-0\">{icon}</span> : null}\n <span className=\"truncate\">{label}</span>\n </span>\n <span className=\"text-sm font-semibold text-foreground text-right truncate\">{value}</span>\n </div>\n );\n}\n\n/**\n * Asset Overview tab. One calm sheet: an optional IP-type block, a single\n * \"Rights\" summary (plain-language lead line + a scannable fact list + a quiet\n * trust footnote), then a light \"Details\" list. No second license block in the\n * hero, no grey-box bento, no \"protected worldwide\" banner.\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: <ShieldCheck className=\"h-4 w-4\" />, label: \"License\", value: licenseType },\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 {summary ? (\n <p className=\"text-[15px] font-medium leading-relaxed text-foreground/90\">{summary}</p>\n ) : null}\n <div className=\"grid grid-cols-1 sm:grid-cols-2 sm:gap-x-10\">\n {facts.map(({ icon, label, value }) => (\n <FactRow key={label} icon={icon} label={label} value={value} />\n ))}\n </div>\n <p className=\"flex items-center gap-1.5 pt-1 text-xs text-muted-foreground/70\">\n <ShieldCheck className=\"h-3.5 w-3.5 shrink-0\" />\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-1\">\n <h3 className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">Details</h3>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 sm:gap-x-10\">\n {displayAttributes.map((attribute, index) => (\n <FactRow\n key={index}\n label={attribute.trait_type ?? \"Trait\"}\n value={\n isAddressLike(attribute.value) ? (\n <AddressDisplay address={attribute.value!} chars={4} className=\"text-sm font-semibold\" />\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,10 @@ interface AssetOverviewContentProps {
|
|
|
10
10
|
isDisplayAttr: (attribute: AssetAttribute) => boolean;
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
13
|
-
* Asset Overview tab
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
13
|
+
* Asset Overview tab. One calm sheet: an optional IP-type block, a single
|
|
14
|
+
* "Rights" summary (plain-language lead line + a scannable fact list + a quiet
|
|
15
|
+
* trust footnote), then a light "Details" list. No second license block in the
|
|
16
|
+
* hero, no grey-box bento, no "protected worldwide" banner.
|
|
17
17
|
*/
|
|
18
18
|
declare function AssetOverviewContent({ attributes, hasTemplateData, isDisplayAttr, }: AssetOverviewContentProps): react_jsx_runtime.JSX.Element;
|
|
19
19
|
|
|
@@ -10,10 +10,10 @@ interface AssetOverviewContentProps {
|
|
|
10
10
|
isDisplayAttr: (attribute: AssetAttribute) => boolean;
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
13
|
-
* Asset Overview tab
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
13
|
+
* Asset Overview tab. One calm sheet: an optional IP-type block, a single
|
|
14
|
+
* "Rights" summary (plain-language lead line + a scannable fact list + a quiet
|
|
15
|
+
* trust footnote), then a light "Details" list. No second license block in the
|
|
16
|
+
* hero, no grey-box bento, no "protected worldwide" banner.
|
|
17
17
|
*/
|
|
18
18
|
declare function AssetOverviewContent({ attributes, hasTemplateData, isDisplayAttr, }: AssetOverviewContentProps): react_jsx_runtime.JSX.Element;
|
|
19
19
|
|
|
@@ -3,7 +3,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { Bot, Calendar, DollarSign, GitBranch, Globe, Percent, ShieldCheck, UserCheck } from "lucide-react";
|
|
4
4
|
import { IPTypeDisplay } from "./ip-type-display.js";
|
|
5
5
|
import { AddressDisplay } from "./address-display.js";
|
|
6
|
+
import { licenseSummary } from "../utils/license-summary.js";
|
|
6
7
|
const isAddressLike = (v) => !!v && /^0x[0-9a-fA-F]{16,}$/.test(v.trim());
|
|
8
|
+
function FactRow({ icon, label, value }) {
|
|
9
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 py-2.5 border-b border-border/40", children: [
|
|
10
|
+
/* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-sm text-muted-foreground min-w-0", children: [
|
|
11
|
+
icon ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 shrink-0", children: icon }) : null,
|
|
12
|
+
/* @__PURE__ */ jsx("span", { className: "truncate", children: label })
|
|
13
|
+
] }),
|
|
14
|
+
/* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground text-right truncate", children: value })
|
|
15
|
+
] });
|
|
16
|
+
}
|
|
7
17
|
function AssetOverviewContent({
|
|
8
18
|
attributes,
|
|
9
19
|
hasTemplateData,
|
|
@@ -17,62 +27,38 @@ function AssetOverviewContent({
|
|
|
17
27
|
const territory = attr("Territory");
|
|
18
28
|
const aiPolicy = attr("AI Policy");
|
|
19
29
|
const royalty = attr("Royalty");
|
|
20
|
-
const standard = attr("Standard");
|
|
21
30
|
const registration = attr("Registration");
|
|
22
|
-
const
|
|
31
|
+
const summary = licenseSummary(attributes);
|
|
32
|
+
const hasLicenseData = !!(licenseType || commercialUse || derivatives || attribution);
|
|
23
33
|
const displayAttributes = attributes.filter((attribute) => isDisplayAttr(attribute));
|
|
24
|
-
const
|
|
25
|
-
{ icon: /* @__PURE__ */ jsx(
|
|
26
|
-
{ icon: /* @__PURE__ */ jsx(DollarSign, { className: "h-4 w-4" }), label: "Commercial Use", value: commercialUse },
|
|
34
|
+
const facts = [
|
|
35
|
+
{ icon: /* @__PURE__ */ jsx(DollarSign, { className: "h-4 w-4" }), label: "Commercial use", value: commercialUse },
|
|
27
36
|
{ icon: /* @__PURE__ */ jsx(GitBranch, { className: "h-4 w-4" }), label: "Derivatives", value: derivatives },
|
|
28
37
|
{ icon: /* @__PURE__ */ jsx(UserCheck, { className: "h-4 w-4" }), label: "Attribution", value: attribution },
|
|
29
38
|
{ icon: /* @__PURE__ */ jsx(Globe, { className: "h-4 w-4" }), label: "Territory", value: territory },
|
|
30
|
-
{ icon: /* @__PURE__ */ jsx(Bot, { className: "h-4 w-4" }), label: "AI &
|
|
39
|
+
{ 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 },
|
|
31
41
|
{ icon: /* @__PURE__ */ jsx(Percent, { className: "h-4 w-4" }), label: "Royalty", value: royalty },
|
|
32
|
-
{ icon: /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4" }), label: "
|
|
42
|
+
{ icon: /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4" }), label: "Registered", value: registration }
|
|
33
43
|
].filter((row) => !!row.value);
|
|
34
|
-
return /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-
|
|
44
|
+
return /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-7", children: [
|
|
35
45
|
hasTemplateData ? /* @__PURE__ */ jsx(IPTypeDisplay, { attributes }) : null,
|
|
36
|
-
hasLicenseData ? /* @__PURE__ */ jsxs("
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
] })
|
|
44
|
-
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-2.5", children: rows.map(({ icon, label, value }) => /* @__PURE__ */ jsxs(
|
|
45
|
-
"div",
|
|
46
|
-
{
|
|
47
|
-
className: "rounded-xl border border-border/50 bg-muted/15 px-3.5 py-3 overflow-hidden transition-colors hover:bg-muted/30",
|
|
48
|
-
children: [
|
|
49
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-1 text-muted-foreground/70", children: [
|
|
50
|
-
icon,
|
|
51
|
-
/* @__PURE__ */ jsx("p", { className: "text-[10px] font-medium uppercase tracking-wider truncate", children: label })
|
|
52
|
-
] }),
|
|
53
|
-
/* @__PURE__ */ jsx("p", { className: "text-sm font-semibold truncate", title: value, children: value })
|
|
54
|
-
]
|
|
55
|
-
},
|
|
56
|
-
label
|
|
57
|
-
)) })
|
|
46
|
+
hasLicenseData ? /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
|
|
47
|
+
/* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Rights" }),
|
|
48
|
+
summary ? /* @__PURE__ */ jsx("p", { className: "text-[15px] font-medium leading-relaxed text-foreground/90", children: summary }) : null,
|
|
49
|
+
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 sm:gap-x-10", children: facts.map(({ icon, label, value }) => /* @__PURE__ */ jsx(FactRow, { icon, label, value }, label)) }),
|
|
50
|
+
/* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 pt-1 text-xs text-muted-foreground/70", children: [
|
|
51
|
+
/* @__PURE__ */ jsx(ShieldCheck, { className: "h-3.5 w-3.5 shrink-0" }),
|
|
52
|
+
"Kept in permanent, tamper-proof storage \xB7 recognized under international copyright law"
|
|
53
|
+
] })
|
|
58
54
|
] }) : null,
|
|
59
|
-
displayAttributes.length > 0 ? /* @__PURE__ */ jsxs("
|
|
60
|
-
/* @__PURE__ */ jsx("
|
|
61
|
-
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-
|
|
62
|
-
|
|
55
|
+
displayAttributes.length > 0 ? /* @__PURE__ */ jsxs("section", { className: "space-y-1", children: [
|
|
56
|
+
/* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Details" }),
|
|
57
|
+
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 sm:gap-x-10", children: displayAttributes.map((attribute, index) => /* @__PURE__ */ jsx(
|
|
58
|
+
FactRow,
|
|
63
59
|
{
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
/* @__PURE__ */ jsx(
|
|
67
|
-
"p",
|
|
68
|
-
{
|
|
69
|
-
className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70 truncate",
|
|
70
|
-
title: attribute.trait_type ?? "Trait",
|
|
71
|
-
children: attribute.trait_type ?? "Trait"
|
|
72
|
-
}
|
|
73
|
-
),
|
|
74
|
-
isAddressLike(attribute.value) ? /* @__PURE__ */ jsx(AddressDisplay, { address: attribute.value, chars: 4, className: "text-sm font-semibold mt-1" }) : /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold mt-1 truncate", title: attribute.value ?? "\u2014", children: attribute.value ?? "\u2014" })
|
|
75
|
-
]
|
|
60
|
+
label: attribute.trait_type ?? "Trait",
|
|
61
|
+
value: isAddressLike(attribute.value) ? /* @__PURE__ */ jsx(AddressDisplay, { address: attribute.value, chars: 4, className: "text-sm font-semibold" }) : attribute.value ?? "\u2014"
|
|
76
62
|
},
|
|
77
63
|
index
|
|
78
64
|
)) })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/asset-overview-content.tsx"],"sourcesContent":["\"use client\";\n\nimport { Bot, Calendar, DollarSign, GitBranch, Globe, Percent, ShieldCheck, UserCheck } from \"lucide-react\";\nimport { IPTypeDisplay } from \"./ip-type-display.js\";\nimport { AddressDisplay } from \"./address-display.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/**\n * Asset Overview tab
|
|
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, ShieldCheck, 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 tidy label → value row: muted label on the left, bold value on the right,\n * hairline divider underneath. Used for both Rights and Details so the whole\n * tab reads like one calm sheet — no grey boxes. */\nfunction FactRow({ icon, label, value }: { icon?: ReactNode; label: string; value: ReactNode }) {\n return (\n <div className=\"flex items-center justify-between gap-4 py-2.5 border-b border-border/40\">\n <span className=\"flex items-center gap-2 text-sm text-muted-foreground min-w-0\">\n {icon ? <span className=\"text-muted-foreground/60 shrink-0\">{icon}</span> : null}\n <span className=\"truncate\">{label}</span>\n </span>\n <span className=\"text-sm font-semibold text-foreground text-right truncate\">{value}</span>\n </div>\n );\n}\n\n/**\n * Asset Overview tab. One calm sheet: an optional IP-type block, a single\n * \"Rights\" summary (plain-language lead line + a scannable fact list + a quiet\n * trust footnote), then a light \"Details\" list. No second license block in the\n * hero, no grey-box bento, no \"protected worldwide\" banner.\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: <ShieldCheck className=\"h-4 w-4\" />, label: \"License\", value: licenseType },\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 {summary ? (\n <p className=\"text-[15px] font-medium leading-relaxed text-foreground/90\">{summary}</p>\n ) : null}\n <div className=\"grid grid-cols-1 sm:grid-cols-2 sm:gap-x-10\">\n {facts.map(({ icon, label, value }) => (\n <FactRow key={label} icon={icon} label={label} value={value} />\n ))}\n </div>\n <p className=\"flex items-center gap-1.5 pt-1 text-xs text-muted-foreground/70\">\n <ShieldCheck className=\"h-3.5 w-3.5 shrink-0\" />\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-1\">\n <h3 className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">Details</h3>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 sm:gap-x-10\">\n {displayAttributes.map((attribute, index) => (\n <FactRow\n key={index}\n label={attribute.trait_type ?? \"Trait\"}\n value={\n isAddressLike(attribute.value) ? (\n <AddressDisplay address={attribute.value!} chars={4} className=\"text-sm font-semibold\" />\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":[]}
|