use Astrotomic\Unavatar\Laravel\Unavatar;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class Avatar extends Component
{
public string $search;
public ?string $src = null;
public ?string $provider = null;
public function __construct(string $search, ?string $src = null, ?string $provider = null)
{
$this->search = $search;
$this->src = $src;
$this->provider = $provider;
}
public function render(): View
{
return view('components.avatar');
}
public function url(): string
{
if ($this->src) {
return $this->src;
}
return Unavatar::make($this->search, $this->provider)->toUrl();
}
}
<x-img :src="$url()" {{ $attributes->merge(['ratio' => '1:1', 'class' => 'inline-block rounded-full min-w-full min-h-full object-cover']) }} />
@if($likes->isNotEmpty())
<footer {{ $attributes->merge(['class' => 'space-y-12']) }}>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
@if($likes->isNotEmpty())
<div class="flex items-center space-x-3">
<ul class="flex overflow-hidden -space-x-2">
@foreach($likes->take(6) as $like)
<li class="block w-8 h-8">
<x-avatar
:search="parse_url($like->url, PHP_URL_HOST)"
:src="$like->author->avatar"
width="64"
height="64"
class="border-2 border-solid border-snow-0 dark:border-night-0"
:alt="$like->author->name"
:title="$like->author->name"
/>
</li>
@endforeach
</ul>
</div>
@endif
//
</footer>
@endif
Additional resources on blade components:
-
Povilas Korop | www.youtube.com
Published on
-
Povilas Korop | www.youtube.com
Published on
-
Blade components for your layout
Article
Marcel Pociot | beyondco.de
Published on
-
Article
Eric The Coder | dev.to
Published on