added grouping creator

components/LocationSelector/index.tsx

@@ -46,30 +46,42 @@ export default function LocationSelector({ provinces }: Props) {
   }, [amphurId]);
   return (
     <div className="flex flex-col gap-2">
-      <select
-        value={provinceId}
-        onChange={(e) => setProvince(e.currentTarget.value)}
-      >
-        <option value={undefined}>None</option>
-        {provinces.map((p) => (
-          <option key={p.id} value={p.id}>
-            {p.name}
-          </option>
-        ))}
-      </select>
-
-      {amphurList && (
+      <div className="flex gap-2">
+        จังหวัด:
         <select
-          value={amphurId}
-          onChange={(e) => setAmphur(e.currentTarget.value)}
+          value={provinceId}
+          className="flex-1"
+          onChange={(e) => setProvince(e.currentTarget.value)}
         >
-          <option value={undefined}>None</option>
-          {amphurList.map((a) => (
-            <option key={a.id} value={a.id}>
-              {a.name}
+          <option value={undefined} hidden>
+            None
+          </option>
+          {provinces.map((p) => (
+            <option key={p.id} value={p.id}>
+              {p.name}
             </option>
           ))}
         </select>
+      </div>
+
+      {amphurList && (
+        <div className="flex gap-2">
+          อำเภอ:
+          <select
+            value={amphurId}
+            className="flex-1"
+            onChange={(e) => setAmphur(e.currentTarget.value)}
+          >
+            <option value={undefined} hidden>
+              None
+            </option>
+            {amphurList.map((a) => (
+              <option key={a.id} value={a.id}>
+                {a.name}
+              </option>
+            ))}
+          </select>
+        </div>
       )}
     </div>
   );