From a86fb41f36d982bae8a5735d28ede3c6579c5883 Mon Sep 17 00:00:00 2001
From: pvincent <pvincent@artcode.re>
Date: Tue, 24 Feb 2026 12:02:59 +0000
Subject: [PATCH] tailwind config

---
 app/assets/tailwind/application.css           |  9 ++----
 app/helpers/button_helper.rb                  |  5 +++
 app/javascript/application.js                 | 24 ++++++++++++--
 app/views/edge/index.html.erb                 |  2 ++
 app/views/layouts/application.html.erb        |  9 +++---
 .../layouts/{ => components}/_footer.html.erb |  0
 .../layouts/components/_main_dialog.html.erb  | 21 +++++++++++++
 .../layouts/{ => components}/_navbar.html.erb |  0
 config/tailwind.config.js                     | 31 +++++++++++++++++++
 9 files changed, 88 insertions(+), 13 deletions(-)
 create mode 100644 app/helpers/button_helper.rb
 rename app/views/layouts/{ => components}/_footer.html.erb (100%)
 create mode 100644 app/views/layouts/components/_main_dialog.html.erb
 rename app/views/layouts/{ => components}/_navbar.html.erb (100%)
 create mode 100644 config/tailwind.config.js

diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css
index b764541..f575a68 100644
--- a/app/assets/tailwind/application.css
+++ b/app/assets/tailwind/application.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@config '../../../config/tailwind.config.js';
 
 @plugin "../../../vendor/javascript/daisyui.mjs" {
   themes: light, dark;
@@ -7,8 +8,8 @@
 @plugin "../../../vendor/javascript/daisyui-theme.mjs" {
   name: "light";
   default: true;
-
   prefersdark: false;
+
   color-scheme: "light";
 
   --color-primary: var(--color-bichik-100);
@@ -17,7 +18,6 @@
   --color-secondary-content: var(--color-bichik-100);
   --color-accent: #96d3dd;
   --color-accent-content: #1e2939;
-
   --color-border-primary: var(--color-bichik-110);
   --color-check-primary: white;
 }
@@ -29,18 +29,13 @@
 
   --color-base-100: #364153;
   --color-base-200: #2a3240;
-  /* --color-base-content: white; */
-
   --color-primary: var(--color-bichik-100);
   --color-primary-content: black;
   --color-secondary: var(--color-base-100);
   --color-secondary-content: var(--color-bichik-80);
   --color-accent: #96d3dd;
   --color-accent-content: #1e2939;
-
   --color-border-primary: white;
   --color-check-primary: var(--color-bichik-110);
-
-  --radius-selector: 0.5rem;
 }
 
diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb
new file mode 100644
index 0000000..1b4a322
--- /dev/null
+++ b/app/helpers/button_helper.rb
@@ -0,0 +1,5 @@
+module ButtonHelper
+  def button_link_to(text, method: :post, **)
+    content_tag(:button, text, { data: { turbo_method: method }, ** })
+  end
+end
diff --git a/app/javascript/application.js b/app/javascript/application.js
index 0d7b494..7a0e71d 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -1,3 +1,23 @@
-// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
-import "controllers"
+Turbo.config.drive.progressBarDelay = 300
+Turbo.config.forms.confirm = (title) => {
+  const dialog = document.getElementById("main-dialog")
+  const dialogTitle = dialog.querySelector('[data-modal=title]')
+  const previousTitleContent = dialogTitle.textContent
+
+  dialogTitle.textContent = title
+  dialog.showModal()
+
+  return new Promise((resolve, _) => {
+    dialog.addEventListener(
+      "close",
+      () => {
+        dialogTitle.textContent = previousTitleContent
+        resolve(dialog.returnValue == "confirm")
+      },
+      { once: true },
+    );
+  });
+}
+
+import "controllers"
\ No newline at end of file
diff --git a/app/views/edge/index.html.erb b/app/views/edge/index.html.erb
index fcd53a2..6d5790f 100644
--- a/app/views/edge/index.html.erb
+++ b/app/views/edge/index.html.erb
@@ -1 +1,3 @@
 <h1 class="font-bold text-4xl">Edge#index</h1>
+<%= button_link_to 'Open Dialog', class: "btn btn-primary", command: 'show-modal', commandfor: 'main-dialog' %>
+<%= button_to 'Delete', @meeting, method: :delete, class: "btn btn-accent", data: { turbo_confirm: 'merci de confirmer'} %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 5ebb1f7..231b8e5 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -25,9 +25,10 @@
     <%= javascript_importmap_tags %>
   </head>
 
-  <body>
-    <%= render '/layouts/navbar' %>
-    <main class="flex m-8 min-h-60"><%= yield %></main>
-    <%= render '/layouts/footer' %>
+  <body class="flex flex-col">
+    <%= render '/layouts/components/main_dialog' %>
+    <%= render '/layouts/components/navbar' %>
+    <main class="m-8 min-h-60"><%= yield %></main>
+    <%= render '/layouts/components/footer' %>
   </body>
 </html>
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/components/_footer.html.erb
similarity index 100%
rename from app/views/layouts/_footer.html.erb
rename to app/views/layouts/components/_footer.html.erb
diff --git a/app/views/layouts/components/_main_dialog.html.erb b/app/views/layouts/components/_main_dialog.html.erb
new file mode 100644
index 0000000..5090a1a
--- /dev/null
+++ b/app/views/layouts/components/_main_dialog.html.erb
@@ -0,0 +1,21 @@
+<dialog
+  id="main-dialog"
+  class="
+    top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 shadow-2xl
+    backdrop:bg-primary-content/80 rounded-lg p-6 animate-fade-in
+  "
+>
+  <h2 data-modal="title" class="text-2xl font-bold mb-2">Dialog Title</h2>
+
+  <p class="mb-6">
+    This is a centered dialog using the HTML dialog element with Tailwind CSS.
+    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro quisquam
+    enim blanditiis iusto neque accusantium minus, aspernatur ex eius at.
+    Aliquam nam ex sit vel nesciunt qui ducimus velit nulla.
+  </p>
+
+  <div class="flex gap-2 justify-end">
+    <%= button_link_to 'OK', autofocus: true, value: 'confirm', class: "btn btn-primary", command: 'close', commandfor: 'main-dialog' %>
+    <%= button_link_to 'Cancel', value: 'cancel', class: "btn btn-neutral", command: 'close', commandfor: 'main-dialog' %>
+  </div>
+</dialog>
diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/components/_navbar.html.erb
similarity index 100%
rename from app/views/layouts/_navbar.html.erb
rename to app/views/layouts/components/_navbar.html.erb
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
new file mode 100644
index 0000000..ca57a97
--- /dev/null
+++ b/config/tailwind.config.js
@@ -0,0 +1,31 @@
+export const content = [
+  "./public/*.html",
+  "./app/helpers/**/*.rb",
+  "./app/javascript/**/*.js",
+  "./app/views/**/*.{erb,html}",
+];
+
+export const theme = {
+  extend: {
+    colors: {},
+    keyframes: {
+      "fade-in": {
+        "0%": { opacity: 0, transform: "translateY(-30)" },
+        "60%": { transform: "translateY(0)" },
+        "100%": { opacity: "100%" }
+      },
+    },
+    swing: {
+      "0%": { transform: "rotate(0deg)" },
+      "20%": { transform: "rotate(15deg)" },
+      "40%": { transform: "rotate(-10deg)" },
+      "60%": { transform: "rotate(5deg)" },
+      "100%": { transform: "rotate(0deg)" },
+    },
+  },
+  animation: {
+    "fade-in": "fade-in .2s ease-in-out",
+    swing: "swing 1s ease-in-out forwards",
+  },
+},
+};