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>
64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import TabNavigation from "./TabNavigation";
|
|
import OverviewTab from "./OverviewTab";
|
|
import { useApp } from "@/contexts/AppContext";
|
|
|
|
export default function ContentSection() {
|
|
const { t } = useApp();
|
|
|
|
const tabs = [
|
|
{ id: "overview", label: t("tabs.overview") },
|
|
{ id: "asset-description", label: t("tabs.assetDescription") },
|
|
{ id: "analytics", label: t("tabs.analytics") },
|
|
{ id: "performance-analysis", label: t("tabs.performanceAnalysis") },
|
|
{ id: "asset-custody", label: t("tabs.assetCustody") },
|
|
];
|
|
|
|
const [activeTab, setActiveTab] = useState("overview");
|
|
|
|
const handleTabChange = (tabId: string) => {
|
|
// If clicking asset-description, performance-analysis, or asset-custody, scroll to that section
|
|
if (tabId === "asset-description" || tabId === "performance-analysis" || tabId === "asset-custody") {
|
|
setTimeout(() => {
|
|
const element = document.getElementById(tabId);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
}
|
|
}, 100);
|
|
// Keep active tab as overview
|
|
setActiveTab("overview");
|
|
} else {
|
|
setActiveTab(tabId);
|
|
}
|
|
};
|
|
|
|
// Show OverviewTab for overview, asset-description, analytics, performance-analysis, and asset-custody
|
|
const showOverview = ["overview", "asset-description", "analytics", "performance-analysis", "asset-custody"].includes(activeTab);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6 w-full">
|
|
{/* Tab Navigation */}
|
|
<TabNavigation
|
|
tabs={tabs}
|
|
defaultActiveId="overview"
|
|
onTabChange={handleTabChange}
|
|
/>
|
|
|
|
{/* Content Area */}
|
|
<div className="w-full">
|
|
{showOverview && <OverviewTab />}
|
|
{!showOverview && (
|
|
<div className="bg-bg-surface rounded-2xl border border-border-normal p-6">
|
|
<p className="text-text-tertiary">
|
|
{tabs.find((t) => t.id === activeTab)?.label} content will be
|
|
displayed here...
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|