language i18n added and tested for server and client side
This commit is contained in:
parent
cbe62d8734
commit
ccb5c172ae
|
|
@ -1,3 +0,0 @@
|
|||
export default function DashboardPage() {
|
||||
return <div></div>;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export default function OfficePage() {
|
||||
return <div></div>;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export default function VenuePage() {
|
||||
return <div></div>;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue