From 5975c04e03dbfdf2a817ffac0ac570eaf99ec700 Mon Sep 17 00:00:00 2001 From: ankit Date: Sun, 19 Oct 2025 22:34:56 +0530 Subject: [PATCH 01/10] fixed #165: website language not change on language switch --- messages/[en]/common.json | 11 ++++ messages/[es]/common.json | 11 ++++ messages/[es]/homepage.json | 47 ++++++++++++++ messages/[fr]/common.json | 12 ++++ messages/[fr]/homepage.json | 86 ++++++++++++++----------- messages/[hi]/common.json | 11 ++++ messages/[hi]/homepage.json | 47 ++++++++++++++ src/app/components/LanguageSwitcher.jsx | 48 ++++++++++++-- src/app/pages/Navbar.jsx | 5 +- src/i18n/request.ts | 12 +++- 10 files changed, 243 insertions(+), 47 deletions(-) create mode 100644 messages/[en]/common.json create mode 100644 messages/[es]/common.json create mode 100644 messages/[es]/homepage.json create mode 100644 messages/[fr]/common.json create mode 100644 messages/[hi]/common.json create mode 100644 messages/[hi]/homepage.json diff --git a/messages/[en]/common.json b/messages/[en]/common.json new file mode 100644 index 0000000..8f25026 --- /dev/null +++ b/messages/[en]/common.json @@ -0,0 +1,11 @@ +{ + "navigation": { + "home": "Home", + "about": "About", + "contact": "Contact", + "components": "Components", + "playground": "🎮 Playground", + "analytics": "Analytics", + "feedback": "Feedback" + } +} \ No newline at end of file diff --git a/messages/[es]/common.json b/messages/[es]/common.json new file mode 100644 index 0000000..870ae72 --- /dev/null +++ b/messages/[es]/common.json @@ -0,0 +1,11 @@ +{ + "navigation": { + "home": "Inicio", + "about": "Acerca de", + "contact": "Contacto", + "components": "Componentes", + "playground": "🎮 Zona de juegos", + "analytics": "Analíticas", + "feedback": "Retroalimentación" + } +} \ No newline at end of file diff --git a/messages/[es]/homepage.json b/messages/[es]/homepage.json new file mode 100644 index 0000000..0218eee --- /dev/null +++ b/messages/[es]/homepage.json @@ -0,0 +1,47 @@ +{ + "hero_title": "Crea aplicaciones React hermosas y de alto rendimiento con facilidad", + "hero_description": "Nuestra biblioteca de componentes ofrece a los desarrolladores elementos de interfaz personalizables y accesibles, optimizados para el ecosistema de React.", + "explore_components": "Explorar componentes", + "try_playground": "🎮 Probar el Playground", + "beautiful_components": "Componentes hermosos", + "ready_to_use": "Listo para usar en tus proyectos", + "features_title": "Optimizado para React", + "features_description": "Componentes ligeros y rápidos, diseñados específicamente para aplicaciones React.", + "themes_title": "Temas personalizados", + "themes_description": "Admite una personalización sencilla con temas claros, oscuros y personalizados.", + "apis_title": "APIs flexibles", + "apis_description": "Props simples e intuitivas que permiten un control total sobre tus componentes.", + "documentation_title": "Bien documentado", + "documentation_description": "Documentación completa y clara para facilitar tu experiencia de desarrollo.", + "featured_components": "Componentes destacados", + "simple_card_title": "Tarjeta simple", + "simple_card_description": "Tarjeta limpia y minimalista con soporte para acciones.", + "feature_card_title": "Tarjeta de función", + "feature_card_description": "Destaca las funciones de tu aplicación con estilo.", + "pricing_card_plan": "Pro", + "pricing_card_price": "$9/mes", + "pricing_card_features": [ + "10 proyectos", + "Soporte prioritario", + "Usuarios ilimitados" + ], + "data_card_title": "Proyectos activos", + "data_card_icon": "📂", + "data_card_trend": "8", + "getting_started": "Primeros pasos", + "getting_started_step_one_title": "Agregar el paquete", + "getting_started_step_one_description": "Instálalo con npm o yarn para una fácil integración.", + "getting_started_step_one_code": "npm install my-components-library", + "getting_started_step_2_title": "Importar componentes", + "getting_started_step_2_description": "Importa solo lo que necesites de la biblioteca para mantener los paquetes pequeños.", + "getting_started_step_two_code": "import '{ Button, Card }' from 'my-components-library';", + "getting_started_step_3_title": "Usar componentes", + "getting_started_step_3_description": "Aplica los componentes directamente con props fáciles de usar.", + "getting_started_step_3_code": "''", + "cta_title": "¿Listo para crear aplicaciones impresionantes?", + "cta_button": "Comienza a construir ahora", + "theme": { + "toggle_light": "Cambiar a modo claro", + "toggle_dark": "Cambiar a modo oscuro" + } +} diff --git a/messages/[fr]/common.json b/messages/[fr]/common.json new file mode 100644 index 0000000..9628a50 --- /dev/null +++ b/messages/[fr]/common.json @@ -0,0 +1,12 @@ + +{ + "navigation": { + "home": "Accueil", + "about": "À propos", + "contact": "Contact", + "components": "Composants", + "playground": "🎮 Bac à sable", + "analytics": "Analytique", + "feedback": "Retour d'information" + } +} \ No newline at end of file diff --git a/messages/[fr]/homepage.json b/messages/[fr]/homepage.json index cef5105..a2ab394 100644 --- a/messages/[fr]/homepage.json +++ b/messages/[fr]/homepage.json @@ -1,39 +1,47 @@ - { - "hero_title": "Créez des applications React belles et performantes facilement", - "hero_description": "Notre bibliothèque de composants permet aux développeurs de disposer d'éléments d'interface personnalisables et accessibles optimisés pour les écosystèmes React.", - "explore_components": "Explorer les composants", - "try_playground": "🎮 Essayer le bac à sable", - "beautiful_components": "Composants magnifiques", - "ready_to_use": "Prêt à l'emploi dans vos projets", - "features_title": "Optimisé pour React", - "features_description": "Composants légers et rapides, conçus spécifiquement pour les applications React.", - "themes_title": "Thèmes personnalisés", - "themes_description": "Prend en charge une personnalisation sans effort avec des thèmes clairs, sombres et personnalisés.", - "apis_title": "APIs flexibles", - "apis_description": "Props simples et intuitifs permettant un contrôle total sur vos composants.", - "documentation_title": "Bien documenté", - "documentation_description": "Documentation complète et claire pour faciliter votre expérience de développement.", - "featured_components": "Composants vedettes", - "simple_card_title": "Carte simple", - "simple_card_description": "Carte épurée et minimaliste avec prise en charge des actions.", - "feature_card_title": "Carte de fonctionnalités", - "feature_card_description": "Mettez en valeur les fonctionnalités de votre application avec style.", - "pricing_card_plan": "Pro", - "pricing_card_price": "$9/mois", - "pricing_card_features": ["10 projets", "Support prioritaire", "Utilisateurs illimités"], - "data_card_title": "Projets actifs", - "data_card_icon": "📂", - "data_card_trend": 8, - "getting_started": "Premiers pas", - "getting_started_step_1_title": "Ajouter le paquet", - "getting_started_step_1_description": "Installez avec npm ou yarn pour une intégration facile.", - "getting_started_step_1_code": "npm install my-components-library", - "getting_started_step_2_title": "Importer des composants", - "getting_started_step_2_description": "Importez uniquement ce dont vous avez besoin depuis la bibliothèque pour garder les bundles légers.", - "getting_started_step_2_code": "import { Button, Card } from 'my-components-library';", - "getting_started_step_3_title": "Utiliser des composants", - "getting_started_step_3_description": "Appliquez directement les composants avec des props faciles à utiliser.", - "getting_started_step_3_code": "", - "cta_title": "Prêt à créer des applications époustouflantes ?", - "cta_button": "Commencer à construire maintenant" - } \ No newline at end of file +{ + "hero_title": "Créez de magnifiques applications React performantes en toute simplicité", + "hero_description": "Notre bibliothèque de composants permet aux développeurs d’utiliser des éléments d’interface personnalisables et accessibles, optimisés pour l’écosystème React.", + "explore_components": "Explorer les composants", + "try_playground": "🎮 Essayer le terrain de jeu", + "beautiful_components": "Beaux composants", + "ready_to_use": "Prêt à être utilisé dans vos projets", + "features_title": "Optimisé pour React", + "features_description": "Des composants légers et rapides, conçus spécifiquement pour les applications React.", + "themes_title": "Thèmes personnalisés", + "themes_description": "Prend en charge une personnalisation facile avec des thèmes clairs, sombres et personnalisés.", + "apis_title": "API flexibles", + "apis_description": "Des props simples et intuitives offrant un contrôle total sur vos composants.", + "documentation_title": "Bien documenté", + "documentation_description": "Une documentation complète et claire pour faciliter votre expérience de développement.", + "featured_components": "Composants mis en avant", + "simple_card_title": "Carte simple", + "simple_card_description": "Carte propre et minimaliste avec support d’action.", + "feature_card_title": "Carte de fonctionnalité", + "feature_card_description": "Mettez en valeur les fonctionnalités de votre application avec style.", + "pricing_card_plan": "Pro", + "pricing_card_price": "9 $/mois", + "pricing_card_features": [ + "10 projets", + "Support prioritaire", + "Utilisateurs illimités" + ], + "data_card_title": "Projets actifs", + "data_card_icon": "📂", + "data_card_trend": "8", + "getting_started": "Bien démarrer", + "getting_started_step_one_title": "Ajouter le package", + "getting_started_step_one_description": "Installez-le avec npm ou yarn pour une intégration facile.", + "getting_started_step_one_code": "npm install my-components-library", + "getting_started_step_2_title": "Importer les composants", + "getting_started_step_2_description": "Importez uniquement ce dont vous avez besoin pour garder des bundles légers.", + "getting_started_step_two_code": "import '{ Button, Card }' from 'my-components-library';", + "getting_started_step_3_title": "Utiliser les composants", + "getting_started_step_3_description": "Appliquez directement les composants avec des props simples à utiliser.", + "getting_started_step_3_code": "''", + "cta_title": "Prêt à créer des applications époustouflantes ?", + "cta_button": "Commencer maintenant", + "theme": { + "toggle_light": "Passer au mode clair", + "toggle_dark": "Passer au mode sombre" + } +} diff --git a/messages/[hi]/common.json b/messages/[hi]/common.json new file mode 100644 index 0000000..01587d8 --- /dev/null +++ b/messages/[hi]/common.json @@ -0,0 +1,11 @@ +{ + "navigation": { + "home": "होम", + "about": "परिचय", + "contact": "संपर्क", + "components": "घटक", + "playground": "🎮 प्लेग्राउंड", + "analytics": "विश्लेषण", + "feedback": "प्रतिक्रिया" + } +} diff --git a/messages/[hi]/homepage.json b/messages/[hi]/homepage.json new file mode 100644 index 0000000..8e245f4 --- /dev/null +++ b/messages/[hi]/homepage.json @@ -0,0 +1,47 @@ +{ + "hero_title": "आसानी से सुंदर और प्रभावी React ऐप्स बनाएं", + "hero_description": "हमारी कंपोनेंट लाइब्रेरी डेवलपर्स को अनुकूलन योग्य और सुलभ UI तत्व प्रदान करती है, जो React इकोसिस्टम के लिए अनुकूलित हैं।", + "explore_components": "कंपोनेंट्स देखें", + "try_playground": "🎮 प्लेग्राउंड आज़माएँ", + "beautiful_components": "सुंदर कंपोनेंट्स", + "ready_to_use": "आपके प्रोजेक्ट्स में उपयोग के लिए तैयार", + "features_title": "React के लिए अनुकूलित", + "features_description": "हल्के और तेज़ कंपोनेंट्स, विशेष रूप से React एप्लिकेशन के लिए डिज़ाइन किए गए।", + "themes_title": "कस्टम थीम्स", + "themes_description": "हल्के, डार्क और कस्टम थीम्स के साथ आसान अनुकूलन का समर्थन करता है।", + "apis_title": "लचीले APIs", + "apis_description": "सरल और सहज प्रॉप्स जो आपके कंपोनेंट्स पर पूर्ण नियंत्रण प्रदान करते हैं।", + "documentation_title": "अच्छी तरह से प्रलेखित", + "documentation_description": "पूर्ण और स्पष्ट दस्तावेज़ जो आपके विकास अनुभव को आसान बनाता है।", + "featured_components": "विशेष कंपोनेंट्स", + "simple_card_title": "सरल कार्ड", + "simple_card_description": "एक स्वच्छ, न्यूनतम कार्ड जिसमें एक्शन सपोर्ट है।", + "feature_card_title": "फ़ीचर कार्ड", + "feature_card_description": "अपनी ऐप की विशेषताओं को स्टाइल के साथ उजागर करें।", + "pricing_card_plan": "प्रो", + "pricing_card_price": "$9/माह", + "pricing_card_features": [ + "10 प्रोजेक्ट्स", + "प्राथमिकता समर्थन", + "असीमित उपयोगकर्ता" + ], + "data_card_title": "सक्रिय प्रोजेक्ट्स", + "data_card_icon": "📂", + "data_card_trend": "8", + "getting_started": "शुरुआत करें", + "getting_started_step_one_title": "पैकेज जोड़ें", + "getting_started_step_one_description": "आसान एकीकरण के लिए npm या yarn से इंस्टॉल करें।", + "getting_started_step_one_code": "npm install my-components-library", + "getting_started_step_2_title": "कंपोनेंट्स इम्पोर्ट करें", + "getting_started_step_2_description": "लाइब्रेरी से केवल वही इम्पोर्ट करें जिसकी आपको ज़रूरत है ताकि बंडल हल्के रहें।", + "getting_started_step_two_code": "import '{ Button, Card }' from 'my-components-library';", + "getting_started_step_3_title": "कंपोनेंट्स का उपयोग करें", + "getting_started_step_3_description": "आसान प्रॉप्स के साथ सीधे कंपोनेंट्स लागू करें।", + "getting_started_step_3_code": "''", + "cta_title": "क्या आप शानदार ऐप्स बनाने के लिए तैयार हैं?", + "cta_button": "अभी शुरू करें", + "theme": { + "toggle_light": "लाइट मोड पर स्विच करें", + "toggle_dark": "डार्क मोड पर स्विच करें" + } +} diff --git a/src/app/components/LanguageSwitcher.jsx b/src/app/components/LanguageSwitcher.jsx index 09f5134..8ded19a 100644 --- a/src/app/components/LanguageSwitcher.jsx +++ b/src/app/components/LanguageSwitcher.jsx @@ -1,25 +1,61 @@ import React from 'react'; -import { useI18n } from '../context/I18nContext'; const LanguageSwitcher = () => { - const { locale, locales, changeLanguage } = useI18n(); + const [isOpen,setIsOpen]=React.useState(false); + // Function to get cookie value + const getCookie = (name) => { + if (typeof document === 'undefined') return null; + const value = `; ${document.cookie}`; + const parts = value.split(`; ${name}=`); + if (parts.length === 2) return parts.pop().split(';').shift(); + return null; + }; + + // Function to set cookie + const setCookie = (name, value, days = 365) => { + if (typeof document === 'undefined') return; + const expires = new Date(); + expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000)); + document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`; + }; + + const locales = ['en', 'es', 'fr','hi']; + const [locale, setLocale] = React.useState(() => { + const savedLocale = getCookie('selected-language'); + return savedLocale && locales.includes(savedLocale) ? savedLocale : 'en'; + }); + + const changeLanguage = (lang) => { + + + setLocale(lang); + setCookie('selected-language', lang); + window.location.reload(); + // Additional logic to change the app's language can be added here + }; const languageNames = { en: 'English', es: 'Español', - fr: 'Français' + fr: 'Français', + hi: 'हिन्दी', }; return (
- - -
+ +
{locales.map((lang) => (
-
-

Community

+

{t('community.title')}

- Join our growing community of developers who are building amazing user interfaces with MyLibrary. + {t('community.description')}

- GitHub Stars + {t('community.githubStars')} 1.2k+
- Contributors + {t('community.contributors')} 25+
- Downloads + {t('community.downloads')} 10k+
- Built with ❤️ by the open source community + {t('community.builtWithLove')}
- {/* Contributors Section */}
-

Our Contributors

+

{t('contributors.title')}

-

- Thank you to all the amazing developers who have contributed to making this component library better! + {t('contributors.thankYou')}

- {loading ? (
-

Loading contributors...

+

{t('contributors.loading')}

) : error ? (
@@ -398,21 +365,18 @@ export default function AboutPage() {
{`${contributor.login}'s
-

{contributor.login}

-

- {contributor.contributions} contribution{contributor.contributions !== 1 ? 's' : ''} + {t('contributors.contributions', { count: contributor.contributions })}

- - Profile + {t('contributors.profile')}
))} - {contributors.length > 0 && (

- Want to join our contributors? Check out our{' '} + {t('contributors.join')} - GitHub repository + {t('contributors.githubRepo')} - {' '}to get started! + {t('contributors.getStarted')}

)} )}
- {/* License & Links Section */}
-

Open Source & Free

+

{t('license.title')}

- MyLibrary is released under the MIT License, making it free to use for both personal and commercial projects. + {t('license.description')}

- View on GitHub + {t('license.github')} - Get in Touch + {t('license.contact')}
diff --git a/src/i18n/request.ts b/src/i18n/request.ts index b121070..e753a05 100644 --- a/src/i18n/request.ts +++ b/src/i18n/request.ts @@ -14,18 +14,22 @@ const messagesMap: Record< en: { homepage: () => import("../../messages/[en]/homepage.json"), common: () => import("../../messages/[en]/common.json"), + about: () => import("../../messages/[en]/about.json"), }, fr: { homepage: () => import("../../messages/[fr]/homepage.json"), - common: () => import("../../messages/[fr]/common.json"), + common: () => import("../../messages/[fr]/common.json"), + about: () => import("../../messages/[fr]/about.json"), }, es: { homepage: () => import("../../messages/[es]/homepage.json"), common: () => import("../../messages/[es]/common.json"), + about: () => import("../../messages/[es]/about.json"), }, hi: { homepage: () => import("../../messages/[hi]/homepage.json"), common: () => import("../../messages/[hi]/common.json"), + about: () => import("../../messages/[hi]/about.json"), } }; From 28f11fbdfeb04da113ff5dea85ce3a4cdf427944 Mon Sep 17 00:00:00 2001 From: ankit Date: Thu, 23 Oct 2025 02:10:22 +0530 Subject: [PATCH 03/10] added translations for contact page --- messages/[en]/contact.json | 78 +++++++++++++++++++++++++++++++++ messages/[es]/contact.json | 78 +++++++++++++++++++++++++++++++++ messages/[fr]/contact.json | 78 +++++++++++++++++++++++++++++++++ messages/[hi]/contact.json | 78 +++++++++++++++++++++++++++++++++ src/app/contact/page.jsx | 90 ++++++++++++++++++-------------------- src/i18n/request.ts | 6 ++- 6 files changed, 359 insertions(+), 49 deletions(-) create mode 100644 messages/[en]/contact.json create mode 100644 messages/[es]/contact.json create mode 100644 messages/[fr]/contact.json create mode 100644 messages/[hi]/contact.json diff --git a/messages/[en]/contact.json b/messages/[en]/contact.json new file mode 100644 index 0000000..28580be --- /dev/null +++ b/messages/[en]/contact.json @@ -0,0 +1,78 @@ +{ + "header": { + "title": "Get in Touch", + "description": "Have questions about our component library? Want to contribute or report a bug? We'd love to hear from you!" + }, + "form": { + "title": "Send us a Message", + "success": "Thank you for your message! We'll get back to you soon.", + "error": "Sorry, there was an error sending your message. Please try again.", + "sending": "Sending...", + "send": "Send Message", + "fields": { + "name": { + "label": "Full Name *", + "placeholder": "Enter your full name" + }, + "email": { + "label": "Email Address *", + "placeholder": "your.email@example.com" + }, + "subject": { + "label": "Subject *", + "placeholder": "Select a subject", + "options": { + "bugReport": "Bug Report", + "featureRequest": "Feature Request", + "documentation": "Documentation", + "contribution": "Contribution", + "support": "General Support", + "other": "Other" + } + }, + "message": { + "label": "Message *", + "placeholder": "Tell us how we can help you..." + } + } + }, + "errors": { + "nameRequired": "Name is required", + "emailRequired": "Email is required", + "emailInvalid": "Please enter a valid email address", + "subjectRequired": "Subject is required", + "messageRequired": "Message is required", + "messageLength": "Message must be at least 10 characters long" + }, + "info": { + "title": "Contact Information", + "email": { + "title": "Email" + }, + "github": { + "title": "GitHub" + }, + "linktree": { + "title": "Linktree", + "description": "Check out our Linktree for all our social links:" + } + }, + "social": { + "title": "Follow Us" + }, + "faq": { + "title": "Frequently Asked Questions", + "q1": { + "title": "How can I contribute to the library?", + "description": "Check out our CONTRIBUTING.md file for guidelines on how to contribute components, report bugs, or suggest improvements." + }, + "q2": { + "title": "Is this library free to use?", + "description": "Yes! This component library is open source and free to use in both personal and commercial projects." + }, + "q3": { + "title": "How do I report a bug?", + "description": "You can report bugs through our GitHub issues page or by using the contact form above with \"Bug Report\" as the subject." + } + } +} diff --git a/messages/[es]/contact.json b/messages/[es]/contact.json new file mode 100644 index 0000000..04dfc3e --- /dev/null +++ b/messages/[es]/contact.json @@ -0,0 +1,78 @@ +{ + "header": { + "title": "Contáctanos", + "description": "¿Tienes preguntas sobre nuestra biblioteca de componentes? ¿Quieres contribuir o reportar un error? ¡Nos encantaría saber de ti!" + }, + "form": { + "title": "Envíanos un mensaje", + "success": "¡Gracias por tu mensaje! Nos pondremos en contacto contigo pronto.", + "error": "Lo sentimos, hubo un error al enviar tu mensaje. Por favor, inténtalo de nuevo.", + "sending": "Enviando...", + "send": "Enviar mensaje", + "fields": { + "name": { + "label": "Nombre completo *", + "placeholder": "Ingresa tu nombre completo" + }, + "email": { + "label": "Correo electrónico *", + "placeholder": "your.email@example.com" + }, + "subject": { + "label": "Asunto *", + "placeholder": "Selecciona un asunto", + "options": { + "bugReport": "Reporte de error", + "featureRequest": "Solicitud de función", + "documentation": "Documentación", + "contribution": "Contribución", + "support": "Soporte general", + "other": "Otro" + } + }, + "message": { + "label": "Mensaje *", + "placeholder": "Cuéntanos cómo podemos ayudarte..." + } + } + }, + "errors": { + "nameRequired": "El nombre es obligatorio", + "emailRequired": "El correo electrónico es obligatorio", + "emailInvalid": "Por favor, ingresa una dirección de correo válida", + "subjectRequired": "El asunto es obligatorio", + "messageRequired": "El mensaje es obligatorio", + "messageLength": "El mensaje debe tener al menos 10 caracteres" + }, + "info": { + "title": "Información de contacto", + "email": { + "title": "Correo electrónico" + }, + "github": { + "title": "GitHub" + }, + "linktree": { + "title": "Linktree", + "description": "Consulta nuestro Linktree para todos nuestros enlaces sociales:" + } + }, + "social": { + "title": "Síguenos" + }, + "faq": { + "title": "Preguntas frecuentes", + "q1": { + "title": "¿Cómo puedo contribuir a la biblioteca?", + "description": "Consulta nuestro archivo CONTRIBUTING.md para obtener pautas sobre cómo contribuir con componentes, reportar errores o sugerir mejoras." + }, + "q2": { + "title": "¿Esta biblioteca es gratuita?", + "description": "¡Sí! Esta biblioteca de componentes es de código abierto y gratuita para uso personal y comercial." + }, + "q3": { + "title": "¿Cómo reporto un error?", + "description": "Puedes reportar errores a través de nuestra página de issues en GitHub o usando el formulario de contacto arriba con \"Reporte de error\" como asunto." + } + } +} diff --git a/messages/[fr]/contact.json b/messages/[fr]/contact.json new file mode 100644 index 0000000..28d67c5 --- /dev/null +++ b/messages/[fr]/contact.json @@ -0,0 +1,78 @@ +{ + "header": { + "title": "Contactez-nous", + "description": "Des questions sur notre bibliothèque de composants ? Vous souhaitez contribuer ou signaler un bug ? Nous serions ravis de vous entendre !" + }, + "form": { + "title": "Envoyez-nous un message", + "success": "Merci pour votre message ! Nous vous répondrons bientôt.", + "error": "Désolé, une erreur s'est produite lors de l'envoi de votre message. Veuillez réessayer.", + "sending": "Envoi...", + "send": "Envoyer le message", + "fields": { + "name": { + "label": "Nom complet *", + "placeholder": "Entrez votre nom complet" + }, + "email": { + "label": "Adresse e-mail *", + "placeholder": "your.email@example.com" + }, + "subject": { + "label": "Sujet *", + "placeholder": "Sélectionnez un sujet", + "options": { + "bugReport": "Rapport de bug", + "featureRequest": "Demande de fonctionnalité", + "documentation": "Documentation", + "contribution": "Contribution", + "support": "Support général", + "other": "Autre" + } + }, + "message": { + "label": "Message *", + "placeholder": "Dites-nous comment nous pouvons vous aider..." + } + } + }, + "errors": { + "nameRequired": "Le nom est requis", + "emailRequired": "L'e-mail est requis", + "emailInvalid": "Veuillez entrer une adresse e-mail valide", + "subjectRequired": "Le sujet est requis", + "messageRequired": "Le message est requis", + "messageLength": "Le message doit contenir au moins 10 caractères" + }, + "info": { + "title": "Informations de contact", + "email": { + "title": "E-mail" + }, + "github": { + "title": "GitHub" + }, + "linktree": { + "title": "Linktree", + "description": "Consultez notre Linktree pour tous nos liens sociaux :" + } + }, + "social": { + "title": "Suivez-nous" + }, + "faq": { + "title": "Questions fréquemment posées", + "q1": { + "title": "Comment puis-je contribuer à la bibliothèque ?", + "description": "Consultez notre fichier CONTRIBUTING.md pour les directives sur la contribution de composants, le signalement de bugs ou la suggestion d'améliorations." + }, + "q2": { + "title": "Cette bibliothèque est-elle gratuite ?", + "description": "Oui ! Cette bibliothèque de composants est open source et gratuite pour une utilisation personnelle et commerciale." + }, + "q3": { + "title": "Comment signaler un bug ?", + "description": "Vous pouvez signaler des bugs via notre page GitHub issues ou en utilisant le formulaire de contact ci-dessus avec \"Rapport de bug\" comme sujet." + } + } +} diff --git a/messages/[hi]/contact.json b/messages/[hi]/contact.json new file mode 100644 index 0000000..d68dbf6 --- /dev/null +++ b/messages/[hi]/contact.json @@ -0,0 +1,78 @@ +{ + "header": { + "title": "संपर्क करें", + "description": "क्या आपके पास हमारी कंपोनेंट लाइब्रेरी के बारे में सवाल हैं? योगदान करना चाहते हैं या कोई बग रिपोर्ट करना चाहते हैं? हम आपसे सुनना पसंद करेंगे!" + }, + "form": { + "title": "हमें संदेश भेजें", + "success": "आपके संदेश के लिए धन्यवाद! हम जल्द ही आपसे संपर्क करेंगे।", + "error": "माफ़ कीजिए, आपका संदेश भेजने में त्रुटि हुई। कृपया पुनः प्रयास करें।", + "sending": "भेजा जा रहा है...", + "send": "संदेश भेजें", + "fields": { + "name": { + "label": "पूरा नाम *", + "placeholder": "अपना पूरा नाम दर्ज करें" + }, + "email": { + "label": "ईमेल पता *", + "placeholder": "your.email@example.com" + }, + "subject": { + "label": "विषय *", + "placeholder": "एक विषय चुनें", + "options": { + "bugReport": "बग रिपोर्ट", + "featureRequest": "फीचर अनुरोध", + "documentation": "दस्तावेज़ीकरण", + "contribution": "योगदान", + "support": "सामान्य सहायता", + "other": "अन्य" + } + }, + "message": { + "label": "संदेश *", + "placeholder": "हमें बताएं कि हम आपकी कैसे मदद कर सकते हैं..." + } + } + }, + "errors": { + "nameRequired": "नाम आवश्यक है", + "emailRequired": "ईमेल आवश्यक है", + "emailInvalid": "कृपया एक मान्य ईमेल पता दर्ज करें", + "subjectRequired": "विषय आवश्यक है", + "messageRequired": "संदेश आवश्यक है", + "messageLength": "संदेश कम से कम 10 अक्षरों का होना चाहिए" + }, + "info": { + "title": "संपर्क जानकारी", + "email": { + "title": "ईमेल" + }, + "github": { + "title": "GitHub" + }, + "linktree": { + "title": "Linktree", + "description": "हमारे सभी सोशल लिंक के लिए हमारा Linktree देखें:" + } + }, + "social": { + "title": "हमें फॉलो करें" + }, + "faq": { + "title": "अक्सर पूछे जाने वाले प्रश्न", + "q1": { + "title": "मैं लाइब्रेरी में कैसे योगदान कर सकता हूँ?", + "description": "हमारे CONTRIBUTING.md फ़ाइल में कंपोनेंट्स योगदान करने, बग रिपोर्ट करने या सुधार सुझाने के दिशा-निर्देश देखें।" + }, + "q2": { + "title": "क्या यह लाइब्रेरी मुफ्त है?", + "description": "हाँ! यह कंपोनेंट लाइब्रेरी ओपन सोर्स है और व्यक्तिगत तथा व्यावसायिक परियोजनाओं में मुफ्त उपयोग के लिए उपलब्ध है।" + }, + "q3": { + "title": "मैं बग कैसे रिपोर्ट करूँ?", + "description": "आप हमारे GitHub issues पेज के माध्यम से या ऊपर दिए गए संपर्क फ़ॉर्म में \"बग रिपोर्ट\" विषय चुनकर बग रिपोर्ट कर सकते हैं।" + } + } +} diff --git a/src/app/contact/page.jsx b/src/app/contact/page.jsx index 3bfadc3..9a71673 100644 --- a/src/app/contact/page.jsx +++ b/src/app/contact/page.jsx @@ -1,10 +1,11 @@ - "use client" import { useState } from 'react'; +import { useTranslations } from 'next-intl'; import { Mail, Phone, MapPin, Send, Github, Twitter, Linkedin } from 'lucide-react'; export default function ContactPage() { + const t = useTranslations('contact'); const [formData, setFormData] = useState({ name: '', email: '', @@ -20,23 +21,23 @@ export default function ContactPage() { const newErrors = {}; if (!formData.name.trim()) { - newErrors.name = 'Name is required'; + newErrors.name = t('errors.nameRequired'); } if (!formData.email.trim()) { - newErrors.email = 'Email is required'; + newErrors.email = t('errors.emailRequired'); } else if (!/\S+@\S+\.\S+/.test(formData.email)) { - newErrors.email = 'Please enter a valid email address'; + newErrors.email = t('errors.emailInvalid'); } if (!formData.subject.trim()) { - newErrors.subject = 'Subject is required'; + newErrors.subject = t('errors.subjectRequired'); } if (!formData.message.trim()) { - newErrors.message = 'Message is required'; + newErrors.message = t('errors.messageRequired'); } else if (formData.message.trim().length < 10) { - newErrors.message = 'Message must be at least 10 characters long'; + newErrors.message = t('errors.messageLength'); } setErrors(newErrors); @@ -87,27 +88,26 @@ export default function ContactPage() {
{/* Header */}
-

Get in Touch

+

{t('header.title')}

- Have questions about our component library? Want to contribute or report a bug? - We'd love to hear from you! + {t('header.description')}

{/* Contact Form */}
-

Send us a Message

+

{t('form.title')}

{submitStatus === 'success' && (
-

Thank you for your message! We'll get back to you soon.

+

{t('form.success')}

)} {submitStatus === 'error' && (
-

Sorry, there was an error sending your message. Please try again.

+

{t('form.error')}

)} @@ -115,8 +115,7 @@ export default function ContactPage() { {/* Name Field */}
{errors.name &&

{errors.name}

}
@@ -135,8 +133,7 @@ export default function ContactPage() { {/* Email Field */}
{errors.email &&

{errors.email}

}
@@ -155,7 +151,7 @@ export default function ContactPage() { {/* Subject Field */}
{errors.subject &&

{errors.subject}

}
@@ -179,8 +175,7 @@ export default function ContactPage() { {/* Message Field */}