From 2d6b1bf96a711721ecedb5e121c79ce936b90829 Mon Sep 17 00:00:00 2001
From: KagirDev <kagir.dev@gmail.com>
Date: Sat, 27 Jan 2024 19:25:20 +0100
Subject: [PATCH] Training Part 1.1;

---
 resources/views/components/table.blade.php | 24 ++++++++++++
 resources/views/words/index.blade.php      | 43 ++++++++++++----------
 2 files changed, 47 insertions(+), 20 deletions(-)
 create mode 100644 resources/views/components/table.blade.php

diff --git a/resources/views/components/table.blade.php b/resources/views/components/table.blade.php
new file mode 100644
index 0000000..2f326cc
--- /dev/null
+++ b/resources/views/components/table.blade.php
@@ -0,0 +1,24 @@
+@props(['items' => []])
+@props(['fields' => []])
+
+<table class="table table-striped">
+    <thead>
+    <tr>
+        <th>Word</th>
+        <th>Translation</th>
+    </tr>
+    </thead>
+    <tbody>
+
+    @forelse ($items as $item)
+        <tr>
+            <td>{{ $item->{$fields[0]} }}</td>
+            <td>{{ $item->{$fields[1]} }}</td>
+        </tr>
+    @empty
+        <tr>
+            <td class="text-center" colspan="2">No words</td>
+        </tr>
+    @endforelse
+    </tbody>
+</table>
diff --git a/resources/views/words/index.blade.php b/resources/views/words/index.blade.php
index 017d054..3387a62 100644
--- a/resources/views/words/index.blade.php
+++ b/resources/views/words/index.blade.php
@@ -1,23 +1,26 @@
 <x-app-layout>
-    <table class="table table-striped">
-        <thead>
-        <tr>
-            <th>Word</th>
-            <th>Translation</th>
-        </tr>
-        </thead>
-        <tbody>
+{{--    <table class="table table-striped">--}}
+{{--        <thead>--}}
+{{--        <tr>--}}
+{{--            <th>Word</th>--}}
+{{--            <th>Translation</th>--}}
+{{--        </tr>--}}
+{{--        </thead>--}}
+{{--        <tbody>--}}
 
-        @forelse ($words as $word)
-            <tr>
-                <td>{{$word->name}}</td>
-                <td>{{$word->translation}}</td>
-            </tr>
-        @empty
-            <tr>
-                <td class="text-center" colspan="2">No words</td>
-            </tr>
-        @endforelse
-        </tbody>
-    </table>
+{{--        @forelse ($words as $word)--}}
+{{--            <tr>--}}
+{{--                <td>{{$word->name}}</td>--}}
+{{--                <td>{{$word->translation}}</td>--}}
+{{--            </tr>--}}
+{{--        @empty--}}
+{{--            <tr>--}}
+{{--                <td class="text-center" colspan="2">No words</td>--}}
+{{--            </tr>--}}
+{{--        @endforelse--}}
+{{--        </tbody>--}}
+{{--    </table>--}}
+
+
+    <x-table :items="$words" :fields="array('name','translation')" />
 </x-app-layout>