made the video cards components

resources/views/user/history.blade.php

@@ -142,35 +142,7 @@
     @else
         <div class="yt-video-grid">
             @foreach($videos as $video)
-            <div class="yt-video-card">
-                <a href="{{ route('videos.show', $video->id) }}">
-                    <div class="yt-video-thumb">
-                        @if($video->thumbnail)
-                            <img src="{{ asset('storage/thumbnails/' . $video->thumbnail) }}" alt="{{ $video->title }}">
-                        @else
-                            <img src="https://picsum.photos/seed/{{ $video->id }}/640/360" alt="{{ $video->title }}">
-                        @endif
-                        @if($video->duration)
-                            <span class="yt-video-duration">{{ gmdate('i:s', $video->duration) }}</span>
-                        @endif
-                    </div>
-                </a>
-                <div class="yt-video-info">
-                    <div class="yt-channel-icon">
-                        @if($video->user && $video->user->avatar_url)
-                            <img src="{{ $video->user->avatar_url }}" alt="{{ $video->user->name }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
-                        @endif
-                    </div>
-                    <div class="yt-video-details">
-                        <h3 class="yt-video-title">
-                            <a href="{{ route('videos.show', $video->id) }}">{{ $video->title }}</a>
-                        </h3>
-                        <div class="yt-video-meta">
-                            {{ $video->user->name ?? 'Unknown' }} • {{ number_format($video->size / 1024 / 1024, 0) }} MB
-                        </div>
-                    </div>
-                </div>
-            </div>
+                <x-video-card :video="$video" size="small" />
             @endforeach
         </div>
     @endif