feat: integrate HeroUI component library
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:
@@ -1,116 +1,116 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useApp } from "@/contexts/AppContext";
|
||||
|
||||
interface OverviewItemProps {
|
||||
icon: string;
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
function OverviewItem({ icon, label, value }: OverviewItemProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-5 h-6 flex-shrink-0">
|
||||
<Image src={icon} alt={label} width={20} height={24} />
|
||||
</div>
|
||||
<span className="text-body-small font-medium text-text-tertiary dark:text-gray-400">
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-body-small font-medium text-text-primary dark:text-white">
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AssetOverviewCard() {
|
||||
const { t } = useApp();
|
||||
|
||||
return (
|
||||
<div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col gap-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-body-large font-bold text-text-primary dark:text-white">
|
||||
{t("assetOverview.title")}
|
||||
</h3>
|
||||
<div
|
||||
className="rounded-full border flex items-center gap-2 px-3 py-1.5"
|
||||
style={{
|
||||
backgroundColor: "#fffbf5",
|
||||
borderColor: "#ffedd5",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="w-1.5 h-1.5 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: "#ffb933" }}
|
||||
/>
|
||||
<span
|
||||
className="text-xs font-semibold leading-4"
|
||||
style={{ color: "#ffb933" }}
|
||||
>
|
||||
{t("assetOverview.mediumRisk")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overview Items */}
|
||||
<div className="flex gap-12 w-full">
|
||||
<div className="flex-1 flex flex-col gap-5">
|
||||
<OverviewItem
|
||||
icon="/component-11.svg"
|
||||
label={t("assetOverview.underlyingAssets")}
|
||||
value={t("assetOverview.usEquityIndex")}
|
||||
/>
|
||||
<OverviewItem
|
||||
icon="/component-12.svg"
|
||||
label={t("assetOverview.maturityRange")}
|
||||
value="05 Feb 2026"
|
||||
/>
|
||||
<OverviewItem
|
||||
icon="/component-13.svg"
|
||||
label={t("assetOverview.cap")}
|
||||
value="$50,000,000"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col gap-5">
|
||||
<OverviewItem
|
||||
icon="/component-14.svg"
|
||||
label={t("assetOverview.minInvestment")}
|
||||
value="100 USDC"
|
||||
/>
|
||||
<div className="flex flex-col gap-3 w-full">
|
||||
<OverviewItem
|
||||
icon="/component-15.svg"
|
||||
label={t("assetOverview.poolCapacity")}
|
||||
value="75%"
|
||||
/>
|
||||
<div className="w-full h-2 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-blue-500 rounded-full" style={{ width: "75%" }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-border-gray dark:border-gray-700" />
|
||||
|
||||
{/* Current Price */}
|
||||
<div className="bg-bg-subtle dark:bg-gray-700 rounded-xl p-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Image src="/component-16.svg" alt="Price" width={24} height={24} />
|
||||
<span className="text-body-small font-medium text-text-tertiary dark:text-gray-400">
|
||||
{t("assetOverview.currentPrice")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[20px] font-bold leading-[140%]">
|
||||
<span className="text-text-primary dark:text-white">1 GY-US = </span>
|
||||
<span style={{ color: "#10b981" }}>1.04 USDC</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useApp } from "@/contexts/AppContext";
|
||||
|
||||
interface OverviewItemProps {
|
||||
icon: string;
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
function OverviewItem({ icon, label, value }: OverviewItemProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-5 h-6 flex-shrink-0">
|
||||
<Image src={icon} alt={label} width={20} height={24} />
|
||||
</div>
|
||||
<span className="text-body-small font-medium text-text-tertiary dark:text-gray-400">
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-body-small font-medium text-text-primary dark:text-white">
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AssetOverviewCard() {
|
||||
const { t } = useApp();
|
||||
|
||||
return (
|
||||
<div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col gap-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-body-large font-bold text-text-primary dark:text-white">
|
||||
{t("assetOverview.title")}
|
||||
</h3>
|
||||
<div
|
||||
className="rounded-full border flex items-center gap-2 px-3 py-1.5"
|
||||
style={{
|
||||
backgroundColor: "#fffbf5",
|
||||
borderColor: "#ffedd5",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="w-1.5 h-1.5 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: "#ffb933" }}
|
||||
/>
|
||||
<span
|
||||
className="text-xs font-semibold leading-4"
|
||||
style={{ color: "#ffb933" }}
|
||||
>
|
||||
{t("assetOverview.mediumRisk")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overview Items */}
|
||||
<div className="flex gap-12 w-full">
|
||||
<div className="flex-1 flex flex-col gap-5">
|
||||
<OverviewItem
|
||||
icon="/component-11.svg"
|
||||
label={t("assetOverview.underlyingAssets")}
|
||||
value={t("assetOverview.usEquityIndex")}
|
||||
/>
|
||||
<OverviewItem
|
||||
icon="/component-12.svg"
|
||||
label={t("assetOverview.maturityRange")}
|
||||
value="05 Feb 2026"
|
||||
/>
|
||||
<OverviewItem
|
||||
icon="/component-13.svg"
|
||||
label={t("assetOverview.cap")}
|
||||
value="$50,000,000"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col gap-5">
|
||||
<OverviewItem
|
||||
icon="/component-14.svg"
|
||||
label={t("assetOverview.minInvestment")}
|
||||
value="100 USDC"
|
||||
/>
|
||||
<div className="flex flex-col gap-3 w-full">
|
||||
<OverviewItem
|
||||
icon="/component-15.svg"
|
||||
label={t("assetOverview.poolCapacity")}
|
||||
value="75%"
|
||||
/>
|
||||
<div className="w-full h-2 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-blue-500 rounded-full" style={{ width: "75%" }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-border-gray dark:border-gray-700" />
|
||||
|
||||
{/* Current Price */}
|
||||
<div className="bg-bg-subtle dark:bg-gray-700 rounded-xl p-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Image src="/component-16.svg" alt="Price" width={24} height={24} />
|
||||
<span className="text-body-small font-medium text-text-tertiary dark:text-gray-400">
|
||||
{t("assetOverview.currentPrice")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[20px] font-bold leading-[140%]">
|
||||
<span className="text-text-primary dark:text-white">1 GY-US = </span>
|
||||
<span style={{ color: "#10b981" }}>1.04 USDC</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user