> ## Documentation Index
> Fetch the complete documentation index at: https://docs.laravelshopper.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# User Avatar

> Display user profile picture with optional name

export const PreviewUserAvatar = ({name, showName = true, src = 'https://ui-avatars.com/api/?name=John+Doe&background=3b82f6&color=fff'}) => {
  return <div className="sh-user-avatar">
      <img className="sh-user-avatar-img" src={src} alt={name} />
      {showName && <span className="sh-user-avatar-name">{name}</span>}
    </div>;
};

export const ComponentPreview = ({children, className = '', centered = true}) => {
  return <div className={`sh-preview ${className}`}>
      <div className={`sh-preview-content ${centered ? 'flex items-center justify-center' : ''}`}>
        {children}
      </div>
    </div>;
};

The User Avatar component displays a user's profile picture with an optional name. Commonly used in Filament tables and user-related interfaces.

## Preview

<ComponentPreview>
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
    <PreviewUserAvatar name="John Doe" />

    <PreviewUserAvatar name="Jane Smith" showName={false} />
  </div>
</ComponentPreview>

## Usage

```blade theme={null}
<x-shopper::user-avatar :user="$customer" />
```

## Props

<ParamField path="user" type="Model" required>
  The user model instance. Must have `picture` and `full_name` attributes.
</ParamField>

<ParamField path="showName" type="bool" default="true">
  Whether to display the user's name next to the avatar.
</ParamField>

## Examples

### With Name

<ComponentPreview>
  <PreviewUserAvatar name="John Doe" />
</ComponentPreview>

```blade theme={null}
<x-shopper::user-avatar :user="$user" />
```

### Avatar Only

<ComponentPreview>
  <PreviewUserAvatar name="Jane Smith" showName={false} />
</ComponentPreview>

```blade theme={null}
<x-shopper::user-avatar :user="$user" :showName="false" />
```

### In a Filament Table

```php theme={null}
Tables\Columns\ViewColumn::make('customer')
    ->view('shopper::components.user-avatar')
    ->label(__('Customer')),
```

## User Model Requirements

The user model must implement:

```php theme={null}
public function getPictureAttribute(): string;

public function getFullNameAttribute(): string;
```

## Blade Component Source

```blade theme={null}
@props([
    'user',
    'showName' => true,
])

<div class="flex items-center gap-2">
    <img
        class="size-8 rounded-full"
        src="{{ $user->picture }}"
        alt="{{ $user->full_name }}"
    />

    @if ($showName)
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
            {{ $user->full_name }}
        </span>
    @endif
</div>
```