# Parts: ProductSharePanel to ReviewCard (/themes/sdk/reference/product/parts-3)

```ts
import { … } from '@poltura/theme-sdk/product';
```

## `ProductSharePanel` [#productsharepanel]

A share dialog with copy-link, email, WhatsApp, Facebook, X and the device's own share sheet.

```ts
ProductSharePanel(props: ProductSharePanelProps): ReactElement
```

**Props:** [`ProductSharePanelProps`](/themes/sdk/reference/product/types-7#productsharepanelprops)

**Example**

```tsx
import { useState } from 'react';
import { ProductSharePanel, useNearestProduct } from '@poltura/theme-sdk/product';

export function Share() {
  const product = useNearestProduct();
  const [open, setOpen] = useState(false);
  if (product === null) return null;
  return (
    <>
      <button type='button' onClick={() => setOpen(true)}>Share</button>
      <ProductSharePanel open={open} onOpenChange={setOpen} title={product.title} url={product.href} />
    </>
  );
}
```

## `ProductSpecs` [#productspecs]

The specification table: a titled section per group with a row of name and value each; nothing without rows.

```ts
ProductSpecs(props: ProductSpecsProps): ReactElement | null
```

**Props:** [`ProductSpecsProps`](/themes/sdk/reference/product/types-7#productspecsprops)

**Example**

```tsx
import { ProductSpecs, useNearestProduct } from '@poltura/theme-sdk/product';

export function Specifications() {
  const product = useNearestProduct();
  return product === null ? null : <ProductSpecs groups={product.specs} />;
}
```

## `SpecValueLabel` [#specvaluelabel]

One attribute value as the shopper reads it: its icon or logo beside the text.

```ts
SpecValueLabel(props: SpecValueLabelProps): ReactElement
```

**Props:** [`SpecValueLabelProps`](/themes/sdk/reference/product/types-7#specvaluelabelprops)

**Example**

```tsx
import { SpecValueLabel, useProductPage } from '@poltura/theme-sdk/product';

export function FirstPlatform() {
  const [first] = useProductPage().keySpecs;
  const value = first?.items[0];
  return value === undefined ? null : <SpecValueLabel value={value} />;
}
```

**See also:** [`SpecValues`](/themes/sdk/reference/product/parts-3#specvalues)

## `SpecValues` [#specvalues]

All values of one attribute, each with its icon, side by side and wrapping; nothing for an attribute without values.

```ts
SpecValues(props: SpecValuesProps): ReactElement | null
```

**Props:** [`SpecValuesProps`](/themes/sdk/reference/product/types-7#specvaluesprops)

**Example**

```tsx
import { SpecValues, useProductPage } from '@poltura/theme-sdk/product';

export function FirstSpec() {
  const [spec] = useProductPage().keySpecs;
  return spec === undefined ? null : <SpecValues spec={spec} />;
}
```

**See also:** [`SpecValueLabel`](/themes/sdk/reference/product/parts-3#specvaluelabel)

## `ProductTableLink` [#producttablelink]

A link opening a table sheet: at the side, or from the bottom on phones.

```ts
ProductTableLink(props: ProductTableLinkProps): ReactElement
```

A table that selects variants lets the shopper tap a row and pick that option value from the sheet.

**Props:** [`ProductTableLinkProps`](/themes/sdk/reference/product/types-7#producttablelinkprops)

**Example**

```tsx
import { ProductTableLink, useProductTables } from '@poltura/theme-sdk/product';

export function SizeGuide() {
  const [table] = useProductTables('link');
  return table === undefined ? null : <ProductTableLink table={table} />;
}
```

## `ProductTableView` [#producttableview]

One product table in place: its intro, the unit switch, the table and the measuring guide; the chosen variant's row is highlighted.

```ts
ProductTableView(props: ProductTableViewProps): ReactElement
```

Values print in the shopper's language and, when the table has a unit switch, in the unit system of their market until they flip it; the flip is remembered for the visit.

**Props:** [`ProductTableViewProps`](/themes/sdk/reference/product/types-7#producttableviewprops)

**Example**

```tsx
import { ProductTableView, useProductTables } from '@poltura/theme-sdk/product';

export function SizeChart() {
  const [table] = useProductTables('tab');
  return table === undefined ? null : <ProductTableView table={table} />;
}
```

## `ProductTabContent` [#producttabcontent]

One tab's content. The description with its keywords, the specification table, the guides and downloads, the warranty, the merchant's text or a product table.

```ts
ProductTabContent(props: ProductTabContentProps): ReactElement | null
```

**Props:** [`ProductTabContentProps`](/themes/sdk/reference/product/types-7#producttabcontentprops)

**Example**

```tsx
import { ProductTabContent, useProductTabs } from '@poltura/theme-sdk/product';

export function FirstTab() {
  const [tab] = useProductTabs();
  return tab === undefined ? null : <ProductTabContent tab={tab} />;
}
```

**See also:** [`useProductTabs`](/themes/sdk/reference/product/hooks-2#useproducttabs)

## `ProductTrustBadge` [#producttrustbadge]

The trust badge an installed review app draws on the product page, such as the store's rating with that app; nothing when no app offers one.

```ts
ProductTrustBadge(): ReactElement | null
```

**Example**

```tsx
import { ProductTrustBadge } from '@poltura/theme-sdk/product';

export function Badges() {
  return (
    <div className='flex items-center gap-3'>
      <ProductTrustBadge />
    </div>
  );
}
```

## `RatingStars` [#ratingstars]

Five stars with as many filled as the rating rounds to.

```ts
RatingStars(props: RatingStarsProps): ReactElement
```

**Props:** [`RatingStarsProps`](/themes/sdk/reference/product/types-7#ratingstarsprops)

**Example**

```tsx
import { RatingStars, type Product } from '@poltura/theme-sdk/product';

export function CardRating({ product }: { product: Product }) {
  return product.rating === null ? null : <RatingStars rating={product.rating.average} />;
}
```

## `RatingSummary` [#ratingsummary]

The average rating large, with the stars and a bar per star rating showing how many reviews gave it.

```ts
RatingSummary(props: RatingSummaryProps): ReactElement
```

**Props:** [`RatingSummaryProps`](/themes/sdk/reference/product/types-7#ratingsummaryprops)

**Example**

```tsx
import { RatingSummary, useReviews } from '@poltura/theme-sdk/product';

export function Score({ productId }: { productId: string }) {
  const { data } = useReviews({ productId });
  return data === undefined || data.stats.count === 0 ? null : (
    <RatingSummary stats={data.stats} policy={data.policy} />
  );
}
```

## `ReviewCard` [#reviewcard]

One review: the reviewer's shortened name and initials, the verified badge, the date, the stars, the title and the text.

```ts
ReviewCard(props: ReviewCardProps): ReactElement
```

**Props:** [`ReviewCardProps`](/themes/sdk/reference/product/types-7#reviewcardprops)

**Example**

```tsx
import { ReviewCard, useReviews } from '@poltura/theme-sdk/product';

export function ReviewList({ productId }: { productId: string }) {
  const { data } = useReviews({ productId });
  return <div>{data?.reviews.map((review) => <ReviewCard key={review.id} review={review} />)}</div>;
}
```