2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T25ca,import type { ReactNode } from "react"; import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import type { Collection, Product } from "../../../lib/commerce/types"; import { collectionHref, imageSize, imageSrcSet, primaryImage } from "../_shared/product-utils"; export type CollectionTilesVariant = "grid" | "chips" | "oversized-type" | "window" | "compact"; const grid = cva("", { variants: { variant: { grid: "grid grid-cols-2 gap-x-3 gap-y-6 sm:gap-x-4 md:grid-cols-3", chips: "flex flex-wrap gap-2", "oversized-type": "grid grid-cols-1 gap-3 md:grid-cols-2", compact: "flex snap-x gap-3 overflow-x-auto pb-1 [scrollbar-width:none] md:grid md:grid-cols-5 md:overflow-visible", window: "grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-5", }, }, }); export type CollectionTilesProps = { collections: Collection[]; /** Products the collections point at (handles in `collection.products`). The first one lends its image. */ products: Product[]; variant?: CollectionTilesVariant; /** Link builder. Defaults to `/collections/`. */ getHref?: (collection: Collection) => string; /** Label for the item count. */ countLabel?: (count: number) => string; /** Brand metadata under each tile label (receives the first product, the collection and all its products). Not interactive. */ renderMeta?: (product: Product, collection: Collection, members: Product[]) => ReactNode; className?: string; }; const defaultCount = (n: number) => `${n} ${n === 1 ? "item" : "items"}`; /** One tile per collection: the first product's image, the label and a count. */ export function CollectionTiles({ collections, products, variant = "grid", getHref = collectionHref, countLabel = defaultCount, renderMeta, className, }: CollectionTilesProps) { const byHandle = new Map(products.map((p) => [p.handle, p])); const tiles = collections .map((collection) => { const members = collection.products.map((h) => byHandle.get(h)).filter((p): p is Product => Boolean(p)); return { collection, members, lead: members[0] }; }) .filter((t) => t.members.length > 0); if (tiles.length === 0) return null; return (

{collection.title} {members.length}

{renderMeta(lead, collection, members)}

{collection.title} {members.length} {meta}
{collection.handle} {members.length} {collection.title} , {count} {meta}
{/* mix-blend-difference with white reads on both light and dark garment art. */} {collection.title} {count} {collection.blurb}
{collection.title} {count} {meta}

); } export default CollectionTiles; 32:Tb33,import type { Collection, Product, ProductImage } from "../../../lib/commerce/types"; import type { ProductBadgeKind } from "../../ui/product-badge/product-badge"; /** Kobra house curves, written out so Tailwind sees the full class names. */ export const EASE_OUT = "ease-[cubic-bezier(0.23,1,0.32,1)]"; export const EASE_EXIT = "ease-[cubic-bezier(0.4,0,0.6,1)]"; export const FOCUS_RING = "outline-none focus-visible:ring-3 focus-visible:ring-ring/50"; export const productHref = (product: Product) => `/products/${product.handle}`; export const collectionHref = (collection: Collection) => `/collections/${collection.handle}`; export function isSoldOut(product: Product): boolean { return product.variants.length > 0 && product.variants.every((v) => !v.available); } const BLANK = "data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'/%3E"; /** Featured image, else the first image, else a transparent placeholder so a product with no art still lays out (the well shows). */ export function primaryImage(product: Product): ProductImage { return product.featuredImage ?? product.images?.[0] ?? { src: BLANK, alt: product.title, width: 1200, height: 1200, hasArt: false }; } /** Second image for hover swaps and gallery insets: skips blank (hasArt === false) and same-view images. */ export function secondaryImage(product: Product, images: ProductImage[] = product.images): ProductImage | undefined { const first = images[0] ?? primaryImage(product); const pool = images.filter((i) => i.src !== first.src && i.hasArt !== false && (i.view ?? "front") !== (first.view ?? "front")); return ( pool.find((i) => i.view === "back") ?? pool.find((i) => i.view === "lifestyle") ?? pool[0] ); } /** Image shown on hover: the first art-bearing image of another view, else no swap. */ export function hoverImage(product: Product): ProductImage | undefined { return secondaryImage(product, [primaryImage(product), ...product.images]); } export function imageSize(image: ProductImage): { width: number; height: number } { return { width: image.width ?? 1200, height: image.height ?? 1200 }; } /** 600w twin + full size when both exist. */ export function imageSrcSet(image: ProductImage): string | undefined { return image.thumb && image.thumb !== image.src ? `${image.thumb} 600w, ${image.src} 1200w` : undefined; } export function hasBackPrint(product: Product): boolean { return product.images.some((i) => i.view === "back"); } export function badgeKindFor(product: Product): ProductBadgeKind | undefined { if (isSoldOut(product)) return "sold-out"; if (product.tags.includes("new")) return "new"; if (hasBackPrint(product)) return "back-print"; return undefined; } export const hasPriceRange = (product: Product) => product.priceRange.min.amount !== product.priceRange.max.amount; 33:T429,import { CollectionTiles } from "./collection-tiles"; import { DemoPage, DemoSection } from "../_shared/demo-frame"; import { productFixture } from "../../../lib/commerce/fixtures/product"; export function CollectionTilesDemo({ brand }: { brand?: string }) { const fx = productFixture(brand); return ( ); } export default CollectionTilesDemo; 34:T52d,import type { BlockMeta } from "../../../lib/block-meta"; export const collectionTilesMeta: BlockMeta = { slug: "collection-tiles", title: "Collection tiles", description: "One tile per collection with the first product's image, label and count. Grid, row of chips (the shop-by chips) and oversized type over the image.", group: "product", kobraDeps: [], files: [ "blocks/product/collection-tiles/collection-tiles.tsx", "blocks/product/_shared/product-utils.ts", ], props: [ { name: "collections", type: "Collection[]", description: "Collections to tile." }, { name: "products", type: "Product[]", description: "Products referenced by the collections; the first lends its image." }, { name: "variant", type: "'grid' | 'chips' | 'oversized-type' | 'window' | 'compact'", default: "'grid'", description: "Layout." }, { name: "getHref", type: "(collection: Collection) => string", default: "`/collections/${handle}`", description: "Link builder." }, { name: "countLabel", type: "(count: number) => string", description: "Count wording." }, { name: "renderMeta", type: "(first: Product, collection: Collection, members: Product[]) => ReactNode", description: "Brand metadata under each tile label." }, ], tags: ["collection", "navigation", "tiles"], status: "ready", }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#product","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Product"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Collection tiles"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Collection tiles"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"One tile per collection with the first product's image, label and count. Grid, row of chips (the shop-by chips) and oversized type over the image."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"collection-tiles","group":"product","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/product/collection-tiles/collection-tiles.tsx","code":"$31"},{"path":"blocks/product/_shared/product-utils.ts","code":"$32"},{"path":"blocks/product/collection-tiles/demo.tsx","code":"$33"},{"path":"blocks/product/collection-tiles/meta.ts","code":"$34"}]}],"props":"$L35"}],"$L36"]}]