diff --git a/views/components/action_button.templ b/views/components/action_button.templ
new file mode 100644
index 0000000..3b4ade3
--- /dev/null
+++ b/views/components/action_button.templ
@@ -0,0 +1,44 @@
+package components
+
+import "github.com/tigorlazuardi/redmage/views/icons"
+
+templ ActionButton(components ...templ.Component) {
+
+
+
+ @icons.Kebab("h-8 w-8")
+
+
+ for i, component := range components {
+ if i > 0 {
+
+ }
+ -
+ @component
+
+ }
+ if len(components) > 0 {
+
+ }
+ -
+
+
+
+
+
+}
diff --git a/views/devices/view.templ b/views/devices/view.templ
index ebd7f8b..7a9fcbb 100644
--- a/views/devices/view.templ
+++ b/views/devices/view.templ
@@ -7,13 +7,13 @@ import "github.com/tigorlazuardi/redmage/api"
import "strconv"
import "fmt"
import "github.com/tigorlazuardi/redmage/views/utils"
-import "github.com/tigorlazuardi/redmage/views/icons"
type Data struct {
- Error string
- Devices models.DeviceSlice
- Total int64
- Params api.DevicesListParams
+ Error string
+ Devices models.DeviceSlice
+ Total int64
+ Params api.DevicesListParams
+ FlashMessageSuccess string
}
templ View(c *views.Context, data Data) {
@@ -21,6 +21,11 @@ templ View(c *views.Context, data Data) {
@components.Head(c, components.HeadTitle("Redmage - Devices"))
@components.Body(c) {
@Content(c, data)
+ @components.NotificationContainer() {
+ if data.FlashMessageSuccess != "" {
+ @components.SuccessToast(data.FlashMessageSuccess)
+ }
+ }
}
}
}
@@ -33,11 +38,7 @@ templ Content(c *views.Context, data Data) {
} else {
Devices
-
+ @components.ActionButton(addNewDeviceButton())
@filter(data)
@@ -48,6 +49,13 @@ templ Content(c *views.Context, data Data) {
}
+templ addNewDeviceButton() {
+ Add New Device
+}
+
templ devicesList(data Data) {
for _, device := range data.Devices {