Button component

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;

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;
+}

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'))

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)