Performed translation for some components in ./src

- Footer.jsx - Sidebar.jsx Also, added key:value pairs (English + French for now) for all the text in src/locales. Need to perform translation for FileList.jsx & FileUploadModal.jsx. Will do once backend is accessible again.
2025-06-27 00:00:33 +05:30
parent 2cce8d89ca
commit 73a1c521d5
4 changed files with 91 additions and 30 deletions
@@ -8,15 +8,17 @@ import {
  Phone,
  MapPin,
 } from "lucide-react";
+import { useTranslation } from "react-i18next"; // for multilinguality

 const Footer = () => {
+  const { t } = useTranslation(); // for multilinguality
  const [email, setEmail] = useState("");

  //Currently storing user email in localstorage
  const handleSubscribe = () => {
    if (email.trim() !== "") {
      localStorage.setItem("subscribedEmail", email);
-      alert("You have successfully subscribed!");
+      alert(t("subscribe_success")); 
      setEmail("");
    }
  };
@@ -42,10 +44,10 @@ const Footer = () => {
                  />
                </svg>
              </div>
-              <h3 className="text-2xl font-bold text-white">Skycrate</h3>
+              <h3 className="text-2xl font-bold text-white">{t("footer_brand")}</h3>
            </div>
            <p className="text-white/90">
-              Your secure cloud storage solution for all your digital needs.
+              {t("footer_tagline")}
            </p>
            <div className="flex space-x-4">
              <a
@@ -81,14 +83,14 @@ const Footer = () => {

          {/* Quick Links */}
          <div>
-            <h4 className="font-semibold text-white mb-4">Quick Links</h4>
+            <h4 className="font-semibold text-white mb-4">{t("footer_quick_links")}</h4>
            <ul className="space-y-2">
              <li>
                <a
                  href="#about"
                  className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
                >
-                  About Us
+                  {t("footer_about_us")}
                </a>
              </li>
              <li>
@@ -96,7 +98,7 @@ const Footer = () => {
                  href="#features"
                  className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
                >
-                  Features
+                  {t("footer_features")}
                </a>
              </li>
              <li>
@@ -104,7 +106,7 @@ const Footer = () => {
                  href="#howItWorks"
                  className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
                >
-                  How It Works
+                  {t("footer_how_it_works")}
                </a>
              </li>
            </ul>
@@ -112,43 +114,42 @@ const Footer = () => {

          {/* Contact Info */}
          <div>
-            <h4 className="font-semibold text-white mb-4">Contact</h4>
+            <h4 className="font-semibold text-white mb-4">{t("footer_contact")}</h4>
            <ul className="space-y-2">
              <li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
                <Mail className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
-                support@drivethru.com
+                {t("footer_email")}
              </li>
              <li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
                <Phone className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
-                +91 3628206234
+                {t("footer_phone")}
              </li>
              <li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
                <MapPin className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
-                123 Cloud Street, Digital City
+                {t("footer_address")}
              </li>
            </ul>
          </div>

          {/* Newsletter */}
          <div>
-            <h4 className="font-semibold text-white mb-4">Stay Updated</h4>
+            <h4 className="font-semibold text-white mb-4">{t("footer_newsletter_title")}</h4>
            <p className="text-white/90 mb-4">
-              Get exclusive tips, updates on new features, and special offers
-              directly in your inbox.
+              {t("footer_newsletter_desc")}
            </p>
            <div className="space-y-4">
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
-                placeholder="Enter your email"
+                placeholder={t("footer_newsletter_placeholder")}
                className="w-full px-4 py-2 rounded-md bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:bg-white/20 transition-all duration-200 outline-none focus:ring-2 focus:ring-white/30"
              />
              <button
                onClick={handleSubscribe}
                className="w-full px-4 py-2 rounded-md bg-white text-blue-600 font-medium hover:bg-opacity-90 transition-all duration-200 transform hover:scale-105"
              >
-                Subscribe to Newsletter
+                {t("footer_newsletter_button")}
              </button>
            </div>
          </div>
@@ -158,25 +159,25 @@ const Footer = () => {

        {/* Bottom Section */}
        <div className="flex flex-col md:flex-row justify-between items-center text-white/90 text-sm">
-          <p>© {new Date().getFullYear()} Skycrate. All rights reserved.</p>
+          <p>© {new Date().getFullYear()} {t("footer_brand")}. {t("footer_rights")}</p>
          <div className="flex gap-4 mt-4 md:mt-0">
            <a
              href="#"
              className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
            >
-              Privacy Policy
+              {t("footer_privacy_policy")}
            </a>
            <a
              href="#"
              className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
            >
-              Terms of Service
+              {t("footer_terms_of_service")}
            </a>
            <a
              href="#"
              className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
            >
-              Cookie Policy
+              {t("footer_cookie_policy")}
            </a>
          </div>
        </div>
@@ -1,15 +1,17 @@
 import { useState, useEffect, useRef } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { toast } from "react-hot-toast";
+import { useTranslation } from "react-i18next"; // for multilinguality

 const Sidebar = () => {
+  const { t } = useTranslation(); // for multilinguality
  const navigate = useNavigate(); // Hook for programmatic navigation
  const [userMenuOpen, setUserMenuOpen] = useState(false);
  const menuRef = useRef();

  // Show loading toast and perform logout
  const handleLogout = () => {
-    const loadingToast = toast.loading("Logging out...");
+    const loadingToast = toast.loading(t("sidebar_logging_out"));

    // Simulate a delay (for example, network request)
    setTimeout(() => {
@@ -23,7 +25,7 @@ const Sidebar = () => {

      // Show success toast after logout
      toast.update(loadingToast, {
-        render: "Logged out successfully!",
+        render: t("sidebar_logged_out"),
        type: "success",
        isLoading: false,
        autoClose: 2000,
@@ -55,7 +57,7 @@ const Sidebar = () => {
              type="button"
              className="inline-flex items-center p-2 text-lg text-white rounded-lg sm:hidden hover:bg-[#37A0EA] focus:outline-none"
            >
-              <span className="sr-only">Open sidebar</span>
+              <span className="sr-only">{t("sidebar_open_sidebar")}</span>
              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                <path
                  clipRule="evenodd"
@@ -67,7 +69,7 @@ const Sidebar = () => {
            <Link to="/" className="flex ms-2 md:me-24">
              <img src="./image.png" className="h-8 me-3" alt="Skycrate Logo" />
              <span className="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap">
-                Skycrate
+                {t("sidebar_brand")}
              </span>
            </Link>
          </div>
@@ -84,11 +86,11 @@ const Sidebar = () => {
                onClick={() => setUserMenuOpen((o) => !o)}
                className="flex text-lg bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300"
              >
-                <span className="sr-only">Open user menu</span>
+                <span className="sr-only">{t("sidebar_open_user_menu")}</span>
                <img
                  className="w-8 h-8 rounded-full"
                  src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
-                  alt="User Photo"
+                  alt={t("sidebar_user_photo")}
                />
              </button>

@@ -109,7 +111,7 @@ const Sidebar = () => {
                        className="w-full text-left px-4 py-2 text-lg text-white hover:bg-[#37A0EA]"
                        role="menuitem"
                      >
-                        Log out
+                        {t("sidebar_logout")}
                      </button>
                    </li>
                  </ul>
@@ -139,7 +141,7 @@ const Sidebar = () => {
                >
                  <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z" />
                </svg>
-                <span className="ms-3">Starred</span>
+                <span className="ms-3">{t("sidebar_starred")}</span>
              </Link>
            </li>
            {/* ...additional sidebar items... */}
@@ -58,7 +58,36 @@
  "signup_failed": "Signup failed.",
  "folder_creation_failed": "Failed to create user folder.",
  "signup_success": "Successfully registered and folder created!",
-  "an_error_occurred": "An error occurred. Please try again."
+  "an_error_occurred": "An error occurred. Please try again.",
+
+  "footer_brand": "Skycrate",
+  "footer_tagline": "Your secure cloud storage solution for all your digital needs.",
+  "footer_quick_links": "Quick Links",
+  "footer_about_us": "About Us",
+  "footer_features": "Features",
+  "footer_how_it_works": "How It Works",
+  "footer_contact": "Contact",
+  "footer_email": "support@drivethru.com",
+  "footer_phone": "+91 3628206234",
+  "footer_address": "123 Cloud Street, Digital City",
+  "footer_newsletter_title": "Stay Updated",
+  "footer_newsletter_desc": "Get exclusive tips, updates on new features, and special offers directly in your inbox.",
+  "footer_newsletter_placeholder": "Enter your email",
+  "footer_newsletter_button": "Subscribe to Newsletter",
+  "subscribe_success": "You have successfully subscribed!",
+  "footer_rights": "All rights reserved.",
+  "footer_privacy_policy": "Privacy Policy",
+  "footer_terms_of_service": "Terms of Service",
+  "footer_cookie_policy": "Cookie Policy",
+
+  "sidebar_logging_out": "Logging out...",
+  "sidebar_logged_out": "Logged out successfully!",
+  "sidebar_open_sidebar": "Open sidebar",
+  "sidebar_brand": "Skycrate",
+  "sidebar_open_user_menu": "Open user menu",
+  "sidebar_user_photo": "User Photo",
+  "sidebar_logout": "Log out",
+  "sidebar_starred": "Starred"


 }
@@ -57,7 +57,36 @@
  "signup_failed": "Échec de l'inscription.",
  "failed_create_folder": "Échec de la création du dossier utilisateur.",
  "signup_success": "Inscription réussie et dossier créé !",
-  "an_error_occurred": "Une erreur s'est produite. Veuillez réessayer."
+  "an_error_occurred": "Une erreur s'est produite. Veuillez réessayer.",
+
+  "footer_brand": "Skycrate",
+  "footer_tagline": "Votre solution de stockage cloud sécurisée pour tous vos besoins numériques.",
+  "footer_quick_links": "Liens rapides",
+  "footer_about_us": "À propos",
+  "footer_features": "Fonctionnalités",
+  "footer_how_it_works": "Comment ça marche",
+  "footer_contact": "Contact",
+  "footer_email": "support@drivethru.com",
+  "footer_phone": "+91 3628206234",
+  "footer_address": "123 Rue du Cloud, Ville Digitale",
+  "footer_newsletter_title": "Restez informé",
+  "footer_newsletter_desc": "Recevez des conseils exclusifs, des mises à jour sur les nouvelles fonctionnalités et des offres spéciales directement dans votre boîte de réception.",
+  "footer_newsletter_placeholder": "Entrez votre e-mail",
+  "footer_newsletter_button": "S'abonner à la newsletter",
+  "subscribe_success": "Vous vous êtes abonné avec succès !",
+  "footer_rights": "Tous droits réservés.",
+  "footer_privacy_policy": "Politique de confidentialité",
+  "footer_terms_of_service": "Conditions d'utilisation",
+  "footer_cookie_policy": "Politique relative aux cookies",
+
+  "sidebar_logging_out": "Déconnexion...",
+  "sidebar_logged_out": "Déconnecté avec succès !",
+  "sidebar_open_sidebar": "Ouvrir la barre latérale",
+  "sidebar_brand": "Skycrate",
+  "sidebar_open_user_menu": "Ouvrir le menu utilisateur",
+  "sidebar_user_photo": "Photo de l'utilisateur",
+  "sidebar_logout": "Se déconnecter",
+  "sidebar_starred": "Favoris"


 }