DropDown comments

app/components/settings/DropDown.tsx

@@ -1,35 +1,39 @@
 import React from 'react';
 
+// Define the structure of each option in the dropdown
 interface Option {
-  value: string; // The actual value to be used
-  label: string; // The label to display for the option
+    value: string; // The actual value to be used
+    label: string; // The label to display for the option
 }
 
+// Define the props for the DropdownSetting component
 interface DropdownSettingProps {
-  label: string; // The label to display
-  value: string; // The current selected value
-  setValue: (newValue: string) => void; // The method to update the state
-  options: Option[]; // List of options for the dropdown
+    label: string; // The label to display above the dropdown
+    value: string; // The currently selected value
+    setValue: (newValue: string) => void; // Method to update the state with the new value
+    options: Option[]; // List of options for the dropdown
 }
 
+// Functional component definition
 const DropdownSetting: React.FC<DropdownSettingProps> = ({ label, value, setValue, options }) => {
-  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const newValue = e.target.value;
-    setValue(newValue);
-  };
+    // Handler to change the selected option
+    const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const newValue = e.target.value; // Get the new selected value
+        setValue(newValue); // Update the state with the new value
+    };
 
-  return (
-    <div className="settings-option">
-      <label>{label}</label>
-      <select value={value} onChange={handleSelectChange}>
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
+    return (
+        <div className="settings-option"> {/* Container for the dropdown setting */}
+            <label>{label}</label> {/* Display the label */}
+            <select value={value} onChange={handleSelectChange}> {/* Dropdown selection */}
+                {options.map((option) => ( // Map through options to create <option> elements
+                    <option key={option.value} value={option.value}>
+                        {option.label} {/* Display the label for the option */}
+                    </option>
+                ))}
+            </select>
+        </div>
+    );
 };
 
 export default DropdownSetting;