xufuhan/assetx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate HeroUI component library

Browse Source 
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>
This commit is contained in:
default
2026-01-30 03:49:53 +00:00
parent 098a91f2ac
commit 9e0dd1d278
27 changed files with 11184 additions and 7928 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
components/ProductHeader.tsx
View File

@@ -1,35 +1,35 @@
"use client";
import Image from "next/image";
import { useApp } from "@/contexts/AppContext";
export default function ProductHeader() {
const { t } = useApp();
return (
<div className="flex flex-col gap-6">
{/* Product Title Section */}
<div className="flex items-start justify-between">
<div className="flex gap-6">
<div className="flex-shrink-0">
<Image src="/lr0.svg" alt="Product Logo" width={80} height={80} />
</div>
<div className="flex flex-col gap-2">
<h1 className="text-heading-h2 font-bold text-text-primary dark:text-white">
{t("product.gyUsEquityIndexToken")}
</h1>
<p className="text-body-default font-regular text-text-tertiary dark:text-gray-400">
High-Yield US Equity Quantitative Strategy - Institutional Grade RWA
</p>
</div>
</div>
<div className="flex items-center gap-2 px-4 py-2 bg-bg-subtle dark:bg-gray-700 rounded-lg border border-border-gray dark:border-gray-600">
<Image src="/group-9270.svg" alt="Contract" width={16} height={16} />
<span className="text-caption-tiny font-medium font-jetbrains text-text-tertiary dark:text-gray-400">
{t("product.contractAddress")}: 0x1b19...4f2c
</span>
</div>
</div>
</div>
);
}
"use client";
import Image from "next/image";
import { useApp } from "@/contexts/AppContext";
export default function ProductHeader() {
const { t } = useApp();
return (
<div className="flex flex-col gap-6">
{/* Product Title Section */}
<div className="flex items-start justify-between">
<div className="flex gap-6">
<div className="flex-shrink-0">
<Image src="/lr0.svg" alt="Product Logo" width={80} height={80} />
</div>
<div className="flex flex-col gap-2">
<h1 className="text-heading-h2 font-bold text-text-primary dark:text-white">
{t("product.gyUsEquityIndexToken")}
</h1>
<p className="text-body-default font-regular text-text-tertiary dark:text-gray-400">
High-Yield US Equity Quantitative Strategy - Institutional Grade RWA
</p>
</div>
</div>
<div className="flex items-center gap-2 px-4 py-2 bg-bg-subtle dark:bg-gray-700 rounded-lg border border-border-gray dark:border-gray-600">
<Image src="/group-9270.svg" alt="Contract" width={16} height={16} />
<span className="text-caption-tiny font-medium font-jetbrains text-text-tertiary dark:text-gray-400">
{t("product.contractAddress")}: 0x1b19...4f2c
</span>
</div>
</div>
</div>
);
}