WIP

src/components/ChatMessage.tsx

@@ -9,15 +9,16 @@ import {
 } from '@heroicons/react/outline';
 import type { Types } from '@meshtastic/meshtasticjs';
 
+import { useAppSelector } from '../hooks/redux';
 import { nodeResource } from '../streams';
 
 interface ChatMessageProps {
   message: { message: Types.TextPacket; ack: boolean };
-  myId: number;
 }
 
-const ChatMessage = (props: ChatMessageProps): JSX.Element => {
+export const ChatMessage = (props: ChatMessageProps): JSX.Element => {
   const nodeSource = useObservableSuspense(nodeResource);
+  const myId = useAppSelector((state) => state.meshtastic.myId);
 
   const [nodes, setNodes] = React.useState<Types.NodeInfoPacket[]>([]);
 
@@ -54,38 +55,44 @@ const ChatMessage = (props: ChatMessageProps): JSX.Element => {
         colors={['#213435', '#46685B', '#648A64', '#A6B985', '#E1E3AC']}
       />
       <div className="flex flex-col container px-2 items-start">
-        <div
-          className={`px-4 py-2 rounded-md shadow-md ${
-            props.message.message.packet.from !== props.myId
-              ? 'bg-gray-300'
-              : 'bg-green-200'
-          }`}
+        <React.Suspense
+          fallback={
+            <div className="flex border-b border-gray-300">
+              <div className="m-auto p-3 text-gray-500">Loading</div>
+            </div>
+          }
         >
-          <div className="flex text-xs text-gray-500 space-x-1">
-            <div className="font-medium">
-              {node?.data.user?.longName ?? 'UNK'}
+          <div
+            className={`px-4 py-2 rounded-md shadow-md ${
+              props.message.message.packet.from !== myId
+                ? 'bg-gray-300'
+                : 'bg-green-200'
+            }`}
+          >
+            <div className="flex text-xs text-gray-500 space-x-1">
+              <div className="font-medium">
+                {node?.data.user?.longName ?? 'UNK'}
+              </div>
+              <p>-</p>
+              <div className="underline">
+                {new Date(
+                  props.message.message.packet.rxTime > 0
+                    ? props.message.message.packet.rxTime
+                    : Date.now(),
+                ).toLocaleString()}
+              </div>
             </div>
-            <p>-</p>
-            <div className="underline">
-              {new Date(
-                props.message.message.packet.rxTime > 0
-                  ? props.message.message.packet.rxTime
-                  : Date.now(),
-              ).toLocaleString()}
+            <div className="flex justify-between text-gray-600">
+              <span className="inline-block">{props.message.message.data}</span>
+              {props.message.ack ? (
+                <CheckCircleIcon className="my-auto w-5 h-5" />
+              ) : (
+                <DotsCircleHorizontalIcon className="my-auto animate-pulse w-5 h-5" />
+              )}
             </div>
           </div>
-          <div className="flex justify-between text-gray-600">
-            <span className="inline-block">{props.message.message.data}</span>
-            {props.message.ack ? (
-              <CheckCircleIcon className="my-auto w-5 h-5" />
-            ) : (
-              <DotsCircleHorizontalIcon className="my-auto animate-pulse w-5 h-5" />
-            )}
-          </div>
-        </div>
+        </React.Suspense>
       </div>
     </div>
   );
 };
-
-export default ChatMessage;

src/components/Header.tsx

@@ -12,7 +12,7 @@ import type {
 } from '@meshtastic/meshtasticjs';
 import { Types } from '@meshtastic/meshtasticjs';
 
-import Logo from './logo';
+import { Logo } from './Logo';
 
 interface HeaderProps {
   status: Types.DeviceStatusEnum;
@@ -21,9 +21,9 @@ interface HeaderProps {
   connection: IHTTPConnection | ISerialConnection | IBLEConnection;
 }
 
-const Header = (props: HeaderProps): JSX.Element => {
+export const Header = (props: HeaderProps): JSX.Element => {
   return (
-    <nav className="w-full shadow-md">
+    <nav className="select-none w-full shadow-md">
       <div className="flex w-full container mx-auto justify-between px-6 py-4">
         <Logo />
         <div></div>
@@ -34,10 +34,10 @@ const Header = (props: HeaderProps): JSX.Element => {
               className={`w-5 h-5 rounded-full ${
                 new Date(props.LastMeshInterraction) <
                 new Date(Date.now() - 40000)
-                  ? 'bg-red-400'
+                  ? 'bg-red-400 animate-pulse'
                   : new Date(props.LastMeshInterraction) <
                     new Date(Date.now() - 20000)
-                  ? 'bg-yellow-400'
+                  ? 'bg-yellow-400 animate-pulse'
                   : 'bg-green-400'
               }`}
             ></div>
@@ -53,10 +53,10 @@ const Header = (props: HeaderProps): JSX.Element => {
             <div
               className={`w-5 h-5 rounded-full ${
                 props.status <= Types.DeviceStatusEnum.DEVICE_DISCONNECTED
-                  ? 'bg-red-400'
+                  ? 'bg-red-400 animate-pulse'
                   : props.status <= Types.DeviceStatusEnum.DEVICE_CONFIGURING &&
                     !props.IsReady
-                  ? 'bg-yellow-400'
+                  ? 'bg-yellow-400 animate-pulse'
                   : props.IsReady
                   ? 'bg-green-400'
                   : 'bg-gray-400'
@@ -69,5 +69,3 @@ const Header = (props: HeaderProps): JSX.Element => {
     </nav>
   );
 };
-
-export default Header;

src/components/Logo.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Logo = (): JSX.Element => {
+export const Logo = (): JSX.Element => {
   return (
     <svg
       height="30"
@@ -82,5 +82,3 @@ const Logo = (): JSX.Element => {
     </svg>
   );
 };
-
-export default Logo;

src/components/MessageBox.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { useTranslation } from 'react-i18next';
+
 import { MenuIcon, PaperAirplaneIcon } from '@heroicons/react/outline';
 import type {
   IBLEConnection,
@@ -7,17 +9,15 @@ import type {
   ISerialConnection,
 } from '@meshtastic/meshtasticjs';
 
-import { TranslationsContext } from '../translations/TranslationsContext';
+import { useAppDispatch } from '../hooks/redux';
+import { toggleSidebar } from '../slices/appSlice';
 
 export interface MessageBoxProps {
-  sidebarOpen: boolean;
-  setSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
   connection: ISerialConnection | IHTTPConnection | IBLEConnection;
   isReady: boolean;
 }
 
-const MessageBox = (props: MessageBoxProps): JSX.Element => {
-  const { translations } = React.useContext(TranslationsContext);
+export const MessageBox = (props: MessageBoxProps): JSX.Element => {
   const [currentMessage, setCurrentMessage] = React.useState('');
   const sendMessage = () => {
     if (props.isReady) {
@@ -25,12 +25,15 @@ const MessageBox = (props: MessageBoxProps): JSX.Element => {
       setCurrentMessage('');
     }
   };
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
   return (
     <div className="flex text-lg font-medium space-x-2 md:space-x-0 w-full">
       <div
         className="flex p-3 text-xl hover:text-gray-500 text-gray-400 rounded-md border shadow-md focus:outline-none cursor-pointer md:hidden"
         onClick={() => {
-          props.setSidebarOpen(!props.sidebarOpen);
+          dispatch(toggleSidebar());
         }}
       >
         <MenuIcon className="m-auto h-6 2-6" />
@@ -45,7 +48,7 @@ const MessageBox = (props: MessageBoxProps): JSX.Element => {
         {props.isReady}
         <input
           type="text"
-          placeholder={`${translations.no_message_placeholder}...`}
+          placeholder={`${t('placeholder.no_messages')}...`}
           disabled={!props.isReady}
           value={currentMessage}
           onChange={(e) => {
@@ -67,5 +70,3 @@ const MessageBox = (props: MessageBoxProps): JSX.Element => {
     </div>
   );
 };
-
-export default MessageBox;

src/components/Sidebar.tsx

@@ -6,33 +6,29 @@ import type {
   ISerialConnection,
 } from '@meshtastic/meshtasticjs';
 
-import Channels from './Sidebar/Channels/Index';
-import Device from './Sidebar/Device/Index';
-import Nodes from './Sidebar/Nodes/Index';
-import UI from './Sidebar/UI/Index';
+import { useAppSelector } from '../hooks/redux';
+import { Channels } from './Sidebar/Channels/Index';
+import { Device } from './Sidebar/Device/Index';
+import { Nodes } from './Sidebar/Nodes/Index';
+import { UI } from './Sidebar/UI/Index';
 
 interface SidebarProps {
-  myId: number;
-  sidebarOpen: boolean;
-  darkmode: boolean;
-  setDarkmode: React.Dispatch<React.SetStateAction<boolean>>;
   connection: ISerialConnection | IHTTPConnection | IBLEConnection;
 }
 
-const Sidebar = (props: SidebarProps): JSX.Element => {
+export const Sidebar = (props: SidebarProps): JSX.Element => {
+  const sidebarOpen = useAppSelector((state) => state.app.sidebarOpen);
   return (
     <div
       className={`${
-        props.sidebarOpen ? 'flex' : 'hidden md:flex'
+        sidebarOpen ? 'flex' : 'hidden md:flex'
       } flex-col rounded-md md:ml-0 shadow-md border w-full max-w-sm`}
     >
-      <Nodes myId={props.myId} />
+      <Nodes />
       <Device connection={props.connection} />
       <Channels />
       <div className="flex-grow border-b"></div>
-      <UI darkmode={props.darkmode} setDarkmode={props.setDarkmode} />
+      <UI />
     </div>
   );
 };
-
-export default Sidebar;

src/components/Sidebar/Channels/Channel.tsx

@@ -8,7 +8,7 @@ export interface ChannelProps {
   channel: Protobuf.Channel;
 }
 
-const Channel = (props: ChannelProps): JSX.Element => {
+export const Channel = (props: ChannelProps): JSX.Element => {
   return (
     <Disclosure>
       {({ open }) => (
@@ -112,5 +112,3 @@ const Channel = (props: ChannelProps): JSX.Element => {
     </Disclosure>
   );
 };
-
-export default Channel;

src/components/Sidebar/Channels/ChannelList.tsx

@@ -5,9 +5,9 @@ import { useObservableSuspense } from 'observable-hooks';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 import { channelResource } from '../../../streams';
-import Channel from './Channel';
+import { Channel } from './Channel';
 
-const ChannelList = (): JSX.Element => {
+export const ChannelList = (): JSX.Element => {
   const channelSource = useObservableSuspense(channelResource);
 
   const [channels, setChannels] = React.useState<Protobuf.Channel[]>([]);
@@ -39,5 +39,3 @@ const ChannelList = (): JSX.Element => {
     </>
   );
 };
-
-export default ChannelList;

src/components/Sidebar/Channels/Index.tsx

@@ -1,47 +1,20 @@
 import React from 'react';
 
-import { Disclosure } from '@headlessui/react';
-import {
-  ChevronDownIcon,
-  ChevronRightIcon,
-  HashtagIcon,
-} from '@heroicons/react/outline';
+import { useTranslation } from 'react-i18next';
 
-import { TranslationsContext } from '../../../translations/TranslationsContext';
-import ChannelList from './ChannelList';
+import { HashtagIcon } from '@heroicons/react/outline';
 
-const Channels = (): JSX.Element => {
-  const { translations } = React.useContext(TranslationsContext);
+import { Dropdown } from '../../basic/Dropdown';
+import { ChannelList } from './ChannelList';
+
+export const Channels = (): JSX.Element => {
+  const { t } = useTranslation();
   return (
-    <Disclosure>
-      {({ open }) => (
-        <>
-          <Disclosure.Button className="flex w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
-            <div className="flex">
-              {open ? (
-                <ChevronDownIcon className="my-auto w-5 h-5 mr-2" />
-              ) : (
-                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
-              )}
-              <HashtagIcon className="my-auto text-gray-600 mr-2 2-5 h-5" />
-              {translations.device_channels_title}
-            </div>
-          </Disclosure.Button>
-          <Disclosure.Panel>
-            <React.Suspense
-              fallback={
-                <div className="flex border-b border-gray-300">
-                  <div className="m-auto p-3 text-gray-500">Loading...</div>
-                </div>
-              }
-            >
-              <ChannelList />
-            </React.Suspense>
-          </Disclosure.Panel>
-        </>
-      )}
-    </Disclosure>
+    <Dropdown
+      icon={<HashtagIcon className="my-auto text-gray-600 mr-2 w-5 h-5" />}
+      title={t('settings.channel')}
+      content={<ChannelList />}
+      fallbackMessage={'Loading...'}
+    />
   );
 };
-
-export default Channels;

src/components/Sidebar/Device/Index.tsx

@@ -1,58 +1,29 @@
 import React from 'react';
 
-import { Disclosure } from '@headlessui/react';
-import {
-  AdjustmentsIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-} from '@heroicons/react/outline';
+import { useTranslation } from 'react-i18next';
+
+import { AdjustmentsIcon } from '@heroicons/react/outline';
 import type {
   IBLEConnection,
   IHTTPConnection,
   ISerialConnection,
 } from '@meshtastic/meshtasticjs';
 
-import { TranslationsContext } from '../../../translations/TranslationsContext';
-import Settings from './Settings';
+import { Dropdown } from '../../basic/Dropdown';
+import { Settings } from './Settings';
 
 interface DeviceProps {
   connection: ISerialConnection | IHTTPConnection | IBLEConnection;
 }
 
-const Device = (props: DeviceProps): JSX.Element => {
-  const { translations } = React.useContext(TranslationsContext);
+export const Device = (props: DeviceProps): JSX.Element => {
+  const { t } = useTranslation();
   return (
-    <Disclosure>
-      {({ open }) => (
-        <>
-          <Disclosure.Button className="flex w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
-            <div className="flex">
-              {open ? (
-                <ChevronDownIcon className="my-auto w-5 h-5 mr-2" />
-              ) : (
-                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
-              )}
-              <AdjustmentsIcon className="text-gray-600 my-auto mr-2 w-5 h-5" />
-              {translations.device_settings_title}
-            </div>
-          </Disclosure.Button>
-          <Disclosure.Panel>
-            <>
-              <React.Suspense
-                fallback={
-                  <div className="flex border-b border-gray-300">
-                    <div className="m-auto p-3 text-gray-500">Loading...</div>
-                  </div>
-                }
-              >
-                <Settings connection={props.connection} />
-              </React.Suspense>
-            </>
-          </Disclosure.Panel>
-        </>
-      )}
-    </Disclosure>
+    <Dropdown
+      icon={<AdjustmentsIcon className="my-auto text-gray-600 mr-2 w-5 h-5" />}
+      title={t('settings.device')}
+      content={<Settings connection={props.connection} />}
+      fallbackMessage={'Loading...'}
+    />
   );
 };
-
-export default Device;

src/components/Sidebar/Device/Settings.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { useObservableSuspense } from 'observable-hooks';
 import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 
 import { SaveIcon } from '@heroicons/react/outline';
 import type {
@@ -12,14 +13,13 @@ import type {
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 import { preferencesResource } from '../../../streams';
-import { TranslationsContext } from '../../../translations/TranslationsContext';
 
 interface SettingsProps {
   connection: ISerialConnection | IHTTPConnection | IBLEConnection;
 }
 
-const Settings = (props: SettingsProps): JSX.Element => {
-  const { translations } = React.useContext(TranslationsContext);
+export const Settings = (props: SettingsProps): JSX.Element => {
+  const { t } = useTranslation();
   const preferences = useObservableSuspense(preferencesResource);
 
   const { register, handleSubmit } =
@@ -33,7 +33,7 @@ const Settings = (props: SettingsProps): JSX.Element => {
   return (
     <form onSubmit={onSubmit}>
       <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
-        <div className="my-auto">{translations.device_region_title}</div>
+        <div className="my-auto">{t('strings.device_region')}</div>
         <div className="flex shadow-md rounded-md ml-2">
           <select
             {...register('region', {
@@ -71,13 +71,13 @@ const Settings = (props: SettingsProps): JSX.Element => {
         </div>
       </div>
       <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
-        <div className="my-auto">{translations.device_wifi_ssid}</div>
+        <div className="my-auto">{t('strings.wifi_ssid')}</div>
         <div className="flex shadow-md rounded-md ml-2">
           <input {...register('wifiSsid', {})} type="text" />
         </div>
       </div>
       <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
-        <div className="my-auto">{translations.device_wifi_psk}</div>
+        <div className="my-auto">{t('strings.wifi_psk')}</div>
         <div className="flex shadow-md rounded-md ml-2">
           <input {...register('wifiPassword', {})} type="password" />
         </div>
@@ -88,11 +88,9 @@ const Settings = (props: SettingsProps): JSX.Element => {
           className="flex m-auto font-medium group-hover:text-gray-700"
         >
           <SaveIcon className="m-auto mr-2 group-hover:text-gray-700 w-5 h-5" />
-          {translations.save_changes_button}
+          {t('strings.save_changes')}
         </button>
       </div>
     </form>
   );
 };
-
-export default Settings;

src/components/Sidebar/Nodes/Index.tsx

@@ -1,53 +1,20 @@
 import React from 'react';
 
-import { Disclosure } from '@headlessui/react';
-import {
-  ChevronDownIcon,
-  ChevronRightIcon,
-  UsersIcon,
-} from '@heroicons/react/outline';
+import { useTranslation } from 'react-i18next';
 
-import { TranslationsContext } from '../../../translations/TranslationsContext';
-import NodeList from './NodeList';
+import { UsersIcon } from '@heroicons/react/outline';
 
-interface NodesProps {
-  myId: number;
-}
+import { Dropdown } from '../../basic/Dropdown';
+import { NodeList } from './NodeList';
 
-const Nodes = (props: NodesProps): JSX.Element => {
-  const { translations } = React.useContext(TranslationsContext);
+export const Nodes = (): JSX.Element => {
+  const { t } = useTranslation();
   return (
-    <Disclosure>
-      {({ open }) => (
-        <>
-          <Disclosure.Button className="flex rounded-t-md w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
-            <div className="flex">
-              {open ? (
-                <ChevronDownIcon className="my-auto w-5 h-5 mr-2" />
-              ) : (
-                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
-              )}
-              <UsersIcon className="my-auto text-gray-600 mr-2 w-5 h-5" />
-              {translations.nodes_title}
-            </div>
-          </Disclosure.Button>
-          <Disclosure.Panel className="shadow-inner">
-            <React.Suspense
-              fallback={
-                <div className="flex border-b border-gray-300">
-                  <div className="m-auto p-3 text-gray-500">
-                    {translations.no_nodes_message}
-                  </div>
-                </div>
-              }
-            >
-              <NodeList myId={props.myId} />
-            </React.Suspense>
-          </Disclosure.Panel>
-        </>
-      )}
-    </Disclosure>
+    <Dropdown
+      icon={<UsersIcon className="my-auto text-gray-600 mr-2 w-5 h-5" />}
+      title={t('placeholder.no_nodes')}
+      content={<NodeList />}
+      fallbackMessage={t('placeholder.no_messages')}
+    />
   );
 };
-
-export default Nodes;

src/components/Sidebar/Nodes/Node.tsx

@@ -13,12 +13,15 @@ import {
 } from '@heroicons/react/outline';
 import type { Types } from '@meshtastic/meshtasticjs';
 
+import { useAppSelector } from '../../../hooks/redux';
+
 export interface NodeProps {
   node: Types.NodeInfoPacket;
-  myId: number;
 }
 
-const Node = (props: NodeProps): JSX.Element => {
+export const Node = (props: NodeProps): JSX.Element => {
+  const myId = useAppSelector((state) => state.meshtastic.myId);
+
   return (
     <Disclosure>
       {({ open }) => (
@@ -31,7 +34,7 @@ const Node = (props: NodeProps): JSX.Element => {
                 <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
               )}
               <div className="relative">
-                {props.node.data.num === props.myId ? (
+                {props.node.data.num === myId ? (
                   <FlagIcon className="absolute -right-1 -top-2 text-yellow-500 my-auto w-4 h-4" />
                 ) : null}
                 <Avatar
@@ -98,5 +101,3 @@ const Node = (props: NodeProps): JSX.Element => {
     </Disclosure>
   );
 };
-
-export default Node;

src/components/Sidebar/Nodes/NodeList.tsx

@@ -5,13 +5,9 @@ import { useObservableSuspense } from 'observable-hooks';
 import type { Types } from '@meshtastic/meshtasticjs';
 
 import { nodeResource } from '../../../streams';
-import Node from './Node';
+import { Node } from './Node';
 
-export interface NodeListProps {
-  myId: number;
-}
-
-const NodeList = (props: NodeListProps): JSX.Element => {
+export const NodeList = (): JSX.Element => {
   const nodeSource = useObservableSuspense(nodeResource);
 
   const [nodes, setNodes] = React.useState<Types.NodeInfoPacket[]>([]);
@@ -37,10 +33,8 @@ const NodeList = (props: NodeListProps): JSX.Element => {
   return (
     <>
       {nodes.map((node, index) => (
-        <Node key={index} node={node} myId={props.myId} />
+        <Node key={index} node={node} />
       ))}
     </>
   );
 };
-
-export default NodeList;

src/components/Sidebar/UI/Index.tsx

@@ -1,44 +1,21 @@
 import React from 'react';
 
-import { Disclosure } from '@headlessui/react';
-import {
-  ChevronDownIcon,
-  ChevronRightIcon,
-  CogIcon,
-} from '@heroicons/react/outline';
+import { useTranslation } from 'react-i18next';
 
-import { TranslationsContext } from '../../../translations/TranslationsContext';
-import Translations from './Translations';
+import { CogIcon } from '@heroicons/react/outline';
 
-interface UIProps {
-  darkmode: boolean;
-  setDarkmode: React.Dispatch<React.SetStateAction<boolean>>;
-}
+import { Dropdown } from '../../basic/Dropdown';
+import { Translations } from './Translations';
+
+export const UI = (): JSX.Element => {
+  const { t } = useTranslation();
 
-const UI = (props: UIProps): JSX.Element => {
-  const { translations } = React.useContext(TranslationsContext);
   return (
-    <Disclosure>
-      {({ open }) => (
-        <>
-          <Disclosure.Button className="flex w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
-            <div className="flex">
-              {open ? (
-                <ChevronDownIcon className="my-auto w-5 h-5 mr-2" />
-              ) : (
-                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
-              )}
-              <CogIcon className="my-auto text-gray-600 mr-2 w-5 h-5" />
-              {translations.ui_settings_title}
-            </div>
-          </Disclosure.Button>
-          <Disclosure.Panel>
-            <Translations />
-          </Disclosure.Panel>
-        </>
-      )}
-    </Disclosure>
+    <Dropdown
+      icon={<CogIcon className="my-auto text-gray-600 mr-2 w-5 h-5" />}
+      title={t('settings.ui')}
+      content={<Translations />}
+      fallbackMessage={'Loading...'}
+    />
   );
 };
-
-export default UI;

src/components/Sidebar/UI/Translations.tsx

@@ -1,18 +1,14 @@
 import React from 'react';
 
 import { Br, Jp, Us } from 'react-flags-select';
+import { useTranslation } from 'react-i18next';
 
 import { Disclosure } from '@headlessui/react';
 import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/outline';
 
-import {
-  LanguageEnum,
-  TranslationsContext,
-} from '../../../translations/TranslationsContext';
+export const Translations = (): JSX.Element => {
+  const { t } = useTranslation();
 
-const Translations = (): JSX.Element => {
-  const { translations, language, setLanguage } =
-    React.useContext(TranslationsContext);
   return (
     <Disclosure>
       {({ open }) => (
@@ -24,8 +20,8 @@ const Translations = (): JSX.Element => {
               ) : (
                 <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
               )}
-              {translations.language_title}
-              <div className="my-auto">
+              {t('strings.language')}
+              {/* <div className="my-auto">
                 {language === LanguageEnum.ENGLISH ? (
                   <Us className="ml-2 w-8" />
                 ) : language === LanguageEnum.JAPANESE ? (
@@ -33,14 +29,14 @@ const Translations = (): JSX.Element => {
                 ) : language === LanguageEnum.PORTUGUESE ? (
                   <Br className="ml-2 w-8" />
                 ) : null}
-              </div>
+              </div> */}
             </div>
           </Disclosure.Button>
           <Disclosure.Panel>
             <div
               className="flex bg-gray-100 hover:bg-gray-200 cursor-pointer justify-between p-2"
               onClick={() => {
-                setLanguage(LanguageEnum.ENGLISH);
+                // setLanguage(LanguageEnum.ENGLISH);
               }}
             >
               English <Us className="w-8 my-auto" />
@@ -48,7 +44,7 @@ const Translations = (): JSX.Element => {
             <div
               className="flex bg-gray-100 hover:bg-gray-200 cursor-pointer justify-between p-2"
               onClick={() => {
-                setLanguage(LanguageEnum.PORTUGUESE);
+                // setLanguage(LanguageEnum.PORTUGUESE);
               }}
             >
               Português <Br className="w-8 my-auto" />
@@ -56,7 +52,7 @@ const Translations = (): JSX.Element => {
             <div
               className="flex bg-gray-100 hover:bg-gray-200 cursor-pointer justify-between p-2"
               onClick={() => {
-                setLanguage(LanguageEnum.JAPANESE);
+                // setLanguage(LanguageEnum.JAPANESE);
               }}
             >
               日本語 <Jp className="w-8 my-auto" />
@@ -67,5 +63,3 @@ const Translations = (): JSX.Element => {
     </Disclosure>
   );
 };
-
-export default Translations;

src/components/basic/Dropdown.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { AnimatePresence, motion } from 'framer-motion';
+
+import { Disclosure } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/outline';
+
+interface DropdownProps {
+  icon: JSX.Element;
+  title: string;
+  content: JSX.Element;
+  fallbackMessage: string;
+}
+
+export const Dropdown = (props: DropdownProps): JSX.Element => {
+  return (
+    <Disclosure>
+      {({ open }) => (
+        <>
+          <Disclosure.Button className="bg-white flex w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
+            <div className="flex">
+              <motion.div
+                className="my-auto mr-2"
+                variants={{
+                  initial: { rotate: -90 },
+                  animate: {
+                    rotate: 0,
+                  },
+                }}
+                initial="initial"
+                animate={open ? 'animate' : 'initial'}
+              >
+                <ChevronDownIcon className="w-5 h-5" />
+              </motion.div>
+              {props.icon}
+              {props.title}
+            </div>
+          </Disclosure.Button>
+
+          <AnimatePresence>
+            {open && (
+              <Disclosure.Panel
+                as={motion.div}
+                static
+                initial={{
+                  height: 0,
+                }}
+                animate={{
+                  height: 'auto',
+                }}
+                exit={{
+                  height: 0,
+                }}
+                className="shadow-inner"
+              >
+                <React.Suspense
+                  fallback={
+                    <div className="flex border-b border-gray-300">
+                      <div className="m-auto p-3 text-gray-500">
+                        {props.fallbackMessage}
+                      </div>
+                    </div>
+                  }
+                >
+                  {props.content}
+                </React.Suspense>
+              </Disclosure.Panel>
+            )}
+          </AnimatePresence>
+        </>
+      )}
+    </Disclosure>
+  );
+};

src/components/basic/ToggleSwitch.tsx

@@ -6,7 +6,7 @@ interface ToggleSwitchProps {
   active: boolean;
 }
 
-const ToggleSwitch = (props: ToggleSwitchProps): JSX.Element => {
+export const ToggleSwitch = (props: ToggleSwitchProps): JSX.Element => {
   const [active, setActive] = React.useState(false);
 
   React.useEffect(() => {
@@ -29,5 +29,3 @@ const ToggleSwitch = (props: ToggleSwitchProps): JSX.Element => {
     </Switch>
   );
 };
-
-export default ToggleSwitch;