feat: init project SelfChckout

package/components/organisms/Navbar.tsx

@@ -0,0 +1,47 @@
+"use client";
+import Grid from '@mui/material/Grid2';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import i18n from '@package/utils/language/i18n';
+
+const Navbar: React.FC = () => {
+  const { t } = useTranslation();
+  const [language, setLanguage] = useState(i18n.language || 'en');
+
+  const changeLanguage = (lng: string) => {
+    i18n.changeLanguage(lng);
+    setLanguage(lng);
+  };
+
+  useEffect(() => {
+    setLanguage(i18n.language);
+  }, []);
+
+  return (
+    <Grid
+      container
+      justifyContent="space-between"
+      alignItems="center"
+      className="bg-blue-600 text-white p-4"
+    >
+      <Grid>
+        <h1 className="text-white font-bold">{t('lbl_wellcome')}</h1>
+      </Grid>
+      <Grid>
+        <Select
+          value={language}
+          onChange={(e) => changeLanguage(e.target.value as string)}
+          variant="outlined"
+          className="bg-white text-black"
+        >
+          <MenuItem value="en">English</MenuItem>
+          <MenuItem value="es">Español</MenuItem>
+        </Select>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default Navbar;