Performed translation for UserPages in src/pages/

- Dashboard.jsx
- DrivethruLandingPage.jsx
- NotFoundPage.jsx

Also, added key:value pairs (English + French for now) for all the text in src/locales.
This commit is contained in:
K
2025-06-26 23:12:15 +05:30
parent 7dc8a49a8d
commit 41435aa4fc
5 changed files with 112 additions and 41 deletions
+35
View File
@@ -0,0 +1,35 @@
{
"dashboard": "Dashboard",
"failed_to_load_files": "Failed to load files. Please try again later.",
"skycrate": "Skycrate",
"hero_subtitle": "Store, Access & Share Your Files — Anytime, Anywhere!",
"hero_desc": "A simple, secure, and fast cloud storage solution for all your files. Upload, organize, and access with ease.",
"get_started": "Get Started",
"login": "Login",
"key_features": "Key Features",
"feature_easy_upload_title": "Easy Upload & Access",
"feature_easy_upload_desc": "Drag & drop, instant access.",
"feature_secure_title": "Secure & Private",
"feature_secure_desc": "End-to-end encryption.",
"feature_sharing_title": "Seamless Sharing",
"feature_sharing_desc": "Share files with one click.",
"feature_access_anywhere_title": "Access Anywhere",
"feature_access_anywhere_desc": "Works on all devices.",
"how_it_works": "How It Works",
"how_create_account_title": "Create an account",
"how_create_account_desc": "Sign up in seconds.",
"how_upload_files_title": "Upload files",
"how_upload_files_desc": "Drag & drop or select from your device.",
"how_manage_files_title": "Manage files",
"how_manage_files_desc": "Rename, move, or delete easily.",
"how_access_anytime_title": "Access anytime",
"how_access_anytime_desc": "Open files from any device.",
"not_found_title": "Page Not Found",
"not_found_description": "Sorry, we couldn't find the page you were looking for. It may have been moved or deleted.",
"go_home": "Go Home"
}
+34
View File
@@ -0,0 +1,34 @@
{
"dashboard": "Tableau de bord",
"failed_to_load_files": "Échec du chargement des fichiers. Veuillez réessayer plus tard.",
"skycrate": "Skycrate",
"hero_subtitle": "Stockez, accédez et partagez vos fichiers — à tout moment, partout !",
"hero_desc": "Une solution de stockage cloud simple, sécurisée et rapide pour tous vos fichiers. Téléchargez, organisez et accédez facilement.",
"get_started": "Commencer",
"login": "Connexion",
"key_features": "Fonctionnalités clés",
"feature_easy_upload_title": "Téléversement et accès faciles",
"feature_easy_upload_desc": "Glissez-déposez, accès instantané.",
"feature_secure_title": "Sécurisé et privé",
"feature_secure_desc": "Chiffrement de bout en bout.",
"feature_sharing_title": "Partage sans effort",
"feature_sharing_desc": "Partagez des fichiers en un clic.",
"feature_access_anywhere_title": "Accès partout",
"feature_access_anywhere_desc": "Fonctionne sur tous les appareils.",
"how_it_works": "Comment ça marche",
"how_create_account_title": "Créer un compte",
"how_create_account_desc": "Inscrivez-vous en quelques secondes.",
"how_upload_files_title": "Téléverser des fichiers",
"how_upload_files_desc": "Glissez-déposez ou sélectionnez depuis votre appareil.",
"how_manage_files_title": "Gérer les fichiers",
"how_manage_files_desc": "Renommez, déplacez ou supprimez facilement.",
"how_access_anytime_title": "Accès à tout moment",
"how_access_anytime_desc": "Ouvrez des fichiers depuis n'importe quel appareil.",
"not_found_title": "Page non trouvée",
"not_found_description": "Désolé, nous n'avons pas pu trouver la page que vous cherchiez. Elle a peut-être été déplacée ou supprimée.",
"go_home": "Accueil"
}
+6 -2
View File
@@ -1,16 +1,19 @@
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next"; // for multilinguality
import Sidebar from "../../components/Sidebar";
import FileList from "../../components/FileList";
import FileUploadModal from "../../components/FileUploadModal";
import { FiPlus } from "react-icons/fi";
const Dashboard = () => {
const { t } = useTranslation(); // for multilinguality
const [files, setFiles] = useState([]);
const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
const [error, setError] = useState("");
const navigate = useNavigate();
const API_URL = import.meta.env.VITE_API_URL;
const isUserLoggedIn = () => {
const token = localStorage.getItem("token");
const username = localStorage.getItem("username");
@@ -36,7 +39,7 @@ const Dashboard = () => {
setFiles(data);
} catch (error) {
console.error("Failed to fetch files:", error);
setError("Failed to load files. Please try again later.");
setError(t("failed_to_load_files"));
}
};
@@ -46,6 +49,7 @@ const Dashboard = () => {
} else {
fetchFiles();
}
// eslint-disable-next-line
}, [navigate]);
return (
@@ -54,7 +58,7 @@ const Dashboard = () => {
<div className="p-4 sm:ml-64">
<div className="p-4 border-2 border-gray-200 border-dashed rounded-lg mt-14">
<div className="w-full flex justify-between items-center">
<h1 className="text-2xl font-bold mb-4">Dashboard</h1>
<h1 className="text-2xl font-bold mb-4">{t("dashboard")}</h1>
<button
onClick={() => setIsUploadModalOpen(true)}
className="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center"
@@ -1,13 +1,15 @@
import Footer from "../../components/Footer";
import React from "react";
import { useState, useEffect } from "react";
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next"; // for multilinguality
const DrivethruLandingPage = () => {
const { t } = useTranslation(); // for multilinguality
const features = [
{
title: "Easy Upload & Access",
description: "Drag & drop, instant access.",
title: t("feature_easy_upload_title"),
description: t("feature_easy_upload_desc"),
icon: (
<svg
className="w-6 h-6"
@@ -25,8 +27,8 @@ const DrivethruLandingPage = () => {
),
},
{
title: "Secure & Private",
description: "End-to-end encryption.",
title: t("feature_secure_title"),
description: t("feature_secure_desc"),
icon: (
<svg
className="w-6 h-6"
@@ -44,8 +46,8 @@ const DrivethruLandingPage = () => {
),
},
{
title: "Seamless Sharing",
description: "Share files with one click.",
title: t("feature_sharing_title"),
description: t("feature_sharing_desc"),
icon: (
<svg
className="w-6 h-6"
@@ -63,8 +65,8 @@ const DrivethruLandingPage = () => {
),
},
{
title: "Access Anywhere",
description: "Works on all devices.",
title: t("feature_access_anywhere_title"),
description: t("feature_access_anywhere_desc"),
icon: (
<svg
className="w-6 h-6"
@@ -85,8 +87,8 @@ const DrivethruLandingPage = () => {
const howItWorks = [
{
title: "Create an account",
description: "Sign up in seconds.",
title: t("how_create_account_title"),
description: t("how_create_account_desc"),
icon: (
<svg
className="w-6 h-6"
@@ -104,8 +106,8 @@ const DrivethruLandingPage = () => {
),
},
{
title: "Upload files",
description: "Drag & drop or select from your device.",
title: t("how_upload_files_title"),
description: t("how_upload_files_desc"),
icon: (
<svg
className="w-6 h-6"
@@ -123,8 +125,8 @@ const DrivethruLandingPage = () => {
),
},
{
title: "Manage files",
description: "Rename, move, or delete easily.",
title: t("how_manage_files_title"),
description: t("how_manage_files_desc"),
icon: (
<svg
className="w-6 h-6"
@@ -148,8 +150,8 @@ const DrivethruLandingPage = () => {
),
},
{
title: "Access anytime",
description: "Open files from any device.",
title: t("how_access_anytime_title"),
description: t("how_access_anytime_desc"),
icon: (
<svg
className="w-6 h-6"
@@ -168,6 +170,7 @@ const DrivethruLandingPage = () => {
},
];
// UseEffect and handle....click function to handle set and handle the animation of features..
const [activeIndex, setActiveIndex] = useState(0);
const [isPaused, setIsPaused] = useState(false);
@@ -234,17 +237,16 @@ const DrivethruLandingPage = () => {
</svg>
</div>
<h1 className="text-4xl md:text-5xl font-bold text-black">
Skycrate
{t("skycrate")}
</h1>
</div>
<h2 className="text-xl md:text-2xl font-bold mb-4 md:mb-6 text-black">
Store, Access & Share Your Files Anytime, Anywhere!
{t("hero_subtitle")}
</h2>
<p className="text-gray-800 mb-6 md:mb-10 text-base md:text-lg">
A simple, secure, and fast cloud storage solution for all your
files. Upload, organize, and access with ease.
{t("hero_desc")}
</p>
{/* Buttons */}
@@ -253,13 +255,13 @@ const DrivethruLandingPage = () => {
to="/signup"
className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium rounded-full px-6 py-4 md:px-8 md:py-6 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl"
>
Get Started
{t("get_started")}
</Link>
<Link
to="/login"
className="bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-full px-6 py-4 md:px-8 md:py-6 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl"
>
Login
{t("login")}
</Link>
</div>
</div>
@@ -283,7 +285,7 @@ const DrivethruLandingPage = () => {
id="features"
className="w-full max-w-5xl mx-auto p-6 sm:p-8 bg-gray-100 rounded-lg shadow-lg"
>
<h2 className="text-3xl font-bold text-center mb-8">Key Features</h2>
<h2 className="text-3xl font-bold text-center mb-8">{t("key_features")}</h2>
<div className="flex flex-col-reverse md:flex-row items-center gap-8 lg:gap-12">
{/* Left Side - Image */}
<div className="w-full md:w-1/2 flex justify-center">
@@ -328,7 +330,7 @@ const DrivethruLandingPage = () => {
id="howItWorks"
className="w-full max-w-5xl mx-auto p-6 sm:p-8 bg-gray-100 rounded-lg shadow-lg"
>
<h2 className="text-3xl font-bold text-center mb-8">How It Works</h2>
<h2 className="text-3xl font-bold text-center mb-8">{t("how_it_works")}</h2>
<div className="flex flex-col md:flex-row items-center gap-8 lg:gap-12">
{/* Left Side - Feature List */}
<div className="w-full md:w-1/2">
+7 -11
View File
@@ -1,29 +1,25 @@
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next"; // for multilinguality
const NotFoundPage = () => {
const { t } = useTranslation(); // for multilinguality
return (
<div className="flex flex-col items-center justify-center h-screen bg-gray-100 p-4">
{/* Placeholder SVG - Replace this with your SVG */}
<img
src="/404.png"
style={{ width: "30%", height: "auto" }}
alt="404 Not Found"
></img>
{/* Page number and title */}
<h2 className="text-2xl font-bold mb-4 mt-4">Page Not Found</h2>
{/* Description text */}
/>
<h2 className="text-2xl font-bold mb-4 mt-4">{t("not_found_title")}</h2>
<p className="text-center text-gray-700 mb-6">
Sorry, we couldn&apos;t find the page you were looking for. It may have
been moved or deleted.
{t("not_found_description")}
</p>
{/* Call-to-action button */}
<Link
to="/"
className="px-6 py-2 bg-[#1877F2] text-white rounded hover:bg-blue-600 transition duration-200"
>
Go Home
{t("go_home")}
</Link>
</div>
);