working on userform

resources/js/pages/Users/Create.vue

@@ -1,3 +1,22 @@
 <template>
+    <div class="flex justify-between mb-2">
+        <n-button
+
+        >
+
+        </n-button>
+        <n-button
+        >
+        Speichern
+        </n-button>
+    </div>
     
-</template>
+</template>
+
+<script setup>
+import BELayout from '@/layouts/BELayout.vue'
+import UserForm from '@/components/UserForm.vue'
+import { renderIcon } from '@/util'
+
+defineOptions({ layout: BELayout })
+</script>

resources/js/pages/Users/Index.vue

@@ -4,6 +4,16 @@
             :messages="props.flashMessages"
         />
    </n-message-provider>
+   <div class="flex flex-row-reverse mb-2">
+      <n-button
+         class="items-end"
+         secondary
+         type="primary"
+         :renderIcon="() => { return renderIcon(Plus) }"
+         :onClick="() => { router.get('/users/create') }"
+      >
+      Neuer Benutzer</n-button>
+   </div>
    <n-data-table 
       :columns="columns"
       :data="users"
@@ -23,6 +33,7 @@ import {
    AdminPanelSettingsFilled as Admin,
    EditRound as Edit,
    DeleteRound as Delete,
+   PlusRound as Plus,
 } from '@vicons/material'
 
 defineOptions({ layout: BELayout })
@@ -36,10 +47,7 @@ const columns = [
       align: "center",
       render (row) {
          if(row.is_admin) {
-            return h(
-               NIcon,
-               { size: 20, component: Admin, class: "align-middle" }
-            )
+            return renderIcon(Admin, "align-middle")
          }
       }
    },
@@ -59,7 +67,7 @@ const columns = [
                class: "invisible group-hover:visible align-middle",
                circle: true,
                onClick: () => { clickEdit(row.id) },
-               renderIcon: () => { return h(NIcon, { component: Edit, size: 20 }) },
+               renderIcon: () => { return renderIcon(Edit) },
             },
          )
          arr[1] = h(
@@ -70,7 +78,7 @@ const columns = [
                circle: true,
                type: "error",
                onClick: () => { clickDelete(row.id) },
-               renderIcon: () => { return h(NIcon, { component: Delete, size: 20 }) },
+               renderIcon: () => { return renderIcon(Delete) },
             },
          )
          return arr
@@ -86,4 +94,8 @@ function clickDelete(id){
    console.log("Delete clicked: "+id)
 }
 
+function renderIcon(icon, className = "") {
+   return h(NIcon, { component: icon, class: className, size: 20 })
+}
+
 </script>