DropDown comments

app/components/settings/DropDown.tsx

@@ -1,30 +1,34 @@
 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
 }
 
+// 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
+    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 }) => {
+    // Handler to change the selected option
     const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const newValue = e.target.value;
-    setValue(newValue);
+        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) => (
+        <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}
+                        {option.label} {/* Display the label for the option */}
                     </option>
                 ))}
             </select>