From 900f84c304d4fd4638f7def782ceb7b9dd9a58da Mon Sep 17 00:00:00 2001
From: "Gu://em_" <guillem.george@epita.fr>
Date: Mon, 12 May 2025 16:56:14 +0200
Subject: [PATCH] Button component

---
 frontend/src/components/Buttons/button.jsx    | 18 +++++++++
 .../src/components/Buttons/button.module.css  | 37 +++++++++++++++++++
 frontend/src/main.jsx                         |  2 +-
 .../src/styles/{app.css => template-app.css}  |  0
 frontend/src/{app.jsx => template-app.jsx}    |  2 +-
 5 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/Buttons/button.jsx
 create mode 100644 frontend/src/components/Buttons/button.module.css
 rename frontend/src/styles/{app.css => template-app.css} (100%)
 rename frontend/src/{app.jsx => template-app.jsx} (97%)

diff --git a/frontend/src/components/Buttons/button.jsx b/frontend/src/components/Buttons/button.jsx
new file mode 100644
index 0000000..f5fc7e1
--- /dev/null
+++ b/frontend/src/components/Buttons/button.jsx
@@ -0,0 +1,18 @@
+import styles from './button.module.css'
+
+function Button({ children, onClick, className, variant = 'primary', ...rest}) {
+    // Construct dynamic class names using CSS Modules
+    const buttonClasses = `${styles.button} ${styles[variant] || ''} ${className || ''}`
+
+    return (
+        <button
+            className={buttonClasses}
+            onClick= {onClick}
+            {...rest} // Allow passing other props like 'disabled', 'type', etc.
+            >
+                {children}
+        </button>
+    )
+}
+
+export default Button;
\ No newline at end of file
diff --git a/frontend/src/components/Buttons/button.module.css b/frontend/src/components/Buttons/button.module.css
new file mode 100644
index 0000000..78a6d40
--- /dev/null
+++ b/frontend/src/components/Buttons/button.module.css
@@ -0,0 +1,37 @@
+.button {
+
+    padding: .05em .1em;
+
+    border: 3em;
+    border-radius: 3px;
+}
+
+.primary {
+    background-color: #353be5;
+    border-color: #4e53dc;
+}
+
+.primary:hover {
+    background-color: #353be5;
+    border-color: #6b70f7;
+}
+
+.secondary {
+    background-color: #1a1a1a;
+    border-color: #2a2a2a;
+}
+
+.secondary:hover {
+    background-color: #2a2a2a;
+    border-color: #3a3a3a;
+}
+
+.tertiary {
+    background-color: #eaeaea00;
+    border-color: #eaeaea;
+}
+
+.tertiary:hover {
+    background-color: #eaeaea16;
+    border-color: #eaeaea;
+}
\ No newline at end of file
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 008c962..16d686b 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,5 +1,5 @@
 import { render } from 'preact'
 import './styles/index.css'
-import { App } from './app.jsx'
+import { App } from './template-app.jsx'
 
 render(<App />, document.getElementById('app'))
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/template-app.css
similarity index 100%
rename from frontend/src/styles/app.css
rename to frontend/src/styles/template-app.css
diff --git a/frontend/src/app.jsx b/frontend/src/template-app.jsx
similarity index 97%
rename from frontend/src/app.jsx
rename to frontend/src/template-app.jsx
index 9efff17..8e8038e 100644
--- a/frontend/src/app.jsx
+++ b/frontend/src/template-app.jsx
@@ -1,7 +1,7 @@
 import { useState } from 'preact/hooks'
 import preactLogo from './assets/preact.svg'
 import viteLogo from '/vite.svg'
-import './styles/app.css'
+import './styles/template-app.css'
 
 export function App() {
   const [count, setCount] = useState(0)