Skip to content

Commit

Permalink
Added Translator
Browse files Browse the repository at this point in the history
  • Loading branch information
AsmitaMishra24 committed Jul 19, 2024
1 parent 1cd7f60 commit 73d43e4
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 11 deletions.
23 changes: 12 additions & 11 deletions client/src/components/Navbar/navbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import logo2 from "../../assets/shoelogo.jpg";
import axios from "axios";
import {useDispatch, useSelector} from "react-redux";
import { logOut, setUsername } from "../../redux/auth-slice";
import Translate from "../Translator/Translator";

const Navbar = () => {

const [user, setUser] = useState();
const dispatch = useDispatch();
const logged = useSelector((state)=>state.auth.value.isAuth);
Expand Down Expand Up @@ -135,14 +135,14 @@ const Navbar = () => {
Login
</Link>
</Menu>
<nav className="flex items-center py-4 px-2 text-md">
<nav className="flex items-center py-4 px-2 text-md justify-between w-full">
<div className="flex gap-5 w-[30%] justify-center items-center max-lg:hidden">
<NavLink
to="/"
className={({ isActive }) =>
isActive
? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 w-10"
: "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold w-10"
? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 px-2 ml-3"
: "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold px-2 ml-3"
}
>
Home
Expand All @@ -151,8 +151,8 @@ const Navbar = () => {
to="categories"
className={({ isActive }) =>
isActive
? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 w-10 mr-8"
: "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold w-10 mr-8"
? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 px-3"
: "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold px-3"
}
>
Categories
Expand All @@ -161,8 +161,8 @@ const Navbar = () => {
to="customize"
className={({ isActive }) =>
isActive
? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 w-10 mr-8"
: "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold w-10 mr-8"
? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 px-3"
: "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold px-3"
}
>
Customize
Expand All @@ -171,14 +171,15 @@ const Navbar = () => {
to="shop"
className={({ isActive }) =>
isActive
? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 w-10 mr-8"
: "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold w-10 mr-8"
? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 px-3"
: "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold px-3"
}
>
Shop
</NavLink>
</div>
<div className="flex w-[69%] text-left justify-center items-center max-lg:w-full max-lg:justify-start">
<Translate />
<div className="flex w-[30%] text-left justify-center items-center max-lg:w-full max-lg:justify-start">
<div className="lg:hidden">
<Divide
size={20}
Expand Down
47 changes: 47 additions & 0 deletions client/src/components/Translator/Translator.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
body {
top: 0 !important;
}

font {
background-color: transparent !important;
box-shadow: none !important;
}

.google-translate-container {
display: flex;
align-items: center;
margin-left: 30px;
}

.goog-logo-link,
.goog-te-banner-frame,
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-ZVi9od-aZ2wEe,
.VIpgJd-ZVi9od-ORHb-OEVmcd {
display: none !important;
}

.goog-te-gadget {
color: transparent !important;
}

.goog-te-gadget .goog-te-combo {
background-color: transparent !important;
color: black !important;
font-size: 15px;
border: 1px solid black;
padding: 5px;
}

.goog-te-gadget .goog-te-combo option {
color: black;
}

#goog-gt-tt, .goog-te-balloon-frame{
display: none !important;
}

.goog-text-highlight {
background: none !important;
box-shadow: none !important;
}
40 changes: 40 additions & 0 deletions client/src/components/Translator/Translator.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { useEffect } from "react";
import "../Translator/Translator.css";

const Translate = () => {
useEffect(() => {
window.googleTranslateInit = () => {
if (!window.google.translate.TranslateElement) {
setTimeout(window.googleTranslateInit, 100);
} else {
new window.google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'en,hi,pa,sa,ur,bn,es,ja,ko,zh-CN,es,fr,de,it,ta,te',
layout: window.google.translate.TranslateElement.InlineLayout.HORIZONTAL,
defaultLanguage: 'en',
}, 'google_element');
}
};

const loadGoogleTranslateScript = () => {
if (!document.getElementById("google_translate_script")) {
const script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://translate.google.com/translate_a/element.js?cb=googleTranslateInit";
script.id = "google_translate_script";
script.onerror = () => console.error('Error loading Google Translate script');
document.body.appendChild(script);
}
};

loadGoogleTranslateScript();

if (window.google && window.google.translate) {
window.googleTranslateInit();
}
}, []);

return <div id="google_element" className="google-translate-container"></div>;
};

export default Translate;

0 comments on commit 73d43e4

Please sign in to comment.