4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:Taaa,import * as React from "react"; import type { Product } from "@channel3/sdk/resources"; import { cn } from "@/lib/utils"; interface Attribute { label: string; value: string; } const unique = (values: T[]): T[] => Array.from(new Set(values)); const humanizeKey = (key: string) => key .replace(/[_-]+/g, " ") .trim() .replace(/\b\w/g, (char) => char.toUpperCase()); const titleCase = (value: string) => value.charAt(0).toUpperCase() + value.slice(1); /** * Flattens a product's extracted attributes into a deduplicated list of * label/value rows: `category`, then each `structured_attributes` entry, * `materials`, `gender`, and `age`. A `material(s)` structured entry is dropped * when the richer `materials` array is present so the same fact isn't shown * twice. */ function buildAttributes(product: Product): Attribute[] { const rows: Attribute[] = []; if (product.category?.title) { rows.push({ label: "Category", value: product.category.title }); } const materials = unique((product.materials ?? []).map((value) => value.trim()).filter(Boolean)); const hasMaterials = materials.length > 0; for (const [key, values] of Object.entries(product.structured_attributes ?? {})) { const normalized = key.replace(/[_-]+/g, "").toLowerCase(); if (hasMaterials && (normalized === "material" || normalized === "materials")) { continue; } const cleaned = unique((values ?? []).map((value) => String(value).trim()).filter(Boolean)); if (cleaned.length === 0) { continue; } rows.push({ label: humanizeKey(key), value: cleaned.join(", ") }); } if (hasMaterials) { rows.push({ label: materials.length > 1 ? "Materials" : "Material", value: materials.join(", "), }); } if (product.gender) { rows.push({ label: "Gender", value: titleCase(product.gender) }); } if (product.age) { rows.push({ label: "Age", value: titleCase(product.age) }); } return rows; } export interface ProductAttributesProps extends React.ComponentProps<"dl"> { product: Product; } export function ProductAttributes({ product, className, ...props }: ProductAttributesProps) { const attributes = buildAttributes(product); if (attributes.length === 0) { return null; } return (

{label}: {value}

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@channel3/sdk",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40channel3%2Fsdk","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@channel3/sdk"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://ui.trychannel3.com/r/product-attributes.json","proxyUrl":"https://shadcnregistry.com/r/channel3/product-attributes","itemId":"@channel3/product-attributes"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/default/components/product-attributes.tsx","content":"$52","type":"registry:component"}]}]]}],"$L53"]}]

Product Attributes

Installation

Files

components

Styles