Componente de los videos

app/View/Components/VideoTable.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+
+class VideoTable extends Component
+{
+    public $videos;
+
+    public function __construct($videos)
+    {
+        $this->videos = $videos;
+    }
+
+    public function render()
+    {
+        return view('components.video-table');
+    }
+}

resources/views/components/video-table.blade.php

@@ -0,0 +1,22 @@
+<div class="mt-4 flex items-center justify-center mb-16">
+    <div class="w-full max-w-screen-md p-4 bg-white rounded-lg shadow-lg">
+      <table class="w-full border-collapse border border-gray-300">
+        <thead>
+          <tr>
+            <th class="border border-gray-300 px-4 py-2">N°</th>
+            <th class="border border-gray-300 px-4 py-2">Contenido</th>
+          </tr>
+        </thead>
+        <tbody>
+
+          @foreach ($videos as $video)
+          <tr>
+            <td class="border border-gray-300 px-4 py-2">{{$video->orden}}</td>
+            <td class="border border-gray-300 px-4 py-2">{{$video->nombre}}</td>
+          </tr>
+          @endforeach
+
+        </tbody>
+      </table>
+    </div>
+  </div>

resources/views/detalle_curso.blade.php

@@ -34,27 +34,7 @@
   </div>
 
   {{-- tabla de los nombres video que se brindarán: --}}
-  <div class="mt-4 flex items-center justify-center mb-16">
-    <div class="w-full max-w-screen-md p-4 bg-white rounded-lg shadow-lg">
-      <table class="w-full border-collapse border border-gray-300">
-        <thead>
-          <tr>
-            <th class="border border-gray-300 px-4 py-2">N°</th>
-            <th class="border border-gray-300 px-4 py-2">Contenido</th>
-          </tr>
-        </thead>
-        <tbody>
-
-          @foreach ($videos as $video)
-          <tr>
-            <td class="border border-gray-300 px-4 py-2">{{$video->orden}}</td>
-            <td class="border border-gray-300 px-4 py-2">{{$video->nombre}}</td>
-          </tr>
-          @endforeach
-
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <x-video-table :videos="$videos" />
+
 
 </x-guest-layout>