@stacksjs/defaults 0.70.54

package/resources/components/Dashboard/Settings/Forms/LibraryForm.stx

@@ -0,0 +1,389 @@
+<script>
+interface LibraryFormProps {
+  libraryName?: string
+  libraryOwner?: string
+  libraryRepository?: string
+  libraryLicense?: string
+  libraryAuthor?: string
+  libraryDefaultLanguage?: string
+  libraryContributors?: string
+  functionsName?: string
+  functionsDescription?: string
+  functionsKeywords?: string
+  functionsFiles?: string
+  stxComponentsName?: string
+  stxComponentsKeywords?: string
+  stxComponentsDescription?: string
+  stxComponentsTags?: string
+  webComponentsName?: string
+  webComponentsKeywords?: string
+  webComponentsDescription?: string
+  webComponentsTags?: string
+  libraryReleaseable?: boolean
+  functionsGenerateSourcemap?: boolean
+}
+
+const { libraryName = 'hello-world', libraryOwner = '@stacksjs', libraryRepository = 'stacksjs/stacks', libraryLicense = 'MIT', libraryAuthor = 'Chris Breuer', libraryDefaultLanguage = 'en', libraryContributors = 'Chris Breuer <chris@stacksjs.com>', functionsName = 'hello-world-fx', functionsDescription = 'Your function library description.', functionsKeywords = 'functions,composables,library,typescript,javascript', functionsFiles = 'counter,dark', stxComponentsName = 'hello-world-stx', stxComponentsKeywords = 'component,library,stx,vite,typescript,javascript', stxComponentsDescription = 'Your stx component library description', stxComponentsTags = [, webComponentsName = 'hello-world-elements', webComponentsKeywords = 'custom-elements,web-components,library,framework-agnostic,typescript,javascript', webComponentsDescription = 'Your framework agnostic web component library description.', webComponentsTags = [, libraryReleaseable = true, functionsGenerateSourcemap = true } = defineProps<LibraryFormProps>()
+
+{ names: 'HelloWorld, AppHelloWorld', description: 'The Hello World custom element, built via this framework.', attributes: 'name : greeting' }
+  ]
+
+    { names: 'HelloWorld, AppHelloWorld', description: 'The Hello World custom element, built via this framework.', attributes: 'name : greeting' }
+  ]
+</script>
+<form>
+    <main class="border-b border-gray-900/10">
+      <!-- Settings forms -->
+      <div class="divide-gray-900/10 divide-y">
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Library Base Configurations
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your Library Configuration
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-2">
+                <label for="library-name" class="block font-medium leading-6 text-gray-900 text-sm">Name</label>
+                <div class="mt-2">
+                  <input id="library-name" type="text" name="library-name" value="{{ libraryName }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-2">
+                <label for="library-owner" class="block font-medium leading-6 text-gray-900 text-sm">Owner</label>
+                <div class="mt-2">
+                  <input id="library-owner" type="text" name="library-owner" value="{{ libraryOwner }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-2">
+                <label for="library-repo" class="block font-medium leading-6 text-gray-900 text-sm">Repository</label>
+                <div class="mt-2">
+                  <input id="library-repo" type="text" name="library-repo" value="{{ libraryRepository }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-2">
+                <label for="library-license" class="block font-medium leading-6 text-gray-900 text-sm">License</label>
+                <div class="mt-2">
+                  <input id="library-license" type="text" name="library-license" value="{{ libraryLicense }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-2">
+                <label for="library-author" class="block font-medium leading-6 text-gray-900 text-sm">Author</label>
+                <div class="mt-2">
+                  <input id="library-author" type="text" name="library-author" value="{{ libraryAuthor }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-2">
+                <label for="library-lang" class="block font-medium leading-6 text-gray-900 text-sm">Default Language</label>
+                <div class="mt-2">
+                  <select id="library-lang" name="library-lang" class="block py-1.5 w-full sm:max-w-xs text-gray-900 sm:leading-6 sm:text-sm border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                    <option {{ libraryDefaultLanguage == 'en' ? 'selected' : '' }}>en</option>
+                  </select>
+                </div>
+              </div>
+
+              <div class="sm:col-span-full">
+                <label for="library-contributors" class="block font-medium leading-6 text-gray-900 text-sm">Contributors</label>
+                <div class="mt-2">
+                  <input id="library-contributors" type="text" name="library-contributors" value="{{ libraryContributors }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-2">
+                <label for="library-releaseable" class="block font-medium leading-6 text-gray-900 text-sm">Releaseable</label>
+                <div class="flex gap-x-4 items-center">
+                  <div class="mt-2">
+                    <button
+                      type="button"
+                      class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ libraryReleaseable ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
+                      role="switch"
+                      aria-checked="{{ libraryReleaseable ? 'true' : 'false' }}"
+                      data-action="toggle-releaseable"
+                    >
+                      <span class="sr-only">Releaseable</span>
+                      <span
+                        aria-hidden="true"
+                        class="pointer-events-none inline-block h-5 w-5 {{ libraryReleaseable ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                      ></span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Library Functions
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your Library Functions Configuration
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-2">
+                <label for="fn-name" class="block font-medium leading-6 text-gray-900 text-sm">Name</label>
+                <div class="mt-2">
+                  <input id="fn-name" type="text" name="fn-name" value="{{ functionsName }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-full">
+                <label for="fn-description" class="block font-medium leading-6 text-gray-900 text-sm">Description</label>
+                <div class="mt-2">
+                  <input id="fn-description" type="text" name="fn-description" value="{{ functionsDescription }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-full">
+                <label for="fn-keywords" class="block font-medium leading-6 text-gray-900 text-sm">Keywords</label>
+                <div class="mt-2">
+                  <input id="fn-keywords" type="text" name="fn-keywords" value="{{ functionsKeywords }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-2">
+                <label for="fn-sourcemap" class="block font-medium leading-6 text-gray-900 text-sm">Should Generate Sourcemap</label>
+                <div class="flex gap-x-4 items-center">
+                  <div class="mt-2">
+                    <button
+                      type="button"
+                      class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ functionsGenerateSourcemap ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
+                      role="switch"
+                      aria-checked="{{ functionsGenerateSourcemap ? 'true' : 'false' }}"
+                      data-action="toggle-sourcemap"
+                    >
+                      <span class="sr-only">Generate Sourcemap</span>
+                      <span
+                        aria-hidden="true"
+                        class="pointer-events-none inline-block h-5 w-5 {{ functionsGenerateSourcemap ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                      ></span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <div class="sm:col-span-full">
+                <label for="fn-files" class="block font-medium leading-6 text-gray-900 text-sm">Files</label>
+                <div class="mt-2">
+                  <input id="fn-files" type="text" name="fn-files" value="{{ functionsFiles }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Vue Components Configurations
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your Vue Components Configuration
+            </p>
+          </div>
+
+          <div class="md:col-span-full">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-2">
+                <label for="stx-name" class="block font-medium leading-6 text-gray-900 text-sm">Name</label>
+                <div class="mt-2">
+                  <input id="stx-name" type="text" name="stx-name" value="{{ stxComponentsName }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-4">
+                <label for="stx-keywords" class="block font-medium leading-6 text-gray-900 text-sm">Keywords</label>
+                <div class="mt-2">
+                  <input id="stx-keywords" type="text" name="stx-keywords" value="{{ stxComponentsKeywords }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-full">
+                <label for="stx-description" class="block font-medium leading-6 text-gray-900 text-sm">Description</label>
+                <div class="mt-2">
+                  <input id="stx-description" type="text" name="stx-description" value="{{ stxComponentsDescription }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-full">
+                <div class="flex justify-between mb-4">
+                  <div>
+                    <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+                      Vue Components Tags
+                    </h2>
+                    <p class="mt-1 leading-6 text-gray-600 text-sm">
+                      Update Vue Components Tags, click on the button to show modal to add new tag
+                    </p>
+                  </div>
+
+                  <div class="sm:flex-none mt-4 sm:ml-16 sm:mt-0">
+                    <button type="button" class="block px-3 py-2 font-semibold text-center text-sm text-white bg-gray-600 hover:bg-indigo-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm" data-action="add-vue-tag">
+                      Add Tag
+                    </button>
+                  </div>
+                </div>
+
+                <div class="flow-root mt-8">
+                  <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+                    <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+                      <table class="min-w-full divide-gray-300 divide-y">
+                        <thead>
+                          <tr>
+                            <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-0 font-semibold text-gray-900 text-left text-sm">Name(s)</th>
+                            <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">Attributes</th>
+                            <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-0"><span class="sr-only">Actions</span></th>
+                          </tr>
+                        </thead>
+                        <tbody class="bg-white divide-gray-200 divide-y">
+                          @foreach(stxComponentsTags as tag)
+                            <tr>
+                              <td class="py-5 sm:pl-0 text-sm whitespace-nowrap">
+                                <div class="flex items-center">
+                                  <div class="ml-4">
+                                    <div class="font-semibold text-gray-900">{{ tag.names }}</div>
+                                    <div class="mt-4 text-gray-500">{{ tag.description }}</div>
+                                  </div>
+                                </div>
+                              </td>
+                              <td class="px-3 py-5 text-gray-500 text-sm whitespace-nowrap">
+                                <div class="flex gap-x-4 items-center">
+                                  {<span class="font-semibold text-gray-900">{{ tag.attributes }}</span>},
+                                </div>
+                              </td>
+                              <td class="pl-3 pr-4 py-4 space-x-6 sm:pr-0 font-medium text-right text-sm">
+                                <a href="#" class="font-semibold text-gray-400 hover:text-gray-600" data-action="delete">Delete</a>
+                                <a href="#" class="font-semibold text-indigo-600 hover:text-indigo-900" data-action="edit">Edit</a>
+                              </td>
+                            </tr>
+                          @endforeach
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Web Components Configurations
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your Web Components Configuration
+            </p>
+          </div>
+
+          <div class="md:col-span-full">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-2">
+                <label for="wc-name" class="block font-medium leading-6 text-gray-900 text-sm">Name</label>
+                <div class="mt-2">
+                  <input id="wc-name" type="text" name="wc-name" value="{{ webComponentsName }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-4">
+                <label for="wc-keywords" class="block font-medium leading-6 text-gray-900 text-sm">Keywords</label>
+                <div class="mt-2">
+                  <input id="wc-keywords" type="text" name="wc-keywords" value="{{ webComponentsKeywords }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-full">
+                <label for="wc-description" class="block font-medium leading-6 text-gray-900 text-sm">Description</label>
+                <div class="mt-2">
+                  <input id="wc-description" type="text" name="wc-description" value="{{ webComponentsDescription }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-full">
+                <div class="flex justify-between mb-4">
+                  <div>
+                    <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+                      Web Components Tags
+                    </h2>
+                    <p class="mt-1 leading-6 text-gray-600 text-sm">
+                      Update Web Components Tags, click on the button to show modal to add new tag
+                    </p>
+                  </div>
+
+                  <div class="sm:flex-none mt-4 sm:ml-16 sm:mt-0">
+                    <button type="button" class="block px-3 py-2 font-semibold text-center text-sm text-white bg-gray-600 hover:bg-indigo-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm" data-action="add-wc-tag">
+                      Add Tag
+                    </button>
+                  </div>
+                </div>
+
+                <div class="flow-root mt-8">
+                  <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+                    <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+                      <table class="min-w-full divide-gray-300 divide-y">
+                        <thead>
+                          <tr>
+                            <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-0 font-semibold text-gray-900 text-left text-sm">Name(s)</th>
+                            <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">Attributes</th>
+                            <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-0"><span class="sr-only">Actions</span></th>
+                          </tr>
+                        </thead>
+                        <tbody class="bg-white divide-gray-200 divide-y">
+                          @foreach(webComponentsTags as tag)
+                            <tr>
+                              <td class="py-5 sm:pl-0 text-sm whitespace-nowrap">
+                                <div class="flex items-center">
+                                  <div class="ml-4">
+                                    <div class="font-semibold text-gray-900">{{ tag.names }}</div>
+                                    <div class="mt-4 text-gray-500">{{ tag.description }}</div>
+                                  </div>
+                                </div>
+                              </td>
+                              <td class="px-3 py-5 text-gray-500 text-sm whitespace-nowrap">
+                                <div class="flex gap-x-4 items-center">
+                                  {<span class="font-semibold text-gray-900">{{ tag.attributes }}</span>},
+                                </div>
+                              </td>
+                              <td class="pl-3 pr-4 py-4 space-x-6 sm:pr-0 font-medium text-right text-sm">
+                                <a href="#" class="font-semibold text-gray-400 hover:text-gray-600" data-action="delete">Delete</a>
+                                <a href="#" class="font-semibold text-indigo-600 hover:text-indigo-900" data-action="edit">Edit</a>
+                              </td>
+                            </tr>
+                          @endforeach
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <div class="flex gap-x-6 items-center justify-end mt-6">
+      <button type="button" class="font-semibold leading-6 text-gray-900 text-sm">
+        Cancel
+      </button>
+      <button
+        type="submit"
+        class="px-3 py-2 font-semibold text-sm text-white bg-indigo-600 hover:bg-indigo-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm"
+      >
+        Save
+      </button>
+    </div>
+  </form>

package/resources/components/Dashboard/Settings/Forms/QueueForm.stx

@@ -0,0 +1,219 @@
+<script>
+interface QueueFormProps {
+  defaultQueue?: string
+  databaseTable?: string
+  databaseQueue?: string
+  redisConnection?: string
+  redisQueue?: string
+  sqsKey?: string
+  sqsSecret?: string
+  sqsPrefix?: string
+  sqsSuffix?: string
+  sqsQueue?: string
+  sqsRegion?: string
+}
+
+const { defaultQueue = 'sync', databaseTable = 'jobs', databaseQueue = 'default', redisConnection = 'default', redisQueue = 'default', sqsKey = '', sqsSecret = '', sqsPrefix = '', sqsSuffix = '', sqsQueue = 'default', sqsRegion = 'us-east-1' } = defineProps<QueueFormProps>()
+</script>
+<form>
+    <main class="border-b border-gray-900/10">
+      <!-- Settings forms -->
+      <div class="divide-gray-900/10 divide-y">
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Default Queue Settings
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your default Queue settings
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-3">
+                <label for="type" class="block font-medium leading-6 text-gray-900 text-sm">Default</label>
+                <div class="mt-2">
+                  <select id="type" name="type" class="block py-1.5 w-full sm:max-w-xs text-gray-900 sm:leading-6 sm:text-sm border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                    <option {{ defaultQueue == 'sync' ? 'selected' : '' }}>sync</option>
+                    <option {{ defaultQueue == 'database' ? 'selected' : '' }}>database</option>
+                    <option {{ defaultQueue == 'redis' ? 'selected' : '' }}>redis</option>
+                    <option {{ defaultQueue == 'sqs' ? 'selected' : '' }}>sqs</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Sync Queue
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your Sync Queue configurations
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-3">
+                <label for="sync-driver" class="block font-medium leading-6 text-gray-900 text-sm">Driver</label>
+                <div class="mt-2">
+                  <input id="sync-driver" type="text" name="sync-driver" value="sync" disabled class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 bg-neutral-50 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm cursor-not-allowed">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Database Queue
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your database queue configurations
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-3">
+                <label for="db-driver" class="block font-medium leading-6 text-gray-900 text-sm">Driver</label>
+                <div class="mt-2">
+                  <input id="db-driver" type="text" name="db-driver" value="database" disabled class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 bg-neutral-50 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm cursor-not-allowed">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="db-table" class="block font-medium leading-6 text-gray-900 text-sm">Table</label>
+                <div class="mt-2">
+                  <input id="db-table" type="text" name="db-table" value="{{ databaseTable }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="db-queue" class="block font-medium leading-6 text-gray-900 text-sm">Queue</label>
+                <div class="mt-2">
+                  <input id="db-queue" type="text" name="db-queue" value="{{ databaseQueue }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              Redis Queue
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your redis queue configurations
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-3">
+                <label for="redis-driver" class="block font-medium leading-6 text-gray-900 text-sm">Driver</label>
+                <div class="mt-2">
+                  <input id="redis-driver" type="text" name="redis-driver" value="redis" disabled class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 bg-neutral-50 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm cursor-not-allowed">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="redis-connection" class="block font-medium leading-6 text-gray-900 text-sm">Connection</label>
+                <div class="mt-2">
+                  <input id="redis-connection" type="text" name="redis-connection" value="{{ redisConnection }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="redis-queue" class="block font-medium leading-6 text-gray-900 text-sm">Queue</label>
+                <div class="mt-2">
+                  <input id="redis-queue" type="text" name="redis-queue" value="{{ redisQueue }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              SQS Queue
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your sqs queue configurations
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
+              <div class="sm:col-span-3">
+                <label for="sqs-driver" class="block font-medium leading-6 text-gray-900 text-sm">Driver</label>
+                <div class="mt-2">
+                  <input id="sqs-driver" type="text" name="sqs-driver" value="sqs" disabled class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 bg-neutral-50 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm cursor-not-allowed">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="sqs-key" class="block font-medium leading-6 text-gray-900 text-sm">Key</label>
+                <div class="mt-2">
+                  <input id="sqs-key" type="text" name="sqs-key" value="{{ sqsKey }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="sqs-secret" class="block font-medium leading-6 text-gray-900 text-sm">Secret</label>
+                <div class="mt-2">
+                  <input id="sqs-secret" type="password" name="sqs-secret" value="{{ sqsSecret }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="sqs-prefix" class="block font-medium leading-6 text-gray-900 text-sm">Prefix</label>
+                <div class="mt-2">
+                  <input id="sqs-prefix" type="text" name="sqs-prefix" value="{{ sqsPrefix }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="sqs-suffix" class="block font-medium leading-6 text-gray-900 text-sm">Suffix</label>
+                <div class="mt-2">
+                  <input id="sqs-suffix" type="text" name="sqs-suffix" value="{{ sqsSuffix }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="sqs-queue" class="block font-medium leading-6 text-gray-900 text-sm">Queue</label>
+                <div class="mt-2">
+                  <input id="sqs-queue" type="text" name="sqs-queue" value="{{ sqsQueue }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="sqs-region" class="block font-medium leading-6 text-gray-900 text-sm">Region</label>
+                <div class="mt-2">
+                  <input id="sqs-region" type="text" name="sqs-region" value="{{ sqsRegion }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <div class="flex gap-x-6 items-center justify-end mt-6">
+      <button type="button" class="font-semibold leading-6 text-gray-900 text-sm">
+        Cancel
+      </button>
+      <button
+        type="submit"
+        class="px-3 py-2 font-semibold text-sm text-white bg-indigo-600 hover:bg-indigo-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm"
+      >
+        Save
+      </button>
+    </div>
+  </form>