@medialane/ui 0.94.1 → 0.94.2
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/portfolio-bento-tile.cjs +2 -2
- package/dist/components/portfolio-bento-tile.cjs.map +1 -1
- package/dist/components/portfolio-bento-tile.d.cts +5 -6
- package/dist/components/portfolio-bento-tile.d.ts +5 -6
- package/dist/components/portfolio-bento-tile.js +2 -2
- package/dist/components/portfolio-bento-tile.js.map +1 -1
- package/dist/components/portfolio-overview.cjs +15 -9
- package/dist/components/portfolio-overview.cjs.map +1 -1
- package/dist/components/portfolio-overview.d.cts +12 -5
- package/dist/components/portfolio-overview.d.ts +12 -5
- package/dist/components/portfolio-overview.js +15 -9
- package/dist/components/portfolio-overview.js.map +1 -1
- package/package.json +1 -1
|
@@ -47,8 +47,8 @@ function PortfolioBentoTile({
|
|
|
47
47
|
"section",
|
|
48
48
|
{
|
|
49
49
|
className: (0, import_cn.cn)(
|
|
50
|
-
"rounded-2xl border border-border/50 bg-card/60 min-w-0
|
|
51
|
-
size === "wide" && "
|
|
50
|
+
"rounded-2xl border border-border/50 bg-card/60 min-w-0",
|
|
51
|
+
size === "wide" && "col-span-full",
|
|
52
52
|
className
|
|
53
53
|
),
|
|
54
54
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/portfolio-bento-tile.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioBentoTileProps {\n /** Tile heading, e.g. \"Collections\". */\n title: string;\n /** \"See all\" link target. */\n href: string;\n /**\n * \"wide\"
|
|
1
|
+
{"version":3,"sources":["../../src/components/portfolio-bento-tile.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioBentoTileProps {\n /** Tile heading, e.g. \"Collections\". */\n title: string;\n /** \"See all\" link target. */\n href: string;\n /**\n * \"wide\" spans every grid track (for list-shaped content like Activity).\n * Default sits in one track, sized to its own content — the auto-fit\n * grid stretches it to fill available width when few tiles are present.\n */\n size?: \"wide\" | \"default\";\n children: React.ReactNode;\n className?: string;\n}\n\n/**\n * A single cell on the portfolio landing page: a titled, media-forward\n * preview of one section, expanding into its full subpage via \"See all\".\n * Pure presentation — content is supplied by the caller.\n */\nexport function PortfolioBentoTile({\n title,\n href,\n size = \"default\",\n children,\n className,\n}: PortfolioBentoTileProps) {\n return (\n <section\n className={cn(\n \"rounded-2xl border border-border/50 bg-card/60 min-w-0\",\n size === \"wide\" && \"col-span-full\",\n className,\n )}\n >\n <div className=\"flex items-center justify-between gap-3 px-4 pt-4 pb-3\">\n <h2 className=\"text-[11px] font-semibold uppercase tracking-wider text-muted-foreground\">\n {title}\n </h2>\n <Link\n href={href}\n className=\"inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors\"\n >\n See all\n <ArrowRight className=\"h-3 w-3\" />\n </Link>\n </div>\n <div className=\"px-4 pb-4\">{children}</div>\n </section>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CQ;AAxCR,kBAAiB;AACjB,0BAA2B;AAC3B,gBAAmB;AAsBZ,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,SAAS,UAAU;AAAA,QACnB;AAAA,MACF;AAAA,MAEA;AAAA,qDAAC,SAAI,WAAU,0DACb;AAAA,sDAAC,QAAG,WAAU,4EACX,iBACH;AAAA,UACA;AAAA,YAAC,YAAAA;AAAA,YAAA;AAAA,cACC;AAAA,cACA,WAAU;AAAA,cACX;AAAA;AAAA,gBAEC,4CAAC,kCAAW,WAAU,WAAU;AAAA;AAAA;AAAA,UAClC;AAAA,WACF;AAAA,QACA,4CAAC,SAAI,WAAU,aAAa,UAAS;AAAA;AAAA;AAAA,EACvC;AAEJ;","names":["Link"]}
|
|
@@ -6,18 +6,17 @@ interface PortfolioBentoTileProps {
|
|
|
6
6
|
/** "See all" link target. */
|
|
7
7
|
href: string;
|
|
8
8
|
/**
|
|
9
|
-
* "wide"
|
|
10
|
-
*
|
|
11
|
-
*
|
|
9
|
+
* "wide" spans every grid track (for list-shaped content like Activity).
|
|
10
|
+
* Default sits in one track, sized to its own content — the auto-fit
|
|
11
|
+
* grid stretches it to fill available width when few tiles are present.
|
|
12
12
|
*/
|
|
13
13
|
size?: "wide" | "default";
|
|
14
14
|
children: React.ReactNode;
|
|
15
15
|
className?: string;
|
|
16
16
|
}
|
|
17
17
|
/**
|
|
18
|
-
* A single
|
|
19
|
-
*
|
|
20
|
-
* than a fixed grid track, expanding into its full subpage via "See all".
|
|
18
|
+
* A single cell on the portfolio landing page: a titled, media-forward
|
|
19
|
+
* preview of one section, expanding into its full subpage via "See all".
|
|
21
20
|
* Pure presentation — content is supplied by the caller.
|
|
22
21
|
*/
|
|
23
22
|
declare function PortfolioBentoTile({ title, href, size, children, className, }: PortfolioBentoTileProps): react_jsx_runtime.JSX.Element;
|
|
@@ -6,18 +6,17 @@ interface PortfolioBentoTileProps {
|
|
|
6
6
|
/** "See all" link target. */
|
|
7
7
|
href: string;
|
|
8
8
|
/**
|
|
9
|
-
* "wide"
|
|
10
|
-
*
|
|
11
|
-
*
|
|
9
|
+
* "wide" spans every grid track (for list-shaped content like Activity).
|
|
10
|
+
* Default sits in one track, sized to its own content — the auto-fit
|
|
11
|
+
* grid stretches it to fill available width when few tiles are present.
|
|
12
12
|
*/
|
|
13
13
|
size?: "wide" | "default";
|
|
14
14
|
children: React.ReactNode;
|
|
15
15
|
className?: string;
|
|
16
16
|
}
|
|
17
17
|
/**
|
|
18
|
-
* A single
|
|
19
|
-
*
|
|
20
|
-
* than a fixed grid track, expanding into its full subpage via "See all".
|
|
18
|
+
* A single cell on the portfolio landing page: a titled, media-forward
|
|
19
|
+
* preview of one section, expanding into its full subpage via "See all".
|
|
21
20
|
* Pure presentation — content is supplied by the caller.
|
|
22
21
|
*/
|
|
23
22
|
declare function PortfolioBentoTile({ title, href, size, children, className, }: PortfolioBentoTileProps): react_jsx_runtime.JSX.Element;
|
|
@@ -14,8 +14,8 @@ function PortfolioBentoTile({
|
|
|
14
14
|
"section",
|
|
15
15
|
{
|
|
16
16
|
className: cn(
|
|
17
|
-
"rounded-2xl border border-border/50 bg-card/60 min-w-0
|
|
18
|
-
size === "wide" && "
|
|
17
|
+
"rounded-2xl border border-border/50 bg-card/60 min-w-0",
|
|
18
|
+
size === "wide" && "col-span-full",
|
|
19
19
|
className
|
|
20
20
|
),
|
|
21
21
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/portfolio-bento-tile.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioBentoTileProps {\n /** Tile heading, e.g. \"Collections\". */\n title: string;\n /** \"See all\" link target. */\n href: string;\n /**\n * \"wide\"
|
|
1
|
+
{"version":3,"sources":["../../src/components/portfolio-bento-tile.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioBentoTileProps {\n /** Tile heading, e.g. \"Collections\". */\n title: string;\n /** \"See all\" link target. */\n href: string;\n /**\n * \"wide\" spans every grid track (for list-shaped content like Activity).\n * Default sits in one track, sized to its own content — the auto-fit\n * grid stretches it to fill available width when few tiles are present.\n */\n size?: \"wide\" | \"default\";\n children: React.ReactNode;\n className?: string;\n}\n\n/**\n * A single cell on the portfolio landing page: a titled, media-forward\n * preview of one section, expanding into its full subpage via \"See all\".\n * Pure presentation — content is supplied by the caller.\n */\nexport function PortfolioBentoTile({\n title,\n href,\n size = \"default\",\n children,\n className,\n}: PortfolioBentoTileProps) {\n return (\n <section\n className={cn(\n \"rounded-2xl border border-border/50 bg-card/60 min-w-0\",\n size === \"wide\" && \"col-span-full\",\n className,\n )}\n >\n <div className=\"flex items-center justify-between gap-3 px-4 pt-4 pb-3\">\n <h2 className=\"text-[11px] font-semibold uppercase tracking-wider text-muted-foreground\">\n {title}\n </h2>\n <Link\n href={href}\n className=\"inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors\"\n >\n See all\n <ArrowRight className=\"h-3 w-3\" />\n </Link>\n </div>\n <div className=\"px-4 pb-4\">{children}</div>\n </section>\n );\n}\n"],"mappings":";AA0CQ,cAGA,YAHA;AAxCR,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAsBZ,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,UAAU;AAAA,QACnB;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,0DACb;AAAA,8BAAC,QAAG,WAAU,4EACX,iBACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAU;AAAA,cACX;AAAA;AAAA,gBAEC,oBAAC,cAAW,WAAU,WAAU;AAAA;AAAA;AAAA,UAClC;AAAA,WACF;AAAA,QACA,oBAAC,SAAI,WAAU,aAAa,UAAS;AAAA;AAAA;AAAA,EACvC;AAEJ;","names":[]}
|
|
@@ -35,16 +35,22 @@ function PortfolioOverview({
|
|
|
35
35
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: emptyState });
|
|
36
36
|
}
|
|
37
37
|
const populatedTiles = tiles.filter((t) => !t.isEmpty);
|
|
38
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
39
|
-
|
|
38
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
39
|
+
"div",
|
|
40
40
|
{
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
41
|
+
className: (0, import_cn.cn)("grid gap-4 grid-cols-[repeat(auto-fit,minmax(320px,1fr))]", className),
|
|
42
|
+
children: populatedTiles.map((tile) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
43
|
+
import_portfolio_bento_tile.PortfolioBentoTile,
|
|
44
|
+
{
|
|
45
|
+
title: tile.title,
|
|
46
|
+
href: tile.href,
|
|
47
|
+
size: tile.size,
|
|
48
|
+
children: tile.content
|
|
49
|
+
},
|
|
50
|
+
tile.key
|
|
51
|
+
))
|
|
52
|
+
}
|
|
53
|
+
);
|
|
48
54
|
}
|
|
49
55
|
// Annotate the CommonJS export names for ESM import in node:
|
|
50
56
|
0 && (module.exports = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/portfolio-overview.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport { PortfolioBentoTile, type PortfolioBentoTileProps } from \"./portfolio-bento-tile.js\";\n\nexport interface PortfolioBentoTileConfig {\n key: string;\n title: string;\n href: string;\n size?: PortfolioBentoTileProps[\"size\"];\n /** Tiles with nothing to show are omitted entirely, not rendered empty. */\n isEmpty?: boolean;\n content: React.ReactNode;\n}\n\nexport interface PortfolioOverviewProps {\n tiles: PortfolioBentoTileConfig[];\n /** First-run state across the whole portfolio (zero holdings, zero activity). */\n isEmpty?: boolean;\n emptyState?: React.ReactNode;\n className?: string;\n}\n\n/**\n * Portfolio landing page: a content-first
|
|
1
|
+
{"version":3,"sources":["../../src/components/portfolio-overview.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport { PortfolioBentoTile, type PortfolioBentoTileProps } from \"./portfolio-bento-tile.js\";\n\nexport interface PortfolioBentoTileConfig {\n key: string;\n title: string;\n href: string;\n size?: PortfolioBentoTileProps[\"size\"];\n /** Tiles with nothing to show are omitted entirely, not rendered empty. */\n isEmpty?: boolean;\n content: React.ReactNode;\n}\n\nexport interface PortfolioOverviewProps {\n tiles: PortfolioBentoTileConfig[];\n /** First-run state across the whole portfolio (zero holdings, zero activity). */\n isEmpty?: boolean;\n emptyState?: React.ReactNode;\n className?: string;\n}\n\n/**\n * Portfolio landing page: a content-first dashboard. Each tile is a fast\n * preview of one section, expanding into its full subpage via \"See all\".\n * Navigation across portfolio sections lives one level up, in the shared\n * portfolio chip bar rendered by the app's layout on every page — this\n * component is pure tile layout, nothing else.\n *\n * Uses a CSS grid with `auto-fit` tracks rather than multi-column masonry:\n * masonry's fixed column tracks leave dead blank space when few tiles are\n * populated (a real, reproduced failure mode with sparse content). `auto-fit`\n * collapses empty tracks and stretches present tiles to fill the freed\n * width, so the layout always uses the full screen regardless of how many\n * tiles are populated.\n */\nexport function PortfolioOverview({\n tiles,\n isEmpty,\n emptyState,\n className,\n}: PortfolioOverviewProps) {\n if (isEmpty) {\n return <div className={className}>{emptyState}</div>;\n }\n\n const populatedTiles = tiles.filter((t) => !t.isEmpty);\n\n return (\n <div\n className={cn(\"grid gap-4 grid-cols-[repeat(auto-fit,minmax(320px,1fr))]\", className)}\n >\n {populatedTiles.map((tile) => (\n <PortfolioBentoTile\n key={tile.key}\n title={tile.title}\n href={tile.href}\n size={tile.size}\n >\n {tile.content}\n </PortfolioBentoTile>\n ))}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CW;AA1CX,gBAAmB;AACnB,kCAAiE;AAkC1D,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,MAAI,SAAS;AACX,WAAO,4CAAC,SAAI,WAAuB,sBAAW;AAAA,EAChD;AAEA,QAAM,iBAAiB,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,cAAG,6DAA6D,SAAS;AAAA,MAEnF,yBAAe,IAAI,CAAC,SACnB;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,KAAK;AAAA,UACZ,MAAM,KAAK;AAAA,UACX,MAAM,KAAK;AAAA,UAEV,eAAK;AAAA;AAAA,QALD,KAAK;AAAA,MAMZ,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}
|
|
@@ -18,11 +18,18 @@ interface PortfolioOverviewProps {
|
|
|
18
18
|
className?: string;
|
|
19
19
|
}
|
|
20
20
|
/**
|
|
21
|
-
* Portfolio landing page: a content-first
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
21
|
+
* Portfolio landing page: a content-first dashboard. Each tile is a fast
|
|
22
|
+
* preview of one section, expanding into its full subpage via "See all".
|
|
23
|
+
* Navigation across portfolio sections lives one level up, in the shared
|
|
24
|
+
* portfolio chip bar rendered by the app's layout on every page — this
|
|
25
|
+
* component is pure tile layout, nothing else.
|
|
26
|
+
*
|
|
27
|
+
* Uses a CSS grid with `auto-fit` tracks rather than multi-column masonry:
|
|
28
|
+
* masonry's fixed column tracks leave dead blank space when few tiles are
|
|
29
|
+
* populated (a real, reproduced failure mode with sparse content). `auto-fit`
|
|
30
|
+
* collapses empty tracks and stretches present tiles to fill the freed
|
|
31
|
+
* width, so the layout always uses the full screen regardless of how many
|
|
32
|
+
* tiles are populated.
|
|
26
33
|
*/
|
|
27
34
|
declare function PortfolioOverview({ tiles, isEmpty, emptyState, className, }: PortfolioOverviewProps): react_jsx_runtime.JSX.Element;
|
|
28
35
|
|
|
@@ -18,11 +18,18 @@ interface PortfolioOverviewProps {
|
|
|
18
18
|
className?: string;
|
|
19
19
|
}
|
|
20
20
|
/**
|
|
21
|
-
* Portfolio landing page: a content-first
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
21
|
+
* Portfolio landing page: a content-first dashboard. Each tile is a fast
|
|
22
|
+
* preview of one section, expanding into its full subpage via "See all".
|
|
23
|
+
* Navigation across portfolio sections lives one level up, in the shared
|
|
24
|
+
* portfolio chip bar rendered by the app's layout on every page — this
|
|
25
|
+
* component is pure tile layout, nothing else.
|
|
26
|
+
*
|
|
27
|
+
* Uses a CSS grid with `auto-fit` tracks rather than multi-column masonry:
|
|
28
|
+
* masonry's fixed column tracks leave dead blank space when few tiles are
|
|
29
|
+
* populated (a real, reproduced failure mode with sparse content). `auto-fit`
|
|
30
|
+
* collapses empty tracks and stretches present tiles to fill the freed
|
|
31
|
+
* width, so the layout always uses the full screen regardless of how many
|
|
32
|
+
* tiles are populated.
|
|
26
33
|
*/
|
|
27
34
|
declare function PortfolioOverview({ tiles, isEmpty, emptyState, className, }: PortfolioOverviewProps): react_jsx_runtime.JSX.Element;
|
|
28
35
|
|
|
@@ -12,16 +12,22 @@ function PortfolioOverview({
|
|
|
12
12
|
return /* @__PURE__ */ jsx("div", { className, children: emptyState });
|
|
13
13
|
}
|
|
14
14
|
const populatedTiles = tiles.filter((t) => !t.isEmpty);
|
|
15
|
-
return /* @__PURE__ */ jsx(
|
|
16
|
-
|
|
15
|
+
return /* @__PURE__ */ jsx(
|
|
16
|
+
"div",
|
|
17
17
|
{
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
18
|
+
className: cn("grid gap-4 grid-cols-[repeat(auto-fit,minmax(320px,1fr))]", className),
|
|
19
|
+
children: populatedTiles.map((tile) => /* @__PURE__ */ jsx(
|
|
20
|
+
PortfolioBentoTile,
|
|
21
|
+
{
|
|
22
|
+
title: tile.title,
|
|
23
|
+
href: tile.href,
|
|
24
|
+
size: tile.size,
|
|
25
|
+
children: tile.content
|
|
26
|
+
},
|
|
27
|
+
tile.key
|
|
28
|
+
))
|
|
29
|
+
}
|
|
30
|
+
);
|
|
25
31
|
}
|
|
26
32
|
export {
|
|
27
33
|
PortfolioOverview
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/portfolio-overview.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport { PortfolioBentoTile, type PortfolioBentoTileProps } from \"./portfolio-bento-tile.js\";\n\nexport interface PortfolioBentoTileConfig {\n key: string;\n title: string;\n href: string;\n size?: PortfolioBentoTileProps[\"size\"];\n /** Tiles with nothing to show are omitted entirely, not rendered empty. */\n isEmpty?: boolean;\n content: React.ReactNode;\n}\n\nexport interface PortfolioOverviewProps {\n tiles: PortfolioBentoTileConfig[];\n /** First-run state across the whole portfolio (zero holdings, zero activity). */\n isEmpty?: boolean;\n emptyState?: React.ReactNode;\n className?: string;\n}\n\n/**\n * Portfolio landing page: a content-first
|
|
1
|
+
{"version":3,"sources":["../../src/components/portfolio-overview.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport { PortfolioBentoTile, type PortfolioBentoTileProps } from \"./portfolio-bento-tile.js\";\n\nexport interface PortfolioBentoTileConfig {\n key: string;\n title: string;\n href: string;\n size?: PortfolioBentoTileProps[\"size\"];\n /** Tiles with nothing to show are omitted entirely, not rendered empty. */\n isEmpty?: boolean;\n content: React.ReactNode;\n}\n\nexport interface PortfolioOverviewProps {\n tiles: PortfolioBentoTileConfig[];\n /** First-run state across the whole portfolio (zero holdings, zero activity). */\n isEmpty?: boolean;\n emptyState?: React.ReactNode;\n className?: string;\n}\n\n/**\n * Portfolio landing page: a content-first dashboard. Each tile is a fast\n * preview of one section, expanding into its full subpage via \"See all\".\n * Navigation across portfolio sections lives one level up, in the shared\n * portfolio chip bar rendered by the app's layout on every page — this\n * component is pure tile layout, nothing else.\n *\n * Uses a CSS grid with `auto-fit` tracks rather than multi-column masonry:\n * masonry's fixed column tracks leave dead blank space when few tiles are\n * populated (a real, reproduced failure mode with sparse content). `auto-fit`\n * collapses empty tracks and stretches present tiles to fill the freed\n * width, so the layout always uses the full screen regardless of how many\n * tiles are populated.\n */\nexport function PortfolioOverview({\n tiles,\n isEmpty,\n emptyState,\n className,\n}: PortfolioOverviewProps) {\n if (isEmpty) {\n return <div className={className}>{emptyState}</div>;\n }\n\n const populatedTiles = tiles.filter((t) => !t.isEmpty);\n\n return (\n <div\n className={cn(\"grid gap-4 grid-cols-[repeat(auto-fit,minmax(320px,1fr))]\", className)}\n >\n {populatedTiles.map((tile) => (\n <PortfolioBentoTile\n key={tile.key}\n title={tile.title}\n href={tile.href}\n size={tile.size}\n >\n {tile.content}\n </PortfolioBentoTile>\n ))}\n </div>\n );\n}\n"],"mappings":";AA4CW;AA1CX,SAAS,UAAU;AACnB,SAAS,0BAAwD;AAkC1D,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,MAAI,SAAS;AACX,WAAO,oBAAC,SAAI,WAAuB,sBAAW;AAAA,EAChD;AAEA,QAAM,iBAAiB,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,6DAA6D,SAAS;AAAA,MAEnF,yBAAe,IAAI,CAAC,SACnB;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,KAAK;AAAA,UACZ,MAAM,KAAK;AAAA,UACX,MAAM,KAAK;AAAA,UAEV,eAAK;AAAA;AAAA,QALD,KAAK;AAAA,MAMZ,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}
|