app/components/settings/ColorSettings.tsx

@@ -1,29 +1,32 @@
-    import React from 'react';
+import React from 'react';
 
-    interface ColorSettingProps {
+// Define the props for the ColorSetting component
+interface ColorSettingProps {
     name: string; // The name to display in the <p> tag
     value: string; // The current color value
     setValue: (newColor: string) => void; // The method to update the state
     cssVariable: string; // The CSS variable name to set
-    }
+}
 
-    const ColorSetting: React.FC<ColorSettingProps> = ({ name, value, setValue, cssVariable }) => {
+// Functional component definition
+const ColorSetting: React.FC<ColorSettingProps> = ({ name, value, setValue, cssVariable }) => {
+    // Handler to change the color value
     const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const newColor = e.target.value;
-        setValue(newColor);
-        document.documentElement.style.setProperty(cssVariable, newColor);
+        const newColor = e.target.value; // Get the new color from the input
+        setValue(newColor); // Update the state with the new color
+        document.documentElement.style.setProperty(cssVariable, newColor); // Set the CSS variable
     };
 
     return (
-        <div className="settings-option">
-        <p>{name}</p>
-        <input
-            type="color"
-            value={value}
-            onChange={handleColorChange}
-        />
+        <div className="settings-option"> {/* Container for the color setting */}
+            <p>{name}</p> {/* Display the name */}
+            <input
+                type="color" // Input type for color picker
+                value={value} // Set the input value to the current color
+                onChange={handleColorChange} // Call the handler on change
+            />
         </div>
     );
-    };
+};
 
-    export default ColorSetting;
+export default ColorSetting;