@props(['tip'])

<div class="flex w-full p-6 space-x-6 bg-gray-50 rounded-2xl">
    <a href="{{ $tip->author->profile_url }}" target="_blank">
        <img class="bg-gray-200 rounded-full w-14 h-14" src="{{ asset($tip->author->avatar) }}"
            alt="{{ $tip->author->name }}">
    </a>

    <aside class="flex-1 space-y-2 text-left">
        <a href="{{ $tip->author->profile_url }}" target="_blank"
            class="block text-xl font-bold">{{ $tip->author->name }}</a>

        <dl class="grid gap-6 sm:grid-cols-2 md:grid-cols-4">
            @if ($tip->thread)
                <div>
                    <dt class="text-sm text-gray-500">Thread</dt>

                    <dd>
                        <x-link href="{{ route('thread.show', $tip->thread->slug, false) }}">
                            {{ $tip->thread->title }}
                        </x-link>
                    </dd>
                </div>
            @endif

            <div>
                <dt class="text-sm text-gray-500">Tweet</dt>

                <dd>
                    <x-link href="{{ $tip->tweet_url }}" target="_blank">
                        twitter.com/...
                    </x-link>
                </dd>
            </div>
        </dl>
    </aside>
</div>