first commit

src/widgets/navbar/ui/ChangeLang.tsx

@@ -1,17 +1,16 @@
 'use client';
 
-import * as React from 'react';
-import { GlobeIcon } from 'lucide-react';
+import type { LanguageRoutes } from '@/shared/config/i18n/types';
+import { Button } from '@/shared/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/shared/ui/dropdown-menu';
-import { Button } from '@/shared/ui/button';
-import { languages } from '../lib/data';
+import Image from 'next/image';
 import { useParams, usePathname, useRouter } from 'next/navigation';
-import { LanguageRoutes } from '@/shared/config/i18n/types';
+import { languages } from '../lib/data';
 
 export function ChangeLang() {
   const { locale } = useParams();
@@ -27,15 +26,45 @@ export function ChangeLang() {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">
-          <GlobeIcon />
-          <span>{languages.find((e) => e.key == locale)?.name}</span>
+      <DropdownMenuTrigger asChild className="h-7">
+        <Button
+          variant="ghost"
+          className="bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-sm px-3"
+        >
+          <div className="w-5 h-5 rounded-full overflow-hidden border border-white/50 mr-2">
+            {languages.find((e) => e.key === locale)?.key === 'uz' ? (
+              <Image
+                src="/flags/uz.png"
+                alt="uz"
+                width={20}
+                height={20}
+                className="object-cover"
+              />
+            ) : (
+              <Image
+                src="/flags/ru.png"
+                alt="ru"
+                width={20}
+                height={20}
+                className="object-cover"
+              />
+            )}
+          </div>
+          <span className="text-white font-medium text-sm">
+            {languages.find((e) => e.key === locale)?.name}
+          </span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
+      <DropdownMenuContent
+        align="end"
+        className="bg-white border border-slate-200 shadow-lg rounded-lg"
+      >
         {languages.map((e, i) => (
-          <DropdownMenuItem key={i} onClick={() => changeLocale(e.key)}>
+          <DropdownMenuItem
+            key={i}
+            onClick={() => changeLocale(e.key)}
+            className="hover:bg-blue-50 cursor-pointer text-slate-700 hover:text-blue-700 px-3 py-2"
+          >
             {e.name}
           </DropdownMenuItem>
         ))}