Add icon for custom themes in themes dropdown

Author: wajeshubham

components/editor/SnippngCodeArea.tsx

@@ -119,7 +119,7 @@ const SnippngCodeArea: React.FC<Props> = ({ underConstructionTheme }) => {
   /**
    *
    * @returns editor compatible theme object
-   * @description  Function is responsible for constructing theme based on if it is a
+   * @description  Function is responsible for constructing theme based on if it is
    * - `predefined` - theme in the `@uiw/codemirror-themes-all` library
    * - `localCustom` - Build by user and saved locally
    * - `underConstructionTheme` - user is currently constructing/configuring new theme

components/editor/SnippngControlHeader.tsx

@@ -2,16 +2,16 @@ import { useSnippngEditor } from "@/context/SnippngEditorContext";
 import { useToast } from "@/context/ToastContext";
 import { ColorPicker } from "@/lib/color-picker";
 import {
-  defaultEditorConfig,
   DEFAULT_RANGES,
   DOWNLOAD_OPTIONS,
-  getAvailableThemes,
   LANGUAGES,
+  defaultEditorConfig,
+  getAvailableThemes,
   predefinedConfig,
 } from "@/lib/constants";
 import { ImagePicker } from "@/lib/image-picker";
 import { SelectOptionInterface } from "@/types";
-import { getEditorWrapperBg, LocalStorage } from "@/utils";
+import { getEditorWrapperBg } from "@/utils";
 import { Menu, Transition } from "@headlessui/react";
 import {
   ArrowPathIcon,
@@ -21,6 +21,7 @@ import {
   Cog6ToothIcon,
   CommandLineIcon,
   DocumentDuplicateIcon,
+  FireIcon,
   PhotoIcon,
   SparklesIcon,
 } from "@heroicons/react/24/outline";
@@ -129,7 +130,16 @@ const SnippngControlHeader: React.FC<{
               }
               handleConfigChange("selectedTheme")(val);
             }}
-            options={getAvailableThemes()}
+            options={getAvailableThemes()?.map((op) => {
+              if (op?.isCustom) {
+                // render icon for a custom theme
+                return {
+                  ...op,
+                  icon: FireIcon,
+                };
+              }
+              return op;
+            })}
           />
         ) : null}
         <Select

components/editor/SnippngThemeBuilder.tsx

@@ -13,6 +13,7 @@ const SnippngThemeBuilder: React.FC<{
 }> = ({ themeConfig = { ...defaultCustomTheme } }) => {
   const [theme, setTheme] = useState<SnippngThemeAttributesInterface>({
     ...themeConfig,
+    isCustom: true,
   });
 
   const { handleConfigChange, setEditorConfig } = useSnippngEditor();

components/form/Select.tsx

@@ -2,11 +2,16 @@ import { SelectOptionInterface } from "@/types";
 import { clsx } from "@/utils";
 import { Listbox, Transition } from "@headlessui/react";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
+import { FireIcon } from "@heroicons/react/24/outline";
 import React, { Fragment } from "react";
 
 export interface SelectComponentProps {
   value: SelectOptionInterface;
-  options: { id: string; label: string }[];
+  options: {
+    id: string;
+    label: string;
+    icon?: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+  }[];
   onChange: (value: SelectOptionInterface) => void;
   children?: React.ReactNode;
   placeholder?: string | React.ReactNode;
@@ -73,9 +78,15 @@ const Select: React.FC<SelectComponentProps> = ({
                             value.id === option.id
                               ? "font-semibold"
                               : "font-normal",
-                            "block truncate"
+                            "inline-flex truncate justify-start items-center gap-2"
                           )}
                         >
+                          {option.icon ? (
+                            <option.icon
+                              className="h-5 w-5"
+                              aria-hidden="true"
+                            />
+                          ) : null}
                           {option.label}
                         </span>
 

lib/constants.ts

@@ -6,7 +6,11 @@ import { deepClone, LocalStorage } from "@/utils";
 
 export const isBrowser = typeof window !== "undefined";
 
-export const THEMES = [
+export const THEMES: {
+  id: string;
+  label: string;
+  isCustom?: boolean;
+}[] = [
   {
     id: "abcdef",
     label: "ABCDEF",
@@ -139,13 +143,15 @@ export const getAvailableThemes = () => {
   let localThemesToBeMerged: {
     id: string;
     label: string;
+    isCustom?: boolean;
   }[] = [];
 
   if (localThemes?.length) {
     // if there are locally retrieved themes then map them in correct format
     localThemesToBeMerged = localThemes?.map((x) => ({
       id: x.id,
       label: x.label,
+      isCustom: x.isCustom || false,
     }));
   }
   return [

types/editor.ts

@@ -39,6 +39,7 @@ export interface SnippngThemeAttributesInterface {
     curlyBraces: string;
     controlFlow: string;
   };
+  isCustom?: boolean;
 }
 
 export type SnippngWindowControlsType =