> ## Documentation Index
> Fetch the complete documentation index at: https://docs.everybite.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Displaying Results

> Best practices for displaying search results and nutrition information

This guide covers best practices for displaying SmartMenu search results, match badges, and nutrition information in your UI.

## Match Groups

Search results are grouped into three categories based on how well dishes match the guest's preferences.

### Match Status Overview

| Status         | Badge       | Color         | When to Show     |
| -------------- | ----------- | ------------- | ---------------- |
| `MATCH`        | Match       | Green         | Always prominent |
| `ALMOST_MATCH` | Almost      | Yellow/Orange | With warnings    |
| `NOT_MATCH`    | Not a Match | Grey          | Optional, dimmed |

### Visual Hierarchy

```mermaid theme={null}
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#2563EB', 'primaryTextColor': '#fff', 'primaryBorderColor': '#1D4ED8', 'lineColor': '#64748b'}}}%%
block-beta
    columns 3

    block:matches:3
        columns 3
        matchHeader["8 Matches"]:3
        dish1["Garden Salad<br/>✓ Match"]
        dish2["Med Bowl<br/>✓ Match"]
        dish3["Veggie Wrap<br/>✓ Match"]
    end

    block:almost:3
        columns 1
        almostHeader["4 Almost Matches"]:1
        dish4["Caesar Salad — ⚠ Almost<br/>⚠ Contains Dairy"]:1
    end

    block:notmatch:3
        columns 1
        notHeader["12 Not a Match (collapsed)"]:1
    end

    style matchHeader fill:#d1fae5,color:#065f46,stroke:#065f46
    style dish1 fill:#d1fae5,color:#065f46,stroke:#10b981
    style dish2 fill:#d1fae5,color:#065f46,stroke:#10b981
    style dish3 fill:#d1fae5,color:#065f46,stroke:#10b981
    style almostHeader fill:#fef3c7,color:#92400e,stroke:#92400e
    style dish4 fill:#fef3c7,color:#92400e,stroke:#f59e0b
    style notHeader fill:#f3f4f6,color:#6b7280,stroke:#6b7280
```

## Match Badges

### Badge Components

```jsx theme={null}
function MatchBadge({ status }) {
  const config = {
    MATCH: { label: 'Match', color: 'green', icon: '✓' },
    ALMOST_MATCH: { label: 'Almost', color: 'yellow', icon: '⚠' },
    NOT_MATCH: { label: 'Not a Match', color: 'grey', icon: '✗' }
  };

  const { label, color, icon } = config[status];

  return (
    <span className={`badge badge-${color}`}>
      {icon} {label}
    </span>
  );
}
```

### CSS Styling

```css theme={null}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.badge-green {
  background: #d1fae5;
  color: #065f46;
}

.badge-yellow {
  background: #fef3c7;
  color: #92400e;
}

.badge-grey {
  background: #f3f4f6;
  color: #6b7280;
}
```

## Match Reasons

For `ALMOST_MATCH` and `NOT_MATCH` dishes, always display the reasons:

```jsx theme={null}
function DishCard({ dish, matchStatus, matchReasons }) {
  return (
    <div className={`dish-card ${matchStatus.toLowerCase()}`}>
      <img src={dish.imageUrl} alt={dish.name} />
      <h3>{dish.name}</h3>
      <MatchBadge status={matchStatus} />

      {matchReasons && matchReasons.length > 0 && (
        <div className="match-reasons">
          {matchReasons.map((reason, i) => (
            <span key={i} className="reason">⚠ {reason}</span>
          ))}
        </div>
      )}

      <div className="nutrition-summary">
        {dish.nutrition.calories} cal
      </div>
    </div>
  );
}
```

## Compact Dish View

For list layouts, show key information inline:

```mermaid theme={null}
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#2563EB', 'primaryTextColor': '#334155', 'primaryBorderColor': '#e2e8f0'}}}%%
block-beta
    columns 5

    img["🖼"]:1
    block:info:3
        columns 1
        title["<strong>Seasonal Harvest Salad</strong> — ✓ Match"]
        meta["400 cal • 25g protein • Vegetarian"]
        allergens["Contains: Dairy, Tree Nut"]
    end
    btn["Order →"]:1

    style img fill:#f1f5f9,stroke:#e2e8f0,color:#64748b
    style title fill:#fff,stroke:#fff,color:#1e293b
    style meta fill:#fff,stroke:#fff,color:#64748b
    style allergens fill:#fff,stroke:#fff,color:#dc2626
    style btn fill:#2563EB,stroke:#1D4ED8,color:#fff
```

```jsx theme={null}
function DishListItem({ dish, matchStatus }) {
  return (
    <div className="dish-list-item">
      <img src={dish.imageUrl} alt={dish.name} />
      <div className="dish-info">
        <div className="dish-header">
          <h3>{dish.name}</h3>
          <MatchBadge status={matchStatus} />
        </div>
        <div className="dish-meta">
          {dish.nutrition.calories} cal • {dish.nutrition.protein}g protein
          {dish.diets.map(d => <span key={d.type}> • {d.displayName}</span>)}
        </div>
        {dish.allergens.length > 0 && (
          <div className="allergens">
            Contains: {dish.allergens.map(a => a.displayName).join(', ')}
          </div>
        )}
      </div>
      <button className="order-btn">Order</button>
    </div>
  );
}
```

## Nutrition Panel

### Full Nutrition Facts

Display the complete nutrition panel in dish detail views:

```mermaid theme={null}
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#1e293b', 'primaryTextColor': '#1e293b', 'primaryBorderColor': '#1e293b'}}}%%
block-beta
    columns 2

    block:header:2
        columns 1
        h1["<strong>Nutrition Facts</strong>"]
        h2["Serving Size: 1 bowl (340g)"]
    end

    block:calories:2
        cal["<strong>Calories</strong>          <strong>400</strong>"]
    end

    block:nutrients:2
        columns 2
        f1["Total Fat"]:1
        f1v["18g"]:1
        f2["  Saturated Fat"]:1
        f2v["6g"]:1
        f3["  Trans Fat"]:1
        f3v["0g"]:1
        f4["Cholesterol"]:1
        f4v["45mg"]:1
        f5["Sodium"]:1
        f5v["520mg"]:1
        f6["Total Carbs"]:1
        f6v["35g"]:1
        f7["  Dietary Fiber"]:1
        f7v["8g"]:1
        f8["  Sugars"]:1
        f8v["12g"]:1
        f9["Protein"]:1
        f9v["25g"]:1
    end

    block:vitamins:2
        columns 4
        v1["Vitamin A"]:1
        v1v["120%"]:1
        v2["Calcium"]:1
        v2v["15%"]:1
        v3["Vitamin C"]:1
        v3v["45%"]:1
        v4["Iron"]:1
        v4v["20%"]:1
    end

    style h1 fill:#1e293b,color:#fff,stroke:#1e293b
    style h2 fill:#fff,color:#1e293b,stroke:#1e293b
    style cal fill:#fff,color:#1e293b,stroke:#1e293b
```

```jsx theme={null}
function NutritionPanel({ nutrition }) {
  return (
    <div className="nutrition-panel">
      <h4>Nutrition Facts</h4>

      <NutritionRow label="Calories" value={nutrition.calories} bold />

      <div className="divider" />

      <NutritionRow label="Total Fat" value={`${nutrition.fatTotal}g`} bold />
      <NutritionRow label="Saturated Fat" value={`${nutrition.fatSaturated}g`} indent />
      <NutritionRow label="Trans Fat" value={`${nutrition.fatTrans}g`} indent />
      <NutritionRow label="Cholesterol" value={`${nutrition.cholesterol}mg`} bold />
      <NutritionRow label="Sodium" value={`${nutrition.sodium}mg`} bold />
      <NutritionRow label="Total Carbohydrates" value={`${nutrition.carbohydrates}g`} bold />
      <NutritionRow label="Dietary Fiber" value={`${nutrition.dietaryFiber}g`} indent />
      <NutritionRow label="Sugars" value={`${nutrition.sugar}g`} indent />
      <NutritionRow label="Protein" value={`${nutrition.protein}g`} bold />
    </div>
  );
}
```

## Allergen Badges

<Warning>
  Allergen information is critical for guest safety. Make allergen badges highly visible and never hide them.
</Warning>

```jsx theme={null}
function AllergenBadges({ allergens }) {
  const icons = {
    DAIRY: '🥛',
    EGG: '🥚',
    FISH: '🐟',
    SHELLFISH: '🦐',
    TREE_NUT: '🌰',
    PEANUT: '🥜',
    WHEAT: '🌾',
    SOY: '🫛',
    SESAME: '⚪'
  };

  return (
    <div className="allergen-badges" role="alert">
      <span className="allergen-label">Contains:</span>
      {allergens.map(allergen => (
        <span key={allergen.type} className="allergen-badge" title={allergen.source}>
          {icons[allergen.type]} {allergen.displayName}
        </span>
      ))}
    </div>
  );
}
```

## Diet Tags

```jsx theme={null}
function DietTags({ diets }) {
  return (
    <div className="diet-tags">
      {diets.map(diet => (
        <span key={diet.type} className="diet-tag">
          {diet.displayName}
        </span>
      ))}
    </div>
  );
}
```

## Empty States

Handle cases where no dishes match:

```jsx theme={null}
function EmptyMatchesState({ preferences }) {
  return (
    <div className="empty-state">
      <h3>No exact matches found</h3>
      <p>
        We couldn't find dishes that match all your preferences.
        Try adjusting your filters or check out the "Almost Matches" below.
      </p>
      <button onClick={() => clearFilters()}>
        Clear Filters
      </button>
    </div>
  );
}
```

## Accessibility

<CardGroup cols={2}>
  <Card title="Screen Readers" icon="universal-access">
    Use `aria-label` on badges: "Match status: Almost match, contains dairy"
  </Card>

  <Card title="Color Contrast" icon="palette">
    Ensure badge colors meet WCAG AA contrast ratios
  </Card>

  <Card title="Keyboard Navigation" icon="keyboard">
    All interactive elements should be keyboard accessible
  </Card>

  <Card title="Focus Indicators" icon="crosshairs">
    Visible focus states on dish cards and buttons
  </Card>
</CardGroup>

```jsx theme={null}
// Accessible badge example
<span
  className="badge badge-yellow"
  role="status"
  aria-label={`Match status: Almost match. ${matchReasons.join('. ')}`}
>
  ⚠ Almost
</span>
```