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

# Market Details

> Interactive preview for AGG market detail surfaces

export const StorybookEmbed = ({storyId, title = "Storybook preview", height = 320, baseUrl = "https://storybook.agg.market"}) => {
  const resolvedHeight = typeof height === "number" ? `${height}px` : height;
  const normalizedBaseUrl = baseUrl.endsWith("/") ? baseUrl.slice(0, -1) : baseUrl;
  const buildStorybookUrls = theme => {
    const iframeSearchParams = new URLSearchParams({
      id: storyId,
      viewMode: "story",
      singleStory: "true",
      shortcuts: "false",
      globals: `theme:${theme}`
    });
    const storybookSearchParams = new URLSearchParams({
      path: `/story/${storyId}`,
      globals: `theme:${theme}`
    });
    return {
      iframeSrc: `${normalizedBaseUrl}/iframe.html?${iframeSearchParams.toString()}`,
      storybookUrl: `${normalizedBaseUrl}/?${storybookSearchParams.toString()}`
    };
  };
  const lightUrls = buildStorybookUrls("light");
  const darkUrls = buildStorybookUrls("dark");
  return <div className="not-prose my-6 overflow-hidden rounded-2xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
      <div className="flex items-center justify-between gap-4 border-b border-zinc-200 px-4 py-3 dark:border-zinc-800">
        <p className="m-0 min-w-0 text-sm font-semibold text-zinc-900 dark:text-zinc-100">{title}</p>
        <div className="shrink-0">
          <a href={lightUrls.storybookUrl} target="_blank" rel="noreferrer" className="text-sm font-medium text-[#ED8200] hover:opacity-80 dark:hidden">
            Open in Storybook
          </a>
          <a href={darkUrls.storybookUrl} target="_blank" rel="noreferrer" className="hidden text-sm font-medium text-[#ED8200] hover:opacity-80 dark:inline">
            Open in Storybook
          </a>
        </div>
      </div>

      <iframe src={lightUrls.iframeSrc} title={`${title} light`} loading="lazy" className="block w-full border-0 bg-transparent dark:hidden" style={{
    height: resolvedHeight
  }} />
      <iframe src={darkUrls.iframeSrc} title={`${title} dark`} loading="lazy" className="hidden w-full border-0 bg-transparent dark:block" style={{
    height: resolvedHeight
  }} />
    </div>;
};

# Market Details

`MarketDetails` renders live chart, orderbook, and venue-level market detail content for a selected
market. The Storybook preview uses the list wrapper that hosts the same card surface in context.

Use Storybook as the source of truth for tabs, data states, and interaction details.

## Import

```tsx theme={null}
import "@agg-build/ui/styles.css";
import { MarketDetails } from "@agg-build/ui/events";
```

Requires `<AggProvider>` from `@agg-build/hooks`.

## Preview

<StorybookEmbed storyId="components-market-details-list--default" title="Market Details" height={980} />