diff --git a/app/[locale]/[[...slug]]/page.tsx b/app/[locale]/[[...slug]]/page.tsx
index 733fbffc4..0eb490984 100644
--- a/app/[locale]/[[...slug]]/page.tsx
+++ b/app/[locale]/[[...slug]]/page.tsx
@@ -1,15 +1,22 @@
'use client';
-import LocaleSwitcher from 'components/ui/locale-switcher';
+import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
import { useTranslations } from 'next-intl';
+
+interface PageProps {
+ params: {
+ locale: string
+ }
+}
-export default function Index() {
+export default function Index({params: {locale}} : PageProps) {
+
const t = useTranslations('Index');
return (
{t('title')}
-
+
)
}
\ No newline at end of file
diff --git a/components/ui/dropdown/dropdown.tsx b/components/ui/dropdown/dropdown.tsx
new file mode 100644
index 000000000..76032d320
--- /dev/null
+++ b/components/ui/dropdown/dropdown.tsx
@@ -0,0 +1,191 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from '@radix-ui/react-icons'
+import * as React from 'react'
+
+import { cn } from 'lib/utils'
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+
+))
+DropdownMenuSubTrigger.displayName =
+ DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DropdownMenuSubContent.displayName =
+ DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuCheckboxItem.displayName =
+ DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => {
+ return (
+
+ )
+}
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
+
+export {
+ DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator,
+ DropdownMenuShortcut, DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger, DropdownMenuTrigger
+}
+
diff --git a/components/ui/locale-switcher.tsx b/components/ui/locale-switcher.tsx
deleted file mode 100644
index 830a01289..000000000
--- a/components/ui/locale-switcher.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import { i18n } from '../../i18n-config'
-
-export default function LocaleSwitcher() {
- const pathName = usePathname()
- const redirectedPathName = (locale: string) => {
- if (!pathName) return '/'
- const segments = pathName.split('/')
- segments[1] = locale
- return segments.join('/')
- }
-
- return (
-
-
Locale switcher:
-
- {i18n.locales.map((locale) => {
- return (
- -
- {locale}
-
- )
- })}
-
-
+ {options.map((locale: any) => {
+ const translationLink = translations?.find(
+ (item: object | any) => item.locale === locale
+ )
+
+ return (
+ handleClick(e, locale)}
+ >
+ -
+ setIsOpen(false)}
+ >
+
+
+
+ {LOCALES_MAP[locale].name}
+
+
+
+ )
+ })}
+
+
+
+ )
+}
+
+export default I18nWidget
diff --git a/components/ui/locale-switcher/index.ts b/components/ui/locale-switcher/index.ts
new file mode 100644
index 000000000..46525c3d4
--- /dev/null
+++ b/components/ui/locale-switcher/index.ts
@@ -0,0 +1 @@
+export { default } from './I18nWidget'
diff --git a/components/ui/locale-switcher/locale-switcher.tsx b/components/ui/locale-switcher/locale-switcher.tsx
new file mode 100644
index 000000000..3966f1a08
--- /dev/null
+++ b/components/ui/locale-switcher/locale-switcher.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from 'components/ui/dropdown/dropdown'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useState } from 'react'
+import { i18n } from '../../../i18n-config'
+
+interface LocaleSwitcherProps {
+ currentLocale: string
+}
+
+export default function LocaleSwitcher({currentLocale}: LocaleSwitcherProps) {
+ const pathName = usePathname()
+
+ const redirectedPathName = (locale: string) => {
+ if (!pathName) return '/'
+ const segments = pathName.split('/')
+ segments[1] = locale
+ return segments.join('/')
+ }
+
+ const [isOpen, setIsOpen] = useState(false)
+
+ return (
+
+
+
setIsOpen(!isOpen)}>
+
+
+
+
+
+ {i18n.locales.map((locale) => {
+ return (
+
+ -
+ {locale}
+
+
+ )
+ })}
+
+
+
+