67 lines
1.7 KiB
PHP
67 lines
1.7 KiB
PHP
<div class="channel-row">
|
|
<div style="display: flex; align-items: center; gap: 12px;">
|
|
<a href="{{ route('channel', $video->user_id) }}" class="channel-info text-decoration-none"
|
|
style="color: inherit; display: flex; align-items: center; gap: 12px;">
|
|
@if ($video->user)
|
|
<img src="{{ $video->user->avatar_url }}" class="channel-avatar" alt="{{ $video->user->name }}">
|
|
@else
|
|
<div class="channel-avatar"></div>
|
|
@endif
|
|
<div>
|
|
<div class="channel-name">{{ $video->user->name ?? 'Unknown' }}</div>
|
|
<div class="channel-subs">{{ number_format($video->user->subscriber_count ?? 0) }} subscribers</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<x-video-actions :video="$video" />
|
|
</div>
|
|
|
|
<style>
|
|
/* Channel Row */
|
|
.channel-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
.channel-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.channel-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: #555;
|
|
}
|
|
|
|
.channel-name {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.channel-subs {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 576px) {
|
|
.channel-row {
|
|
flex-direction: column;
|
|
align-items: flex-start !important;
|
|
gap: 12px;
|
|
}
|
|
|
|
.channel-info {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
@props(['video'])
|