From c672bf1e35c46d043b4b08d39771f528181a500a Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Fri, 11 Oct 2024 09:30:03 +0200
Subject: [PATCH] DropDownTheme comments

---
 app/components/settings/DropDownTheme.tsx | 25 ++++++++++++-----------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/app/components/settings/DropDownTheme.tsx b/app/components/settings/DropDownTheme.tsx
index 793a19d..e065989 100644
--- a/app/components/settings/DropDownTheme.tsx
+++ b/app/components/settings/DropDownTheme.tsx
@@ -2,9 +2,10 @@
 import React from 'react';
 
 const ThemeDropdown: React.FC<{
-  selectedTheme: string;
-  setSelectedTheme: (theme: string) => void;
+  selectedTheme: string; // Currently selected theme
+  setSelectedTheme: (theme: string) => void; // Function to update the selected theme
 }> = ({ selectedTheme, setSelectedTheme }) => {
+  // Define available theme options
   const themeOptions = [
     { value: 'IOMARKET', label: 'IOMARKET' },
     { value: 'WHITE', label: 'WHITE' },
@@ -14,22 +15,22 @@ const ThemeDropdown: React.FC<{
   ];
 
   return (
-    <div className="settings-option">
-      <p>Select Theme</p>
+    <div className="settings-option"> {/* Container for the dropdown */}
+      <p>Select Theme</p> {/* Label for the dropdown */}
       <select
-        value={selectedTheme}
-        onChange={(e) => {
-          const theme = e.target.value;
+        value={selectedTheme} // Current selected theme
+        onChange={(e) => { // Handler for dropdown changes
+          const theme = e.target.value; // Get the selected value
           if (theme !== 'default' && typeof localStorage !== 'undefined') {
-            setSelectedTheme(theme);
-            localStorage.setItem('selectedTheme', theme);
+            setSelectedTheme(theme); // Update the selected theme state
+            localStorage.setItem('selectedTheme', theme); // Save the theme to localStorage
           }
         }}
       >
-        <option value="default">Select your style...</option>
-        {themeOptions.map((option) => (
+        <option value="default">Select your style...</option> {/* Default option */}
+        {themeOptions.map((option) => ( // Map through theme options to create <option> elements
           <option key={option.value} value={option.value}>
-            {option.label}
+            {option.label} {/* Display the label for the option */}
           </option>
         ))}
       </select>