# Referrals Gallery

## Overview

The `ReferralsGallery` utility component displays a - truncated but expandable - gallery of labeled icons pertaining to the current user's referrals.

In our business logic, this means fetching a list of either posts or signups where the `referrer_user_id` matches the current user, parsing out the referred users' **Display name** values, and passing that list as the `referralLabels` prop to the Referrals Gallery.

The gallery will render the referral labels under images utilizing the `referralIcon` prop in a list truncated to the first three referral labels. It will also display a link showing the additional count of referrals ('+ n more') which, when clicked, will expand the gallery to display the full list, with the link converting to a 'view less' link which will collapse the gallery when clicked.

![Referrals Gallery Truncated](/files/-M9Tdbk-UEHk89q5JO7g)

![Referrals Gallery Expanded](/files/-M9Tdbk2yHflV72yJH1G)

If less then three referral labels are passed to the gallery, it will auto append placeholder labels to achieve a minimum of three gallery nodes, under a list of the assigned `placeholderIcon` icon. (With *no* additional count link, of course).

![Referrals Gallery With One Referral](/files/-M9Tdbk5FHUIhtMN6B8e)

## Usage Instructions

```javascript
import ReferralIcon from './referral-icon.svg';
import PlaceholderIcon from './placeholder-icon.svg';

const signupReferrals = [
  { id: 1, user: { displayName: 'Michael M.' } },
  { id: 2, user: { displayName: 'Amanda W.' } },
  { id: 3, user: { displayName: 'Billy C.' } },
  { id: 4, user: { displayName: 'Jane M.' } },
  { id: 5, user: { displayName: 'Matt F.' } },
];

<ReferralsGallery
  referralLabels={signupReferrals.map(referral => referral.user.displayName)}
  referralIcon={ReferralIcon}
  placeholderIcon={PlaceholderIcon}
/>;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dosomething.gitbook.io/phoenix-documentation/development/features/referrals-gallery.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.