@stacksjs/defaults 0.70.54

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

@@ -0,0 +1,307 @@
+<script>
+interface DNSFormProps {
+  nameservers?: string
+  aRecords?: string
+}
+
+const { nameservers = '', aRecords = [ } = defineProps<DNSFormProps>()
+
+// A Records data
+    { name: 'localhost', address: '10.0.0.1', ttl: 300 },
+    { name: 'www', address: '@', ttl: 300 }
+  ]
+</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">
+              Nameservers
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your Name servers 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 sm:max-w-xl">
+              <div class="sm:col-span-full">
+                <label for="nameservers" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100">Nameservers</label>
+                <div class="mt-2">
+                  <input
+                    id="nameservers"
+                    type="text"
+                    name="nameservers"
+                    value="{{ nameservers }}"
+                    class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm"
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              A Records
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your A Records.
+            </p>
+          </div>
+
+          <div>
+            <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 uppercase">
+                    Name
+                  </th>
+                  <th scope="col" class="hidden lg:table-cell px-3 py-3.5 font-semibold text-gray-900 text-left text-sm uppercase">
+                    Address
+                  </th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm uppercase">
+                    ttl
+                  </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(aRecords as record)
+                  <tr>
+                    <td class="pl-4 pr-3 py-4 sm:pl-0 max-w-0 w-full sm:max-w-none sm:w-auto font-medium text-gray-900 text-sm">
+                      {{ record.name }}
+                      <dl class="lg:hidden font-normal">
+                        <dt class="sr-only">Address</dt>
+                        <dd class="mt-1 text-gray-700 truncate">{{ record.address }}</dd>
+                        <dt class="sm:hidden sr-only">TTL</dt>
+                        <dd class="sm:hidden mt-1 text-gray-500 truncate">{{ record.ttl }}</dd>
+                      </dl>
+                    </td>
+                    <td class="hidden lg:table-cell px-3 py-4 text-gray-500 text-sm">{{ record.address }}</td>
+                    <td class="hidden sm:table-cell px-3 py-4 text-gray-500 text-sm">{{ record.ttl }}</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<span class="sr-only">, {{ record.name }}</span></a>
+                      <a href="#" class="font-semibold text-indigo-600 hover:text-indigo-900" data-action="edit">Edit<span class="sr-only">, {{ record.name }}</span></a>
+                    </td>
+                  </tr>
+                @endforeach
+                <tr>
+                  <td class="pl-4 pr-3 py-4 sm:pl-0 max-w-0 w-full sm:max-w-none sm:w-auto font-medium text-gray-900 text-sm">
+                    <input
+                      type="text"
+                      name="a-record-name"
+                      value=""
+                      class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm"
+                    >
+                  </td>
+                  <td class="hidden lg:table-cell px-3 py-4 text-gray-500 text-sm">
+                    <input
+                      type="text"
+                      name="a-record-address"
+                      value=""
+                      class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm"
+                    >
+                  </td>
+                  <td class="hidden sm:table-cell px-3 py-4 text-gray-500 text-sm">
+                    <input
+                      type="text"
+                      name="a-record-ttl"
+                      placeholder="auto"
+                      value=""
+                      class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm"
+                    >
+                  </td>
+                  <td class="pl-3 pr-4 py-4 space-x-6 sm:pr-0 font-medium text-right text-sm">
+                    <button type="button" class="font-semibold text-indigo-600 hover:text-indigo-900" data-action="add-a-record">
+                      Add
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              AAAA Records
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your AAAA Records.
+            </p>
+          </div>
+
+          <div>
+            <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 uppercase">Name</th>
+                  <th scope="col" class="hidden lg:table-cell px-3 py-3.5 font-semibold text-gray-900 text-left text-sm uppercase">Address</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm uppercase">ttl</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">
+                <tr>
+                  <td class="pl-4 pr-3 py-4 sm:pl-0 max-w-0 w-full sm:max-w-none sm:w-auto font-medium text-gray-900 text-sm">
+                    <input type="text" name="aaaa-record-name" value="" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
+                  </td>
+                  <td class="hidden lg:table-cell px-3 py-4 text-gray-500 text-sm">
+                    <input type="text" name="aaaa-record-address" value="" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
+                  </td>
+                  <td class="hidden sm:table-cell px-3 py-4 text-gray-500 text-sm">
+                    <input type="text" name="aaaa-record-ttl" placeholder="auto" value="" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
+                  </td>
+                  <td class="pl-3 pr-4 py-4 space-x-6 sm:pr-0 font-medium text-right text-sm">
+                    <button type="button" class="font-semibold text-indigo-600 hover:text-indigo-900" data-action="add-aaaa-record">Add</button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              CNAME Records
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your CNAME Records.
+            </p>
+          </div>
+
+          <div>
+            <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 uppercase">Name</th>
+                  <th scope="col" class="hidden lg:table-cell px-3 py-3.5 font-semibold text-gray-900 text-left text-sm uppercase">Target</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm uppercase">ttl</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">
+                <tr>
+                  <td class="pl-4 pr-3 py-4 sm:pl-0 max-w-0 w-full sm:max-w-none sm:w-auto font-medium text-gray-900 text-sm">
+                    <input type="text" name="cname-record-name" value="" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
+                  </td>
+                  <td class="hidden lg:table-cell px-3 py-4 text-gray-500 text-sm">
+                    <input type="text" name="cname-record-target" value="" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
+                  </td>
+                  <td class="hidden sm:table-cell px-3 py-4 text-gray-500 text-sm">
+                    <input type="text" name="cname-record-ttl" placeholder="auto" value="" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
+                  </td>
+                  <td class="pl-3 pr-4 py-4 space-x-6 sm:pr-0 font-medium text-right text-sm">
+                    <button type="button" class="font-semibold text-indigo-600 hover:text-indigo-900" data-action="add-cname-record">Add</button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              MX Records
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your MX Records.
+            </p>
+          </div>
+
+          <div>
+            <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 uppercase">Name</th>
+                  <th scope="col" class="hidden lg:table-cell px-3 py-3.5 font-semibold text-gray-900 text-left text-sm uppercase">Mail Server</th>
+                  <th scope="col" class="hidden lg:table-cell px-3 py-3.5 font-semibold text-gray-900 text-left text-sm uppercase">ttl</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm uppercase">Priority</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">
+                <tr>
+                  <td class="pl-4 pr-3 py-4 sm:pl-0 max-w-0 w-full sm:max-w-none sm:w-auto font-medium text-gray-900 text-sm">
+                    <input type="text" name="mx-record-name" value="" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
+                  </td>
+                  <td class="hidden lg:table-cell px-3 py-4 text-gray-500 text-sm">
+                    <input type="text" name="mx-record-server" value="" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
+                  </td>
+                  <td class="hidden sm:table-cell px-3 py-4 text-gray-500 text-sm">
+                    <input type="text" name="mx-record-ttl" placeholder="auto" value="" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
+                  </td>
+                  <td class="hidden sm:table-cell px-3 py-4 text-gray-500 text-sm">
+                    <input type="text" name="mx-record-priority" value="" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
+                  </td>
+                  <td class="pl-3 pr-4 py-4 space-x-6 sm:pr-0 font-medium text-right text-sm">
+                    <button type="button" class="font-semibold text-indigo-600 hover:text-indigo-900" data-action="add-mx-record">Add</button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div class="grid gap-x-8 gap-y-10 grid-cols-1 py-16 max-w-7xl">
+          <div>
+            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+              TXT Records
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your TXT Records.
+            </p>
+          </div>
+
+          <div>
+            <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 uppercase">Name</th>
+                  <th scope="col" class="hidden lg:table-cell px-3 py-3.5 font-semibold text-gray-900 text-left text-sm uppercase">Content</th>
+                  <th scope="col" class="hidden lg:table-cell px-3 py-3.5 font-semibold text-gray-900 text-left text-sm uppercase">ttl</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">
+                <tr>
+                  <td class="pl-4 pr-3 py-4 sm:pl-0 max-w-0 w-full sm:max-w-none sm:w-auto font-medium text-gray-900 text-sm">
+                    <input type="text" name="txt-record-name" value="" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
+                  </td>
+                  <td class="hidden lg:table-cell px-3 py-4 text-gray-500 text-sm">
+                    <input type="text" name="txt-record-content" value="" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
+                  </td>
+                  <td class="hidden sm:table-cell px-3 py-4 text-gray-500 text-sm">
+                    <input type="text" name="txt-record-ttl" placeholder="auto" value="" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
+                  </td>
+                  <td class="pl-3 pr-4 py-4 space-x-6 sm:pr-0 font-medium text-right text-sm">
+                    <button type="button" class="font-semibold text-indigo-600 hover:text-indigo-900" data-action="add-txt-record">Add</button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </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/DatabaseForm.stx

@@ -0,0 +1,168 @@
+<script>
+interface DatabaseFormProps {
+  mysqlHost?: string
+  mysqlPort?: string
+  mysqlUsername?: string
+  mysqlPassword?: string
+  mysqlDatabase?: string
+  sqliteHost?: string
+  sqlitePrefix?: string
+  sqliteDatabase?: string
+}
+
+const { mysqlHost = 'stacks', mysqlPort = '3306', mysqlUsername = 'root', mysqlPassword = '', mysqlDatabase = '', sqliteHost = '127.0.0.1', sqlitePrefix = 'sqlite', sqliteDatabase = 'stacks' } = defineProps<DatabaseFormProps>()
+
+// MySQL settings
+  // SQLite settings
+</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">
+              MySQL
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your MySQL driver 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 sm:max-w-xl">
+              <div class="sm:col-span-3">
+                <label for="mysql-host" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100">Host</label>
+                <div class="mt-2">
+                  <input
+                    id="mysql-host"
+                    type="text"
+                    name="mysql-host"
+                    value="{{ mysqlHost }}"
+                    class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm"
+                  >
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="mysql-port" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100">Port</label>
+                <div class="mt-2">
+                  <input
+                    id="mysql-port"
+                    type="text"
+                    name="mysql-port"
+                    value="{{ mysqlPort }}"
+                    class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm"
+                  >
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="mysql-username" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100">Username</label>
+                <div class="mt-2">
+                  <input
+                    id="mysql-username"
+                    type="text"
+                    name="mysql-username"
+                    value="{{ mysqlUsername }}"
+                    class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm"
+                  >
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="mysql-password" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100">Password</label>
+                <div class="mt-2">
+                  <input
+                    id="mysql-password"
+                    type="password"
+                    name="mysql-password"
+                    value="{{ mysqlPassword }}"
+                    class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm"
+                  >
+                </div>
+              </div>
+
+              <div class="sm:col-span-full">
+                <label for="mysql-database" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100">Database</label>
+                <div class="mt-2">
+                  <input
+                    id="mysql-database"
+                    type="text"
+                    name="mysql-database"
+                    value="{{ mysqlDatabase }}"
+                    class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 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">
+              SQLite
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your SQLite driver 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 sm:max-w-xl">
+              <div class="sm:col-span-3">
+                <label for="sqlite-host" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100">Host</label>
+                <div class="mt-2">
+                  <input
+                    id="sqlite-host"
+                    type="text"
+                    name="sqlite-host"
+                    value="{{ sqliteHost }}"
+                    class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm"
+                  >
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="sqlite-prefix" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100">Prefix</label>
+                <div class="mt-2">
+                  <input
+                    id="sqlite-prefix"
+                    type="text"
+                    name="sqlite-prefix"
+                    value="{{ sqlitePrefix }}"
+                    class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm"
+                  >
+                </div>
+              </div>
+
+              <div class="sm:col-span-full">
+                <label for="sqlite-database" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100">Database</label>
+                <div class="mt-2">
+                  <input
+                    id="sqlite-database"
+                    type="text"
+                    name="sqlite-database"
+                    value="{{ sqliteDatabase }}"
+                    class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 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>

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

@@ -0,0 +1,100 @@
+<script>
+interface EmailFormProps {
+  fromName?: string
+  fromAddress?: string
+  mailboxes?: string
+  url?: string
+  charset?: string
+  scanServer?: boolean
+}
+
+const { fromName = 'Stacks', fromAddress = 'no-reply@stacksjs.com', mailboxes = 'chris@stacksjs.com,blake@stacksjs.com,glenn@stacksjs.com', url = 'http:, charset = 'UTF-8', scanServer = true } = defineProps<EmailFormProps>()
+</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 Email Settings
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your default email 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="from" class="block font-medium leading-6 text-gray-900 text-sm">From Name</label>
+                <div class="mt-2">
+                  <input id="from" type="text" name="from" value="{{ fromName }}" 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="address" class="block font-medium leading-6 text-gray-900 text-sm">From Address</label>
+                <div class="mt-2">
+                  <input id="address" type="text" name="address" value="{{ fromAddress }}" 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="mailboxes" class="block font-medium leading-6 text-gray-900 text-sm">Mailboxes</label>
+                <div class="mt-2">
+                  <input id="mailboxes" type="text" name="mailboxes" value="{{ mailboxes }}" 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="url" class="block font-medium leading-6 text-gray-900 text-sm">Url</label>
+                <div class="mt-2">
+                  <input id="url" type="text" name="url" value="{{ url }}" 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="charset" class="block font-medium leading-6 text-gray-900 text-sm">Charset</label>
+                <div class="mt-2">
+                  <select id="charset" name="charset" 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 {{ charset == 'UTF-8' ? 'selected' : '' }}>UTF-8</option>
+                  </select>
+                </div>
+              </div>
+
+              <div class="sm:col-span-2">
+                <label for="scan-server" class="block font-medium leading-6 text-gray-900 text-sm">Scan Server</label>
+                <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 {{ scanServer ? '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="{{ scanServer ? 'true' : 'false' }}"
+                    data-action="toggle-scan-server"
+                  >
+                    <span class="sr-only">Scan Server</span>
+                    <span
+                      aria-hidden="true"
+                      class="pointer-events-none inline-block h-5 w-5 {{ scanServer ? '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>
+    </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>