import { Meta, ArgTypes } from '@storybook/blocks';
import { FeaturedRemoteVideos } from './';

<Meta title="SDK Components/FeaturedRemoteVideos" />

# FeaturedRemoteVideos

The `FeaturedRemoteVideos` component renders all remote attendee's videos with no layout, and applies a `featured-tile` class to the active speaker's video tile.
You can target this class if you want to apply custom styling to the active video.

If used within the `VideoGrid` component, it will automatically place the active tile in the featured grid slot.

## Importing

```javascript
import { FeaturedRemoteVideos } from 'amazon-chime-sdk-component-library-react';
```

## Usage

```jsx
// App.js

import React from 'react';
import { MeetingProvider, FeaturedRemoteVideos } from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <MeetingProvider>
    <MyCustomGrid>
      <FeaturedRemoteVideos />
    </MyCustomGrid>
  </MeetingProvider>
);

// styles.css

.ch-featured-tile {
  border: 2px solid blue;
}

```

## Props

<ArgTypes of={FeaturedRemoteVideos} />