modified: .gitignore

resources/js/Components/StartButton.vue

@@ -1,5 +1,6 @@
 <script setup>
-import {NButton, NP, NFlex, NIcon} from "naive-ui";
+import {NButton, NP, NFlex, NTag, NIcon} from "naive-ui";
+import {TbLock} from "vue-icons-plus/tb"
 import {Link} from "@inertiajs/vue3";
 import {computed, h} from "vue";
 
@@ -8,6 +9,14 @@ const props = defineProps({
     type: String,
     default: ''
   },
+  lock: {
+    type: Boolean,
+    default: false
+  },
+  lockMessage: {
+    type: String,
+    default: null
+  },
   description: {
     type: String,
     default: ''
@@ -45,31 +54,54 @@ const hasIcon = computed(() => props.icon !== null)
 const isLink = computed(() => props.tag === 'link')
 
 const onClick = () => {
-    if (isLink.value) return
+    if (isLink.value || props.lock) return
 
     emits('click')
 }
+
+const lockTag = computed(() => {
+  if (props.lock) return 'button'
+  return props.tag
+})
 </script>
 
 <template>
-  <NButton :tag="tag"
+  <div class="relative overflow-hidden w-full rounded-md" style="background-color: rgb(18, 18, 22);">
+      <NButton :tag="lockTag"
            :href="href"
            :theme-overrides="buttonThemeOverride"
            @click="onClick"
            size="large"
            block
            class="justify-start! text-left!"
-  >
-    <template v-if="hasIcon" #icon>
-      <component :is="icon" v-if="icon" />
-    </template>
-    <NFlex vertical :size="2" :class="hasIcon ? 'ml-2' : ''">
-      {{ title }}
-      <NP :theme-overrides="pThemeOverride" depth="3">
-        {{ description }}
-      </NP>
-    </NFlex>
-  </NButton>
+           :disabled="lock"
+    >
+      <template v-if="hasIcon" #icon>
+        <component :is="icon" v-if="icon" />
+      </template>
+      <NFlex justify="space-between" align="center">
+        <NFlex vertical :size="2" :class="hasIcon ? 'ml-2' : ''">
+          {{ title }}
+          <NP :theme-overrides="pThemeOverride" depth="3">
+            {{ description }}
+          </NP>
+        </NFlex>
+      </NFlex>
+    </NButton>
+
+    <div v-if="lock" class="absolute inset-0 flex items-center justify-center backdrop-blur-[1.5px]" style="background-color: var(--n-scrollbar-color);"></div>
+
+    <div v-if="lock" class="absolute inset-0 flex items-center justify-center">
+      <NFlex>
+        <NTag :bordered="false" round>
+          <template #icon>
+            <NIcon :component="TbLock" size="16" />
+          </template>
+          {{ lockMessage }}
+        </NTag>
+      </NFlex>
+    </div>
+  </div>
 </template>
 
 <style scoped>