Add generate API, Prototype for developer, Clean data

components/utils/DependentDropdown.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useState, ChangeEvent, useEffect } from 'react';
+
+export interface DropdownData {
+  [key: string]: string[];
+}
+
+interface DependentDropdownProps {
+  data: DropdownData;
+  name1: string;                    // เพิ่มมาเพื่อใช้กับ Form Action
+  name2: string;                    // เพิ่มมาเพื่อใช้กับ Form Action
+  label1?: string;
+  label2?: string;
+  placeholder1?: string;
+  placeholder2?: string;
+  onSelectChange?: (mainValue: string, subValue: string) => void;
+}
+
+export default function DependentDropdown({
+  data,
+  name1,
+  name2,
+  label1 = 'เลือกตัวเลือกหลัก:',
+  label2 = 'เลือกตัวเลือกย่อย:',
+  placeholder1 = '-- กรุณาเลือก --',
+  placeholder2 = '-- กรุณาเลือกตัวเลือกหลักก่อน --',
+  onSelectChange,
+}: DependentDropdownProps) {
+  const [mainSelection, setMainSelection] = useState<string>('');
+  const [subSelection, setSubSelection] = useState<string>('');
+
+  const handleMainChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value;
+    setMainSelection(value);
+    setSubSelection(''); 
+  };
+
+  const handleSubChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    setSubSelection(e.target.value);
+  };
+
+  useEffect(() => {
+    if (onSelectChange) {
+      onSelectChange(mainSelection, subSelection);
+    }
+  }, [mainSelection, subSelection, onSelectChange]);
+
+  const subOptions = mainSelection ? data[mainSelection] : [];
+
+  return (
+    <div className="space-y-4 w-full">
+      {/* Dropdown ที่ 1 */}
+      <div className="flex flex-col gap-1.5">
+        <label className="text-sm font-medium text-gray-700">{label1}</label>
+        <select
+          name={name1} // ใส่ name ตรงนี้เพื่อให้ Server Action ดึงค่าได้
+          value={mainSelection}
+          onChange={handleMainChange}
+          required
+          className="w-full p-2 border border-gray-300 rounded-md bg-white text-black text-sm"
+        >
+          <option value="">{placeholder1}</option>
+          {Object.keys(data).map((key) => (
+            <option key={key} value={key}>{key}</option>
+          ))}
+        </select>
+      </div>
+
+      {/* Dropdown ที่ 2 */}
+      <div className="flex flex-col gap-1.5">
+        <label className="text-sm font-medium text-gray-700">{label2}</label>
+        <select
+          name={name2} // ใส่ name ตรงนี้เพื่อให้ Server Action ดึงค่าได้
+          value={subSelection}
+          onChange={handleSubChange}
+          disabled={!mainSelection}
+          required
+          className="w-full p-2 border border-gray-300 rounded-md bg-white disabled:bg-gray-100 text-black text-sm"
+        >
+          <option value="">
+            {mainSelection ? '-- กรุณาเลือก --' : placeholder2}
+          </option>
+          {subOptions.map((item) => (
+            <option key={item} value={item}>{item}</option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}