language i18n added and tested for server and client side

This commit is contained in:
Berkay 2025-07-28 19:19:13 +03:00
parent cbe62d8734
commit ccb5c172ae
5 changed files with 31 additions and 14 deletions

View File

@ -1,3 +0,0 @@
export default function DashboardPage() {
return <div></div>;
}

View File

@ -0,0 +1,3 @@
export default function OfficePage() {
return <div></div>;
}

View File

@ -0,0 +1,3 @@
export default function VenuePage() {
return <div></div>;
}

View File

@ -6,6 +6,12 @@ import { useTranslations } from 'next-intl';
import { useParams } from 'next/navigation';
import { useState } from 'react';
// Map locales to flag emojis
const flagEmojis: Record<Locale, string> = {
en: '🇬🇧',
tr: '🇹🇷'
};
type Props = {
className?: string;
};
@ -37,12 +43,13 @@ export default function LocaleSwitcherClient({ className = '' }: Props) {
<div>
<button
type="button"
className="inline-flex justify-between items-center w-24 rounded-md border border-gray-300 px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
className="inline-flex justify-center items-center w-12 h-8 rounded-md border border-gray-300 px-2 py-1 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
onClick={() => setIsOpen(!isOpen)}
aria-expanded={isOpen}
aria-haspopup="true"
title={currentLocale.toUpperCase()}
>
<span>{currentLocale.toUpperCase()}</span>
<span className="text-lg">{flagEmojis[currentLocale as Locale]}</span>
<svg className="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
@ -51,7 +58,7 @@ export default function LocaleSwitcherClient({ className = '' }: Props) {
{isOpen && (
<div
className="origin-top-right mt-2 w-24 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10"
className="origin-top-right mt-2 w-12 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10"
role="menu"
aria-orientation="vertical"
tabIndex={-1}
@ -61,10 +68,11 @@ export default function LocaleSwitcherClient({ className = '' }: Props) {
<button
key={lang}
onClick={() => handleLocaleChange(lang)}
className="block w-full text-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
className="w-full text-center px-2 py-1 text-lg hover:bg-gray-100 flex items-center justify-center"
role="menuitem"
title={lang.toUpperCase()}
>
{lang.toUpperCase()}
{flagEmojis[lang]}
</button>
))}
</div>

View File

@ -1,7 +1,12 @@
import { Link } from '@/i18n/navigation';
import { locales, Locale } from '@/i18n/locales';
import { getTranslations } from 'next-intl/server';
import { headers } from 'next/headers';
// Map locales to flag emojis
const flagEmojis: Record<Locale, string> = {
en: '🇬🇧',
tr: '🇹🇷'
};
type Props = {
locale: string;
@ -37,23 +42,24 @@ export default async function LocaleSwitcherServer({ locale, className = '', pat
return (
<div className={`relative inline-block ${className}`}>
<div className="group">
<button type="button" className="inline-flex justify-between items-center w-24 rounded-md border border-gray-300 px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<span>{locale.toUpperCase()}</span>
<button type="button" className="inline-flex justify-center items-center w-12 h-8 rounded-md border border-gray-300 px-2 py-1 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" title={locale.toUpperCase()}>
<span className="text-lg">{flagEmojis[locale as Locale]}</span>
<svg className="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</button>
<div className="hidden group-hover:block mt-2 w-24 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
<div className="hidden group-hover:block mt-2 w-12 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
<div className="py-1" role="menu" aria-orientation="vertical">
{availableLocales.map((lang) => (
<Link
key={lang}
href={pathWithoutLocale}
locale={lang}
className="block px-4 py-2 text-sm text-center text-gray-700 hover:bg-gray-100 hover:text-gray-900"
className="flex items-center justify-center px-2 py-1 text-lg hover:bg-gray-100"
role="menuitem"
title={lang.toUpperCase()}
>
{lang.toUpperCase()}
{flagEmojis[lang]}
</Link>
))}
</div>