create theme-picker component

Author: christiansamaniego-okta

src/features/common/components/headers/header/header.component.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { usePathname } from "next/navigation";
 import { DEFAULT_LANGUAGE_CODE } from "@/features/localization/localization.config";
 import { LayoutDictionaryModel } from "@/features/localization/models/layout-dictionary.model";
@@ -10,13 +10,30 @@ import styles from "./header.module.scss";
 import { BoxComponent } from "@/features/common/components/box/box.component";
 import Link from "next/link";
 import { SiteBrandComponent } from "@/features/common/components/site-brand/site-brand.component";
+import { ThemePickerComponent } from "../../theme-picker/theme-picker.component";
+import {
+  getSanitizedThemePickerCodeValue,
+  isLightThemePreference,
+  isSystemThemePreference,
+} from "@/features/themes/services/theme.utils";
+import { SystemIconComponent } from "../../bars/ribbon/assets/system-icon.component";
+import { LightIconComponent } from "../../bars/ribbon/assets/light-icon.component";
+import { DarkIconComponent } from "../../bars/ribbon/assets/dark-icon.component";
+import {
+  ThemeCookieValues,
+  ThemePickerCodeValues,
+} from "@/features/common/values/theme.values";
+import { ThemeModel } from "@/features/common/models/theme.model";
+import { savePreferredThemeInCookie } from "@/features/themes/services/theme.client.utils";
 
 interface HeaderComponentProps {
+  themeCode: ThemeCookieValues;
   languageCode: string;
-  dictionary: LayoutDictionaryModel["header"];
+  dictionary: LayoutDictionaryModel;
 }
 
 export const HeaderComponent: React.FC<HeaderComponentProps> = ({
+  themeCode,
   languageCode,
   dictionary,
 }) => {
@@ -33,6 +50,50 @@ export const HeaderComponent: React.FC<HeaderComponentProps> = ({
       ? sitePaths.root
       : createUrlPath([languageCode]);
 
+  const themeOptions = useMemo(
+    () =>
+      dictionary.ribbon.themePicker.options.map((option) => {
+        return {
+          code: option.code,
+          label: option.label,
+          icon: isSystemThemePreference(option.code) ? (
+            <SystemIconComponent />
+          ) : isLightThemePreference(option.code) ? (
+            <LightIconComponent />
+          ) : (
+            <DarkIconComponent />
+          ),
+        };
+      }),
+    [dictionary.ribbon.themePicker.options]
+  );
+
+  const sanitizedThemePickerCodeValue = useMemo(() => {
+    return getSanitizedThemePickerCodeValue(themeCode);
+  }, [themeCode]);
+
+  const [currentTheme, setCurrentTheme] = useState<ThemeModel>(
+    dictionary.ribbon.themePicker.options.filter((element) =>
+      isSystemThemePreference(themeCode)
+        ? isSystemThemePreference(element.code)
+        : element.code === sanitizedThemePickerCodeValue
+    )[0]
+  );
+
+  const handleThemeSelection = useCallback(
+    async (value: ThemePickerCodeValues) => {
+      const themePreference = await savePreferredThemeInCookie(
+        value,
+        languageCode
+      );
+
+      if (themePreference) {
+        setCurrentTheme(themePreference);
+      }
+    },
+    [languageCode]
+  );
+
   return (
     <BoxComponent
       contentAs="nav"
@@ -42,12 +103,15 @@ export const HeaderComponent: React.FC<HeaderComponentProps> = ({
       aria-label="Main navigation"
     >
       <div className={styles.brand}>
-        <SiteBrandComponent path={languagePathPrefix} languageCode={languageCode} />
+        <SiteBrandComponent
+          path={languagePathPrefix}
+          languageCode={languageCode}
+        />
       </div>
       <div className={styles.navContainer}>
         <div className={styles.navTabs}>
           <ul className={styles.navList}>
-            {dictionary.links.map((link) => {
+            {dictionary.header.links.map((link) => {
               const linkPath =
                 languageCode === DEFAULT_LANGUAGE_CODE || link.isExternal
                   ? link.path
@@ -73,6 +137,13 @@ export const HeaderComponent: React.FC<HeaderComponentProps> = ({
           </ul>
         </div>
       </div>
+      <div className={styles.actions}>
+        <ThemePickerComponent
+          options={themeOptions}
+          handleSelection={handleThemeSelection}
+          selectedOptionCode={currentTheme.code}
+        />
+      </div>
     </BoxComponent>
   );
 };

src/features/common/components/headers/mobile-header/mobile-header.component.tsx

@@ -11,10 +11,12 @@ import { DEFAULT_LANGUAGE_CODE } from "@/features/localization/localization.conf
 import { sitePaths } from "@/features/seo/site-tree";
 import { createUrlPath, getPathnameSegments } from "@/libs/utils/path.utils";
 import { SiteBrandComponent } from "@/features/common/components/site-brand/site-brand.component";
+import { ThemeCookieValues } from "@/features/common/values/theme.values";
 
 interface MobileHeaderComponentProps {
+  themeCode: ThemeCookieValues;
   languageCode: string;
-  dictionary: LayoutDictionaryModel["header"];
+  dictionary: LayoutDictionaryModel;
 }
 
 export const MobileHeaderComponent: React.FC<MobileHeaderComponentProps> = ({
@@ -90,8 +92,8 @@ export const MobileHeaderComponent: React.FC<MobileHeaderComponentProps> = ({
             onClick={toggleMobileMenu}
             aria-label={
               mobileMenuState === MobileMenuStateValues.OPEN
-                ? dictionary.labels.close
-                : dictionary.labels.open
+                ? dictionary.header.labels.close
+                : dictionary.header.labels.open
             }
             aria-expanded={mobileMenuState === MobileMenuStateValues.OPEN}
           >
@@ -110,7 +112,7 @@ export const MobileHeaderComponent: React.FC<MobileHeaderComponentProps> = ({
           contentClassName={styles.menuContent}
         >
           <ul className={styles.menu__list}>
-            {dictionary.links.map((link) => {
+            {dictionary.header.links.map((link) => {
               const linkPath =
                 languageCode === DEFAULT_LANGUAGE_CODE || link.isExternal
                   ? link.path

src/features/common/components/layout/page-header/page-header.component.tsx

@@ -1,5 +1,6 @@
+"use client";
+
 import React from "react";
-import { RibbonComponent } from "@/features/common/components/bars/ribbon/ribbon.component";
 import { MobileHeaderComponent } from "@/features/common/components/headers/mobile-header/mobile-header.component";
 import { HeaderComponent } from "@/features/common/components/headers/header/header.component";
 import { ThemeCookieValues } from "@/features/common/values/theme.values";
@@ -19,12 +20,14 @@ export const PageHeaderComponent: React.FC<PageHeaderComponentProps> = ({
   return (
     <header>
       <MobileHeaderComponent
+        themeCode={themeCode}
         languageCode={languageCode}
-        dictionary={layoutDictionary.header}
+        dictionary={layoutDictionary}
       />
       <HeaderComponent
+        themeCode={themeCode}
         languageCode={languageCode}
-        dictionary={layoutDictionary.header}
+        dictionary={layoutDictionary}
       />
     </header>
   );

src/features/common/components/theme-picker/theme-picker.component.tsx

@@ -0,0 +1,50 @@
+import styles from "./theme-picker.module.scss";
+import { ThemePickerCodeValues } from "../../values/theme.values";
+
+interface ThemePickerComponentProps {
+  options: {
+    code: ThemePickerCodeValues;
+    icon: React.ReactNode;
+    label: string;
+  }[];
+  selectedOptionCode: string;
+  handleSelection: (value: ThemePickerCodeValues) => Promise<void>;
+}
+
+enum PicketListItemStateValues {
+  INACTIVE = "INACTIVE",
+  ACTIVE = "ACTIVE",
+}
+
+export const ThemePickerComponent: React.FC<ThemePickerComponentProps> = ({
+  options,
+  selectedOptionCode,
+  handleSelection,
+}) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        {options.map((option) => {
+          return (
+            <div
+              key={option.code}
+              className={styles.option}
+              data-active={
+                option.code === selectedOptionCode
+                  ? PicketListItemStateValues.ACTIVE
+                  : PicketListItemStateValues.INACTIVE
+              }
+              title={option.label}
+              onClick={async () => {
+                console.log(option.label)
+                await handleSelection(option.code);
+              }}
+            >
+              <span className={styles.option__icon}>{option.icon}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

src/features/common/components/theme-picker/theme-picker.module.scss

@@ -0,0 +1,11 @@
+.container {
+
+}
+
+.wrapper {
+
+}
+
+.option {
+
+}