@stacksjs/defaults 0.70.54

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

@@ -0,0 +1,253 @@
+<script>
+interface CacheFormProps {
+  dynamoHost?: string
+  dynamoKey?: string
+  dynamoSecret?: string
+  dynamoRegion?: string
+  dynamoTable?: string
+  memcachedPersistentId?: string
+  memcachedUsername?: string
+  memcachedPassword?: string
+  memcachedHost?: string
+  memcachedPort?: string
+  redisHost?: string
+  redisPort?: string
+  redisPassword?: string
+}
+
+const { dynamoHost = 'stacks.s3.amazonaws.com', dynamoKey = 'kldsanko3njksdasjfasdn2m', dynamoSecret = 'kldsanko3njksdasjfasdn2m', dynamoRegion = 'us-east-1', dynamoTable = 'cache', memcachedPersistentId = 'hj3jknkjh1kjh5', memcachedUsername = 'username', memcachedPassword = 'test@123', memcachedHost = 'stacks.s3.amazonaws.com', memcachedPort = '11211', redisHost = '127.0.0.1', redisPort = '6379', redisPassword = '' } = defineProps<CacheFormProps>()
+
+// DynamoDB settings
+  // Memcached settings
+  // Redis 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">
+              DynamoDB
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your dynamoDB 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="dynamo-host" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Host</label>
+                <div class="mt-2">
+                  <input
+                    id="dynamo-host"
+                    type="text"
+                    name="dynamo-host"
+                    value="{{ dynamoHost }}"
+                    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="dynamo-key" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Key</label>
+                <div class="mt-2">
+                  <input
+                    id="dynamo-key"
+                    type="text"
+                    name="dynamo-key"
+                    value="{{ dynamoKey }}"
+                    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="dynamo-secret" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Secret</label>
+                <div class="mt-2">
+                  <input
+                    id="dynamo-secret"
+                    type="password"
+                    name="dynamo-secret"
+                    value="{{ dynamoSecret }}"
+                    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="dynamo-region" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Region</label>
+                <div class="mt-2">
+                  <input
+                    id="dynamo-region"
+                    type="text"
+                    name="dynamo-region"
+                    value="{{ dynamoRegion }}"
+                    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="dynamo-table" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Table</label>
+                <div class="mt-2">
+                  <input
+                    id="dynamo-table"
+                    type="text"
+                    name="dynamo-table"
+                    value="{{ dynamoTable }}"
+                    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">
+              Memcached
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your memcached 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">
+              <div class="col-span-full">
+                <label for="memcached-persistent-id" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Persistent ID</label>
+                <div class="mt-2">
+                  <input
+                    id="memcached-persistent-id"
+                    type="text"
+                    name="memcached-persistent-id"
+                    value="{{ memcachedPersistentId }}"
+                    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="col-span-3">
+                <label for="memcached-username" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Username</label>
+                <div class="mt-2">
+                  <input
+                    id="memcached-username"
+                    type="text"
+                    name="memcached-username"
+                    value="{{ memcachedUsername }}"
+                    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="col-span-3">
+                <label for="memcached-password" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Password</label>
+                <div class="mt-2">
+                  <input
+                    id="memcached-password"
+                    type="password"
+                    name="memcached-password"
+                    value="{{ memcachedPassword }}"
+                    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="col-span-3">
+                <label for="memcached-host" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Host</label>
+                <div class="mt-2">
+                  <input
+                    id="memcached-host"
+                    type="text"
+                    name="memcached-host"
+                    value="{{ memcachedHost }}"
+                    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="col-span-3">
+                <label for="memcached-port" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Port</label>
+                <div class="mt-2">
+                  <input
+                    id="memcached-port"
+                    type="text"
+                    name="memcached-port"
+                    value="{{ memcachedPort }}"
+                    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">
+              Redis
+            </h2>
+            <p class="mt-1 leading-6 text-gray-600 text-sm">
+              Update your redis 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">
+              <div class="col-span-3">
+                <label for="redis-host" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Host</label>
+                <div class="mt-2">
+                  <input
+                    id="redis-host"
+                    type="text"
+                    name="redis-host"
+                    value="{{ redisHost }}"
+                    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="col-span-3">
+                <label for="redis-port" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Port</label>
+                <div class="mt-2">
+                  <input
+                    id="redis-port"
+                    type="text"
+                    name="redis-port"
+                    value="{{ redisPort }}"
+                    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="col-span-full">
+                <label for="redis-password" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Password</label>
+                <div class="mt-2">
+                  <input
+                    id="redis-password"
+                    type="password"
+                    name="redis-password"
+                    value="{{ redisPassword }}"
+                    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>