feat: add intl to project

Closes #17

dashboard/package.json

@@ -24,16 +24,18 @@
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@tanstack/react-query": "^5.45.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "flat": "^6.0.1",
     "lucide-react": "^0.396.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
+    "react-intl": "^6.6.8",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
-    "vite": "^5.3.1",
-    "@vitejs/plugin-react": "^4.3.1"
+    "vite": "^5.3.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",

dashboard/src/components/SideMenu/SideMenu.tsx

@@ -2,6 +2,8 @@ import { MdOutlineMonitorHeart, MdOutlineDashboard } from "react-icons/md";
 
 import { ImTree, ImImages } from "react-icons/im";
 
+import { FormattedMessage } from "react-intl";
+
 import {
   NavigationMenu,
   NavigationMenuItem,
@@ -13,7 +15,7 @@ import { Separator } from "../ui/separator";
 
 type MenuItems = {
   onClick: () => void;
-  text: string;
+  idIntl: string;
   icon: JSX.Element;
   selected: boolean;
 };
@@ -23,38 +25,38 @@ const emptyFunc = () : void => {}
 const items: MenuItems[] = [
   {
     onClick: emptyFunc,
-    text: "Dashboard",
+    idIntl: "lateralMenu.dashboard",
     icon: <MdOutlineDashboard className="size-5" />,
     selected: false,
   },
   {
     onClick: emptyFunc,
-    text: "Tree Monitor",
+    idIntl: "lateralMenu.treeMonitor",
     icon: <ImTree className="size-5" />,
     selected: true,
   },
   {
     onClick: emptyFunc,
-    text: "Device Monitor",
+    idIntl: "lateralMenu.deviceMonitor",
     icon: <MdOutlineMonitorHeart className="size-5" />,
     selected: false,
   },
   {
     onClick: emptyFunc,
-    text: "Labs Monitor",
+    idIntl: "lateralMenu.labsMonitor",
     icon: <ImImages className="size-5" />,
     selected: false,
   },
 ];
 
 const NavLink = ({
   icon,
-  text,
-}: Pick<MenuItems, "icon" | "text">): JSX.Element => (
+  idIntl,
+}: Pick<MenuItems, "icon" | "idIntl">): JSX.Element => (
   <NavigationMenuLink asChild>
     <a className="flex items-center no-underline hover:text-sky-500">
       <span className="mr-3">{icon}</span>
-      <span className="text-sm text-center">{text}</span>
+      <span className="text-sm text-center" ><FormattedMessage  id={idIntl}/> </span>
     </a>
   </NavigationMenuLink>
 );
@@ -79,9 +81,9 @@ const SideMenu = (): JSX.Element => {
 
             <NavigationMenuItem
               className={item.selected ? selectedItemClassName : notSelectedItemClassName}
-              key={item.text}
+              key={item.idIntl}
             >
-              <NavLink icon={item.icon} text={item.text} />
+              <NavLink icon={item.icon} idIntl={item.idIntl} />
             </NavigationMenuItem>
 
         )}

dashboard/src/locales/constants.ts

@@ -0,0 +1,4 @@
+export const LOCALES = {
+    EN_US: 'en-us',
+  };
+

dashboard/src/locales/messages/index.ts

@@ -0,0 +1,12 @@
+import {LOCALES} from '../constants'
+
+export const messages = {
+  [LOCALES.EN_US]: {
+    lateralMenu: {
+      dashboard: "Dashboard",
+      treeMonitor: "Tree Monitor",
+      deviceMonitor: "Device Monitor",
+      labsMonitor: "Labs Monitor",
+    },
+  },
+};

dashboard/src/main.tsx

@@ -1,12 +1,23 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
+import {IntlProvider} from "react-intl";
+
+import {flatten} from 'flat';
+
+import {messages} from './locales/messages/index'
+import {LOCALES} from './locales/constants'
+
+
 
 import './index.css'
 import App from './App'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <IntlProvider messages={flatten(messages[LOCALES.EN_US])} locale='en' >
+      <App />
+    </IntlProvider>
+
   </React.StrictMode>,
 )