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

<Meta title="MDX|UserIcon" component={UserIcon} />

# UserIcon

`UserIcon` a component that takes in the `UserIconProps` interface as a prop. It renders a user icon and displays the user's name or initials along with the user's active status or last viewed date.

## Usage

To use the `UserIcon` component, import it and pass in the required `UserIconProps`. The component can be used as follows:

```jsx
import { UserIcon } from '@grafana/ui';

const ExampleComponent = () => {
  const userView = {
    user: { id: 1, name: 'John Smith', avatarUrl: 'https://example.com/avatar.png' },
    lastActiveAt: '2023-04-18T15:00:00.000Z',
  };

  return (
    <div>
      <UserIcon userView={userView} showTooltip={true} className={styles.custom} />
    </div>
  );
};
```

### With custom `children`

`children` prop can be used to display a custom content inside `UserIcon`. This is useful to show the data about extra users.

```jsx
import { UserIcon } from '@grafana/ui';

const ExampleComponent = () => {
  const userView = {
    user: { id: 1, name: 'John Smith', avatarUrl: 'https://example.com/avatar.png' },
    lastActiveAt: '2023-04-18T15:00:00.000Z',
  };

  return (
    <div>
      <UserIcon userView={userView} showTooltip={false}>
        +10
      </UserIcon>
    </div>
  );
};
```

<ArgTypes of={UserIcon} />

## UserView type

```tsx
import { DateTimeInput } from '@grafana/data';

export interface UserView {
  user: {
    /** User's name, containing first + last name */
    name: string;
    /** URL to the user's avatar */
    avatarUrl?: string;
  };
  /** Datetime string when the user was last active */
  lastActiveAt: DateTimeInput;
}
```
