feat: typing

package.json

@@ -27,7 +27,8 @@
     "next": "12.1.0",
     "next-seo": "^5.1.0",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "zustand": "^3.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",

src/components/header/body.tsx

@@ -7,7 +7,9 @@ import {
   ToolItemGroup,
   Tool,
 } from "@dataesr/react-dsfr";
+import { Switch } from "./switch";
 import { HeaderBodyProps } from "./type";
+import { isSwitch } from "./utils";
 
 export const Body = (props: HeaderBodyProps): JSX.Element => (
   <HeaderBody>
@@ -29,9 +31,15 @@ export const Body = (props: HeaderBodyProps): JSX.Element => (
       {props.items && (
         <ToolItemGroup>
           {props.items.map((item, index) => (
-            <ToolItem key={`${index}-${item.title}`} link={item.href}>
-              {item.title}
-            </ToolItem>
+            <>
+              {isSwitch(item) ? (
+                <Switch {...item} />
+              ) : (
+                <ToolItem key={`${index}-${item.title}`} link={item.href}>
+                  {item.title}
+                </ToolItem>
+              )}
+            </>
           ))}
         </ToolItemGroup>
       )}

src/components/header/store.ts

@@ -0,0 +1,9 @@
+import { combine } from "zustand/middleware";
+import create from "zustand";
+
+export const useHeaderStore = create(
+  combine({ isSwitchModeOpen: false }, set => ({
+    onSwitchMode: () =>
+      set(state => ({ isSwitchModeOpen: !state.isSwitchModeOpen })),
+  }))
+);

src/components/header/switch.tsx

@@ -0,0 +1,26 @@
+import { SwitchTheme } from "@dataesr/react-dsfr";
+import { ToolItem } from "@dataesr/react-dsfr";
+import { useHeaderStore } from "./store";
+import { SwitchProps } from "./type";
+
+export const Switch = (props: SwitchProps): JSX.Element => {
+  const [isOpen, onSwitchMode] = useHeaderStore(state => [
+    state.isSwitchModeOpen,
+    state.onSwitchMode,
+  ]);
+
+  return (
+    <>
+      <ToolItem onClick={onSwitchMode}>
+        <span
+          className="fr-fi-theme-fill fr-link--icon-left"
+          aria-controls="fr-theme-modal"
+          data-fr-opened={isOpen}
+        >
+          {props.label}
+        </span>
+      </ToolItem>
+      <SwitchTheme isOpen={isOpen} setIsOpen={onSwitchMode} />
+    </>
+  );
+};

src/components/header/type.ts

@@ -45,10 +45,15 @@ export type HeaderBodyProps = {
   image?: Image;
   serviceTitle: string;
   serviceDescription: string;
-  items?: Array<Omit<Link, "name">>;
+  items?: Array<Omit<Link, "name"> | SwitchProps>;
 };
 
 export type HeaderProps = {
   navSection?: HeaderNavProps;
   bodySection: HeaderBodyProps;
 };
+
+export type SwitchProps = {
+  isSwitch: true;
+  label: string;
+};

src/components/header/utils.ts

@@ -0,0 +1,5 @@
+import { SwitchProps } from "./type";
+
+export const isSwitch = (
+  obj: { title: string; href: string } | SwitchProps
+): obj is SwitchProps => "isSwitch" in obj;

src/config/layout/header.ts

@@ -15,6 +15,10 @@ export const headerBody: HeaderBodyProps = {
   items: [
     { href: "/", title: "Lien A" },
     { href: "/", title: "Lien B" },
+    {
+      label: "Paramètre d'affichage",
+      isSwitch: true,
+    },
   ],
 };
 

yarn.lock

@@ -12748,6 +12748,11 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+zustand@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.0.tgz#a5c68fb06bdee9c63ad829de2432635be6d0ce69"
+  integrity sha512-USzVzLGrvZ8VK1/sEsOAmeqa8N7D3OBdZskVaL7DL89Q4QLTYD053iIlZ5KDidyZ+Od80Dttin/f8ZulOLFFDQ==
+
 zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"