From 09cd091ba2a7876ffecb9cc0706637b3e5f246a0 Mon Sep 17 00:00:00 2001
From: Muhammad Izza Alfiansyah <iansyah724@gmail.com>
Date: Tue, 9 Jul 2024 10:21:59 +0700
Subject: [PATCH] change ui kontrol page

---
 website/src/pages/Kontrol.tsx | 82 +++++++++++++++++------------------
 1 file changed, 40 insertions(+), 42 deletions(-)

diff --git a/website/src/pages/Kontrol.tsx b/website/src/pages/Kontrol.tsx
index 4afe65b..fda82fb 100644
--- a/website/src/pages/Kontrol.tsx
+++ b/website/src/pages/Kontrol.tsx
@@ -55,48 +55,46 @@ export default function () {
 
   return (
     <div class="space-y-5">
-      <div class="grid lg:grid-cols-2 gap-5">
-        <div class="bg-white shadow p-5 rounded">
-          <div class="text-xl">Kontrol Alarm</div>
-          <p class="text-sm">Matikan buzzer alarm setelah selang waktu</p>
-          <select
-            value={parseInt(req()?.buzzer_timer as any)}
-            onChange={(e) => {
-              console.log(e.currentTarget.value);
-              handleReqChange("buzzer_timer", e.currentTarget.value);
-              handleSubmit();
-            }}
-            class="input max-w-xl mt-3"
-          >
-            <option value="15">15 detik</option>
-            <option value="30">30 detik</option>
-            <option value="60">1 menit</option>
-            <option value={(60 * 2).toString()}>2 menit</option>
-            <option value={(60 * 5).toString()}>5 menit</option>
-          </select>
-        </div>
-        <div class="bg-white rounded p-5 shadow">
-          <div class="text-xl">Kontrol Alat</div>
-          <p class="text-sm">
-            Atur pengendalian suhu secara otomatis atau secara manual
-          </p>
-          <div class="mt-3">
-            <label class="inline-flex items-center cursor-pointer mt-2">
-              <input
-                type="checkbox"
-                checked={req()?.auto}
-                onChange={(e) => {
-                  handleReqChange("auto", e.currentTarget.checked);
-                  handleSubmit();
-                }}
-                class="sr-only peer"
-              />
-              <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-              <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
-                {req()?.auto ? "Otomatis" : "Manual"}
-              </span>
-            </label>
-          </div>
+      <div class="bg-white max-w-3xl shadow p-5 rounded">
+        <div class="text-xl">Kontrol Alarm</div>
+        <p class="text-sm">Matikan buzzer alarm setelah selang waktu</p>
+        <select
+          value={parseInt(req()?.buzzer_timer as any)}
+          onChange={(e) => {
+            console.log(e.currentTarget.value);
+            handleReqChange("buzzer_timer", e.currentTarget.value);
+            handleSubmit();
+          }}
+          class="input max-w-xl mt-3"
+        >
+          <option value="15">15 detik</option>
+          <option value="30">30 detik</option>
+          <option value="60">1 menit</option>
+          <option value={(60 * 2).toString()}>2 menit</option>
+          <option value={(60 * 5).toString()}>5 menit</option>
+        </select>
+      </div>
+      <div class="bg-white max-w-3xl rounded p-5 shadow">
+        <div class="text-xl">Kontrol Alat</div>
+        <p class="text-sm">
+          Atur pengendalian suhu secara otomatis atau secara manual
+        </p>
+        <div class="mt-3">
+          <label class="inline-flex items-center cursor-pointer mt-2">
+            <input
+              type="checkbox"
+              checked={req()?.auto}
+              onChange={(e) => {
+                handleReqChange("auto", e.currentTarget.checked);
+                handleSubmit();
+              }}
+              class="sr-only peer"
+            />
+            <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+            <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+              {req()?.auto ? "Otomatis" : "Manual"}
+            </span>
+          </label>
         </div>
       </div>
       <Show