From d469dbfa75ed57d7389465938667e68d222917ad Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Wed, 16 Oct 2024 23:03:04 +0200
Subject: [PATCH] Add table component

---
 app/View/Ui/Table.php   | 31 ++++++++++++++++++++++++++++++
 package-lock.json       |  9 +++++++++
 package.json            |  1 +
 resources/css/app.css   |  1 -
 resources/css/table.css | 42 -----------------------------------------
 tailwind.config.js      |  2 +-
 6 files changed, 42 insertions(+), 44 deletions(-)
 create mode 100644 app/View/Ui/Table.php
 delete mode 100644 resources/css/table.css

diff --git a/app/View/Ui/Table.php b/app/View/Ui/Table.php
new file mode 100644
index 00000000..baf8f18e
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/package-lock.json b/package-lock.json
index e82d2d7a..0b657571 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index ef318bb1..5a6b244a 100644
--- a/package.json
+++ b/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",
diff --git a/resources/css/app.css b/resources/css/app.css
index f7ca8c23..3c9b4825 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -5,6 +5,5 @@
 @import 'base.css';
 @import 'layout';
 @import 'buttons';
-@import 'table';
 @import 'bool';
 @import 'editor';
diff --git a/resources/css/table.css b/resources/css/table.css
deleted file mode 100644
index 518bb1bd..00000000
--- a/resources/css/table.css
+++ /dev/null
@@ -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;
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index 4ab5adc1..2a2fae05 100644
--- a/tailwind.config.js
+++ b/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')],
 };