> ## 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.

# Event List

> Interactive preview for the @agg-build/ui EventList surface

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>;
};

# Event List

`EventList` renders event grids backed by AGG data hooks and shared UI theming.

Use Storybook as the source of truth for controls, layout tuning, and state exploration.

## Import

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

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

## Preview

<StorybookEmbed storyId="components-event-section--default" title="Event List" height={860} />