Add table component

app/View/Ui/Table.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\View\Ui;
+
+use Illuminate\View\Component;
+
+class Table extends Component
+{
+
+    public function __construct(public string $mode = 'dark')
+    {
+    }
+
+    public function render()
+    {
+        return <<<'HTML'
+            <div class="@container/table">
+                <table cellpadding="0" cellspacing="0" border="0" class="w-full @if ($mode === 'dark') table-dark @else table-light @endif
+                    [&_th]:text-left [&_th]:px-2 [&_th]:@4xl/table:px-6 [&_th]:text-gray-200 [&_th]:font-semibold [&_th]:py-3 [&_th]:border-gray-600 [&_th]:border-b
+                    [&_tbody_tr]:text-gray-200 [&_tbody_tr]:duration-300 [&_tbody_tr]:rounded [&_tbody_tr:hover]:bg-gray-800
+                    [&_tr_td]:py-1 [&_tr_td]:px-2 [&_tr_td]:@4xl/table:px-6
+                    [&.table-light_th]:border-gray-500 [&.table-light_tbody_tr:hover]:bg-gray-700
+
+
+                    ">
+                    {{ $slot }}
+                </table>
+            </div>
+        HTML;
+    }
+}

package-lock.json

@@ -11,6 +11,7 @@
                 "@editorjs/paragraph": "^2.11.3",
                 "@inertiajs/vue3": "^1.0.14",
                 "@ryangjchandler/alpine-tooltip": "^2.0.1",
+                "@tailwindcss/container-queries": "^0.1.1",
                 "@tailwindcss/forms": "^0.5.7",
                 "@tailwindcss/typography": "^0.5.10",
                 "@vitejs/plugin-vue": "^4.6.2",
@@ -998,6 +999,14 @@
                 "tippy.js": "^6.3.1"
             }
         },
+        "node_modules/@tailwindcss/container-queries": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
+            "integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==",
+            "peerDependencies": {
+                "tailwindcss": ">=3.2.0"
+            }
+        },
         "node_modules/@tailwindcss/forms": {
             "version": "0.5.7",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",

package.json

@@ -30,6 +30,7 @@
         "@editorjs/paragraph": "^2.11.3",
         "@inertiajs/vue3": "^1.0.14",
         "@ryangjchandler/alpine-tooltip": "^2.0.1",
+        "@tailwindcss/container-queries": "^0.1.1",
         "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.10",
         "@vitejs/plugin-vue": "^4.6.2",

resources/css/app.css

@@ -5,6 +5,5 @@
 @import 'base.css';
 @import 'layout';
 @import 'buttons';
-@import 'table';
 @import 'bool';
 @import 'editor';

resources/css/table.css

@@ -1,42 +0,0 @@
-.custom-table {
-    width: 100%;
-    & > thead > th {
-        @apply text-left px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b;
-    }
-
-    & > tr {
-        @apply text-gray-200 transition-all duration-300 rounded hover:bg-gray-800;
-        & > td {
-            @apply py-1 px-6;
-        }
-    }
-
-    &.custom-table-sm {
-        & > thead > th {
-            @apply px-3 py-2;
-        }
-        & > tr {
-            & > td {
-                @apply py-1 px-3;
-            }
-        }
-    }
-
-    &.custom-table-light {
-        & > thead > th {
-            @apply border-gray-500;
-        }
-        & > td {
-            &:hover {
-                @apply bg-gray-700;
-            }
-        }
-    }
-
-}
-.custom-table > * {
-    display: table-row;
-}
-.custom-table > * > * {
-    display: table-cell;
-}

tailwind.config.js

@@ -29,5 +29,5 @@ module.exports = {
         },
     },
 
-    plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
+    plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms'), require('@tailwindcss/container-queries')],
 };