From 3637edb816f673830b70b05354a5b74909549999 Mon Sep 17 00:00:00 2001
From: Steven Le Rouzic <steven.lerouzic@gmail.com>
Date: Sun, 28 Apr 2024 01:13:27 +0200
Subject: Start work on styling

---
 view/components.templ | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 view/components.templ

(limited to 'view/components.templ')

diff --git a/view/components.templ b/view/components.templ
new file mode 100644
index 0000000..b2383ba
--- /dev/null
+++ b/view/components.templ
@@ -0,0 +1,51 @@
+package view
+
+templ textLikeField(fieldType string, name string, placeholder string) {
+  <input
+    type={ fieldType }
+    name={ name }
+    placeholder={ placeholder }
+    class="
+      bg-slate-800 focus:bg-slate-700
+      text-slate-200 placeholder-slate-500
+      p-2
+      rounded-md border border-slate-600 border-b-slate-500
+      focus:bg-slate-700
+      shadow-inner
+    "
+  />
+}
+
+templ TextField(name string, placeholder string) {
+  @textLikeField("text", name, placeholder)
+}
+
+templ PasswordField(name string, placeholder string) {
+  @textLikeField("password", name, placeholder)
+}
+
+templ Button(fieldType string, name string, attrs templ.Attributes) {
+  <button
+    type={ fieldType }
+    class="
+      text-slate-200
+      bg-blue-500 hover:bg-blue-400 active:bg-blue-600
+      py-2 px-6
+      rounded-full border-t border-t-blue-400
+    "
+    { attrs... }
+  >{ name }</button>
+}
+ 
+templ SecondaryButton(fieldType string, name string, attrs templ.Attributes) {
+  <button
+    type={ fieldType }
+    class="
+      text-slate-100/50
+      bg-transparent hover:bg-slate-300/10 active:bg-slate-300/20
+      py-2 px-6
+      rounded-full border border-slate-100/50
+    "
+    { attrs... }
+  >{ name }</button>
+}
-- 
cgit