latest update

resources/views/components/channel-row.blade.php

@@ -0,0 +1,66 @@
+<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'])