import { Avatar } from '@preply/ds-web-lib';
import { Meta } from '@storybook/addon-docs/blocks';

import { BreakpointList } from './components/BreakpointList';

<Meta title="Guides/Responsive Props" />

# Responsive Props

Some component props optionally accept responsive values for different screen sizes
based on the global breakpoints:

```jsx
<Component prop={<value>} />
<Component prop={{ _: <value>, '<breakpoint>': <value>, ... }} />
```

Where `_` is the value for the smallest breakpoint, and `<breakpoint>` is one of
the following, predefined values:

<BreakpointList />

## Example

export const url = './assets/avatar-1.png';

<Avatar src={url} size="24" />
<Avatar src={url} size={{ _: '24', 'medium-l': '48', 'wide-s': '64' }} />

```jsx
<Avatar src={url} size="24" />
<Avatar src={url} size={{ _: '24', 'medium-l': '48', 'wide-s': '64' }} />
```

Try resizing your viewport using the dev tools to see the `Avatar` size update.
