feat: add cli form page

Author: Adelino Ngomacha

libs/components/Dashboard/Settings/Forms/CLIForm.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <form>
+    <div class="space-y-12">
+      <div class="border-b border-gray-900/10 pb-12">
+        <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+          <div class="sm:col-span-full">
+            <label for="default-config" class="block text-sm font-medium leading-6 text-gray-900">Deploy</label>
+            <div class="mt-2">
+              <!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
+              <button
+                type="button"
+                class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-indigo-600 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
+                role="switch" aria-checked="false"
+              >
+                <span class="sr-only">Deploy</span>
+                <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
+                <span
+                  aria-hidden="true"
+                  class="pointer-events-none inline-block h-5 w-5 translate-x-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                />
+              </button>
+            </div>
+          </div>
+          <div class="sm:col-span-3">
+            <label for="name" class="block text-sm font-medium leading-6 text-gray-900">Name</label>
+            <div class="mt-2">
+              <input id="name" type="text" name="name" placeholder="My Custom CLI" value="My Custom CLI" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+            </div>
+          </div>
+          <div class="sm:col-span-full">
+            <label for="description" class="block text-sm font-medium leading-6 text-gray-900">Description</label>
+            <div class="mt-2">
+              <textarea id="description" name="description" rows="3" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">My Custom CLI</textarea>
+            </div>
+          </div>
+          <div class="sm:col-span-3">
+            <label for="command" class="block text-sm font-medium leading-6 text-gray-900">Command</label>
+            <div class="mt-2">
+              <input id="command" type="text" name="command" placeholder="my-custom-cli" value="my-custom-cli" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-6 flex items-center justify-end gap-x-6">
+      <button type="button" class="text-sm font-semibold leading-6 text-gray-900">
+        Cancel
+      </button>
+      <Button
+        type="submit"
+        class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+      >
+        Save
+      </Button>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+
+</style>

libs/components/Dashboard/Settings/SettingsFormManager.vue

@@ -3,6 +3,7 @@ import AIForm from './Forms/AIForm.vue'
 import AnalyticsForm from './Forms/AnalyticsForm.vue'
 import AppForm from './Forms/AppForm.vue'
 import CacheForm from './Forms/CacheForm.vue'
+import CliForm from './Forms/CLIForm.vue'
 
 const props = defineProps({
   name: String,
@@ -116,6 +117,7 @@ const pageTitle = computed < String > (() => options.find(option => option.key =
         <template v-else-if="name === 'analytics'"><AnalyticsForm /></template>
         <template v-else-if="name === 'app'"><AppForm /></template>
         <template v-else-if="name === 'cache'"><CacheForm /></template>
+        <template v-else-if="name === 'cli'"><CliForm /></template>
         <template v-else>
           <div class="text-center">
             <div class="i-heroicons-cog-8-tooth text-gray-400 w-12 h-12 dark:text-gray-200 transition-all duration-150 ease-in-out" />

libs/components/Dashboard/SettingsSidebar.vue

@@ -53,7 +53,7 @@
         <li>
           <RouterLink to="cli" class="sidebar-links group flex items-center justify-between">
             <div class="flex items-center gap-x-2">
-              <div class="i-heroicons-square-3-stack-3d text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
+              <div class="i-heroicons-command-line text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
               CLI
             </div>
             <div class="i-heroicons-chevron-right text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out self-end" />