Skip to main content

Item Detail Components

The Item Detail module renders the full detail page for a single directory item. It is composed of multiple sub-components covering breadcrumbs, metadata, content, comments, CTAs, and SEO schema generation.

Architecture Overview​

Source Files​

FileDescription
item-detail/index.tsBarrel exports
item-detail/item-detail-wrapper.tsxProvider wrapper with decorative backgrounds
item-detail/item-detail.tsxMain two-column detail layout (432 lines)
item-detail/breadcrumb.tsxHome > Category > Item breadcrumb
item-detail/item-content.tsxMDX content renderer with empty-state fallback
item-detail/item-metadata.tsxCategory badge, date, and source URL
item-detail/item-cta-button.tsxPrimary CTA: visit-website, start-survey, or buy
item-detail/comments-section.tsxFull CRUD comments with ratings (516 lines)
item-detail/item-icon.tsxIcon renderer with fallback
item-detail/share-button.tsxSocial sharing button
item-detail/vote-button.tsxUpvote/downvote toggle
item-detail/similar-items-section.tsxRelated items carousel
item-detail/related-tags.tsxTag list sidebar widget
item-detail/rating-display.tsxStar rating display
item-detail/LocationSection.tsxMap embed for geo-located items
item-detail/server-item-content.tsxServer-side content rendering

Core Component: ItemDetail​

The main layout component that arranges all sub-components in a responsive two-column grid.

import { ItemDetailWrapper } from "@/components/item-detail";

<ItemDetailWrapper
  meta={itemData}
  renderedContent={mdxContent}
  categoryName="Productivity"
/>

Props:

PropTypeDescription
metaItemDataFull item data object
renderedContentReactNodePre-rendered MDX content
categoryNamestring?Display name for the item's category

Page Layout​

The detail page uses a two-column layout on desktop:

ColumnContent
Left (main)Breadcrumb, icon, title, video embed, description, CTA, MDX content, location map, surveys, comments
Right (sidebar)Info card, promo code, sponsor ads, categories, tags, similar items

SEO Schema Generation​

ItemDetail generates two JSON-LD schemas injected into the page <head>:

  • Product schema -- name, description, image, url, aggregateRating, offers.
  • BreadcrumbList schema -- Home > Category > Item.

Sub-Components​

ItemBreadcrumb​

Renders a three-level breadcrumb: Home > Category > Item Name. The category link is conditionally shown based on the useCategoriesEnabled hook.

<ItemBreadcrumb
  name="Acme Tool"
  category="productivity"
  categoryName="Productivity"
/>

ItemContent​

Wraps pre-rendered MDX content in a styled container. Shows a friendly empty state when no content is available.

<ItemContent
  content={renderedContent}
  noContentMessage="No detailed description available."
/>

ItemMetadata​

Displays category badge, last-updated date, and an external source URL link.

<ItemMetadata
  category="productivity"
  categoryName="Productivity"
  updatedAt="2024-12-15"
  sourceUrl="https://example.com"
/>

ItemCTAButton​

The primary call-to-action with three action modes:

ActionBehaviour
visit-websiteExternal link to sourceUrl
start-surveyOpens a survey dialog for the item
buyDisabled button with "Coming Soon" label
<ItemCTAButton
  action="visit-website"
  sourceUrl="https://example.com"
  itemSlug="acme-tool"
/>

CommentsSection​

Full-featured comment system with create, edit, delete, and rating. Feature-flag gated via the comments flag.

Key features:

  • Star rating per comment (1-5).
  • Edit and delete with confirmation modal.
  • Login prompt for unauthenticated users.
  • Empty state encouragement message.
  • Optimistic UI updates via React Query mutations.
<CommentsSection itemId="item-123" />

Data Flow​

Integration Notes​

  • ItemDetailWrapper must wrap ItemDetail to inject the SponsorAdsProvider context.
  • The comments section requires SessionProvider and the comments feature flag.
  • Video embeds are conditionally rendered when meta.video_url is present.
  • Location section renders only when the item has coordinates (meta.latitude, meta.longitude).
  • The component tree expects next-intl translations for all user-facing strings.