default
9e0dd1d278
Implemented HeroUI migration plan with the following changes: Stage 0: Environment Setup - Installed @heroui/react@2.8.7, @heroui/theme@2.4.26, framer-motion@12.29.2 - Configured Tailwind with HeroUI plugin - Added HeroUI content paths to Tailwind config Stage 1: Provider Architecture - Created Providers.tsx wrapper combining HeroUIProvider and AppProvider - Updated app/layout.tsx to use new Providers component - Preserved all AppContext functionality (theme, language, translations) Stage 2: Component Migrations - TabNavigation: Migrated to HeroUI Tabs with keyboard navigation support - TopBar: Migrated buttons to HeroUI Button components - LanguageSwitch: Migrated to HeroUI Dropdown for better UX - ThemeSwitch: Migrated to HeroUI Button (isIconOnly variant) - MintSwapPanel: Migrated to HeroUI Tabs and Button components Benefits: - Enhanced accessibility with ARIA attributes and keyboard navigation - Smooth animations and transitions via Framer Motion - Consistent component API across the application - Maintained all existing design tokens and color system - Preserved dark mode functionality Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useApp } from "@/contexts/AppContext";
|
|
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button } from "@heroui/react";
|
|
|
|
export default function LanguageSwitch() {
|
|
const { language, setLanguage } = useApp();
|
|
|
|
const languages = [
|
|
{ key: "zh", label: "中文" },
|
|
{ key: "en", label: "English" },
|
|
];
|
|
|
|
const handleSelectionChange = (key: React.Key) => {
|
|
setLanguage(key as "zh" | "en");
|
|
};
|
|
|
|
return (
|
|
<Dropdown>
|
|
<DropdownTrigger>
|
|
<Button
|
|
variant="bordered"
|
|
className="bg-bg-surface dark:bg-gray-800 border-border-normal dark:border-gray-700 min-w-10 h-10 px-3 rounded-lg"
|
|
>
|
|
<span className="text-sm font-medium text-text-primary dark:text-white">
|
|
{language === "zh" ? "中" : "EN"}
|
|
</span>
|
|
</Button>
|
|
</DropdownTrigger>
|
|
<DropdownMenu
|
|
aria-label="Language selection"
|
|
selectedKeys={new Set([language])}
|
|
selectionMode="single"
|
|
onSelectionChange={(keys) => {
|
|
const key = Array.from(keys)[0];
|
|
if (key) handleSelectionChange(key);
|
|
}}
|
|
>
|
|
{languages.map((lang) => (
|
|
<DropdownItem key={lang.key}>{lang.label}</DropdownItem>
|
|
))}
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
);
|
|
}
|