

<Preview name="InlineCitationDefaultExample" />

## Overview [#overview]

`InlineCitation` connects cited text to source details. The trigger uses a compact badge, while the content can show one or more sources inside a carousel.

## Usage [#usage]

```tsx
import {
  InlineCitation,
  InlineCitationCard,
  InlineCitationCardBody,
  InlineCitationCardTrigger,
  InlineCitationText,
} from "@tilt-legal/cubitt-components/chat-elements";
```

## Examples [#examples]

### Default [#default]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="InlineCitationDefaultExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <InlineCitation>
      <InlineCitationText>with only 30 days notice</InlineCitationText>
      <InlineCitationCard>
        <InlineCitationCardTrigger sources={sourceUrls} />
        <InlineCitationCardBody>
          <InlineCitationCarousel>
            <InlineCitationCarouselHeader>
              <InlineCitationCarouselPrev />
              <InlineCitationCarouselIndex />
              <InlineCitationCarouselNext />
            </InlineCitationCarouselHeader>
            <InlineCitationCarouselContent>
              <InlineCitationCarouselItem>
                <InlineCitationSource
                  title="Lease review memo"
                  url={sourceUrls[0]}
                />
                <InlineCitationQuote>
                  Tenant may terminate after year three.
                </InlineCitationQuote>
              </InlineCitationCarouselItem>
            </InlineCitationCarouselContent>
          </InlineCitationCarousel>
        </InlineCitationCardBody>
      </InlineCitationCard>
    </InlineCitation>
    ```
  </Tab>
</Tabs>

### Open [#open]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="InlineCitationOpenExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <InlineCitation>
      <InlineCitationText>based on the latest board pack</InlineCitationText>
      <InlineCitationCard defaultOpen>
        <InlineCitationCardTrigger sources={sourceUrls} />
        <InlineCitationCardBody>...</InlineCitationCardBody>
      </InlineCitationCard>
    </InlineCitation>
    ```
  </Tab>
</Tabs>
