feat(i18n): implement language switching and localization support

- Remove i18next configuration and dependencies
- Add language switcher component
- Integrate language change functionality with cookies
- Update translations for English and Persian
- Modify layout and page components to support dynamic language rendering
- Refactor Tailwind CSS configuration for custom colors
This commit is contained in:
2025-06-01 17:21:11 +03:30
parent 489e65224a
commit d691c8de41
15 changed files with 166 additions and 233 deletions
+1 -1
View File
@@ -10,7 +10,7 @@ export default async function Home() {
const data = await getData();
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24 text-gray-300">
<main className="flex min-h-screen flex-col items-center justify-between p-24 text-bg-primary">
ssss
</main>
);
+1 -1
View File
@@ -59,7 +59,7 @@
}
:root {
--primary: #6366F1;
--primary: #FA003F;
--secondary: #A78BFA;
--textColorLight: #FFFFFF;
--textColorGray: #222222;
+8 -9
View File
@@ -1,23 +1,22 @@
import type { Metadata } from 'next';
import './globals.css';
import { I18nextProvider } from 'react-i18next';
import i18n from '../config/i18n';
import { cookies } from 'next/headers';
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
export default async function RootLayout({
children,
}: {
}: Readonly<{
children: React.ReactNode;
}) {
}>) {
const locale = (await cookies()).get('lang')?.value || 'en';
return (
<html lang="en">
<I18nextProvider i18n={i18n}>
<body>{children}</body>
</I18nextProvider>
<html lang={locale} dir={locale === 'fa' ? 'rtl' : 'ltr'}>
<body>{children}</body>
</html>
);
}
+9 -1
View File
@@ -1,4 +1,6 @@
// ... existing imports ...
import ChangeLangButton from '@/components/layout/languageSwitcher';
import { changeLanguage, t } from '@/locales/translates';
async function getData() {
// Simulate a delay to show server-side data fetching
@@ -6,12 +8,18 @@ async function getData() {
return { message: 'This data was fetched on the server!' };
}
const change = () => {
changeLanguage('fa');
};
export default async function Home() {
const data = await getData();
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24 text-gray-300">
ssss
<span>{t('pages_home_title') as string}</span>
<ChangeLangButton />
</main>
);
}