"use client"; import { useI18n } from "next-localization"; import { DescriptionDetails, DescriptionList, DescriptionSeparator, DescriptionTerm, } from "@/components/registry/primitives/core/description-list"; import { TypographyMuted, TypographySmall, } from "@/components/registry/primitives/core/typography"; import { getSourceText } from "@/components/registry/primitives/editables/source-normalizers"; import type { Product } from "@/lib/registry/models/product.model"; function isEmptyValue(value: unknown): boolean { if (value == null) return true; if (typeof value === "object" && "value" in value) return (value as { value?: unknown }).value == null; if (typeof value === "string") return (value as string).trim() === ""; return false; } interface ProductMetaDetailsProps { product: Product; } export const ProductMetaDetails = ({ product }: ProductMetaDetailsProps) => { const { t } = useI18n(); const hasSku = product?.SKU && !isEmptyValue(product.SKU); const skuText = getSourceText(product.SKU); const categoryText = getSourceText(product.Category?.fields?.CategoryName); return ( {t("product_sku_label") || "SKU"} : {hasSku && skuText ? ( skuText ) : ( SKU )} {categoryText && ( <> {t("product_category_label") || "Category"} : {categoryText} )} {Array.isArray(product?.Tags) && product.Tags.length > 0 && ( <> {t("product_tags_label") || "Tags"} : {product.Tags.map((tag, i) => ( {i > 0 && ", "} {getSourceText(tag.fields.Tag) ?? "Tag"} ))} )} ); };

Product Meta Details

Showcase

Product Meta Details