add nightMode

src/components/NightMode/NightMode.stories.tsx

@@ -0,0 +1,14 @@
+import { NightMode } from './NightMode';
+
+export default {
+  title: 'Components/Night Mode',
+  component: NightMode,
+};
+
+export const _NightMode = {
+  render: () => (
+    <>
+      <NightMode />
+    </>
+  ),
+};

src/components/NightMode/NightMode.test.tsx

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { NightMode } from '.';
+
+describe('Components | Button | NightMode', () => {
+  test('it should render', () => {
+    render(<NightMode />);
+
+    let button = screen.getByTestId('nightMode');
+
+    expect(button).toBeInTheDocument();
+  });
+});

src/components/NightMode/NightMode.tsx

@@ -0,0 +1,64 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { useState, useEffect, ComponentPropsWithoutRef } from 'react';
+import { FiMoon, FiSun } from 'react-icons/fi';
+
+export function NightMode() {
+  const containerFlexClass = 'flex justify-center items-center';
+  const [theme, setTheme] = useState('dark');
+
+  function isLocalStorageAvailable() {
+    try {
+      return typeof localStorage === 'object' && navigator.cookieEnabled;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function changeTheme() {
+    if (isLocalStorageAvailable()) {
+      const massaStation = localStorage.getItem('massaStation');
+      if (massaStation) {
+        const parsedData = JSON.parse(massaStation);
+        const newTheme = parsedData.theme === 'dark' ? 'light' : 'dark';
+        const newData = { ...parsedData, theme: newTheme };
+        localStorage.setItem('massaStation', JSON.stringify(newData));
+        setTheme(newTheme);
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (isLocalStorageAvailable()) {
+      const massaStation = localStorage.getItem('massaStation');
+      if (!massaStation) {
+        const themeData = { theme: 'dark' };
+        localStorage.setItem('massaStation', JSON.stringify(themeData));
+        setTheme('dark');
+      } else {
+        const parsedData = JSON.parse(massaStation);
+        setTheme(parsedData.theme);
+      }
+    }
+  }, []);
+
+  return (
+    <button
+      data-testid="nightMode"
+      className={`bg-primary text-f-primary p-3 rounded-lg cursor-pointer 
+                  flex flex-row items-center justify-center
+                  hover:bg-tertiary
+                  active:bg-secondary
+                  h-12 w-12`}
+      onClick={changeTheme}
+    >
+      <div className={containerFlexClass}>
+        {theme === 'dark' ? (
+          <FiSun className="h-8 w-8" />
+        ) : (
+          <FiMoon className="h-8 w-8" />
+        )}
+      </div>
+    </button>
+  );
+}

src/components/NightMode/index.ts

@@ -0,0 +1 @@
+export * from './NightMode';

src/components/index.ts

@@ -10,3 +10,4 @@ export * from './SideMenu';
 export * from './Icons';
 export * from './Toggle';
 export * from './Balance';
+export * from './NightMode';