Refactoring Agent
47c71e6f54
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 8m47s
- Implemented complete design system with 40+ CSS custom properties - Created 9 UI primitives (GameCard, SectionHeader, StatRow, ManaBar, ElementBadge, ValueDisplay, ActionButton, SkillRow, TooltipInfo) - Redesigned all tabs: Spire, Skills, Stats, Equipment, Crafting, Attunements, Golemancy, Spells, Loot, Achievements, Lab, Debug - Added toast notification system (GameToast) with success/warning/error/info types - Added confirmation dialogs for destructive actions - Removed all dev artifacts and component name labels - Added empty states to all tabs - Replaced emoji icons with Lucide React icons - Added enchantPower placeholder to StatsTab and EquipmentTab - Mobile audit passed at 375px viewport - Build passes with 0 errors, lint passes with 0 errors Sub-tasks completed: - ST1: Design System Implementation - ST2: Global Layout & Header - ST3: Left Panel (Mana Display & Action Area) - ST4: Skills Tab - ST5: Spire Tab & Spire Mode UI - ST6: Stats Tab - ST7: Equipment & Crafting Tabs - ST8: Attunements Tab - ST9: Remaining Tabs - ST10: Toast System & Confirmation Dialogs Documentation: 15+ files in docs/task4/
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import * as React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
|
|
import { Info } from "lucide-react";
|
|
|
|
interface TooltipInfoProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
content: string;
|
|
children?: React.ReactNode;
|
|
side?: "top" | "right" | "bottom" | "left";
|
|
}
|
|
|
|
export function TooltipInfo({
|
|
content,
|
|
children,
|
|
side = "top",
|
|
className,
|
|
...props
|
|
}: TooltipInfoProps) {
|
|
return (
|
|
<TooltipProvider delayDuration={0}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span
|
|
data-slot="tooltip-info"
|
|
className={cn(
|
|
"inline-flex items-center cursor-help",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children || (
|
|
<Info
|
|
size={14}
|
|
className="text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors duration-100"
|
|
/>
|
|
)}
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent
|
|
side={side}
|
|
className="max-w-xs bg-[var(--bg-elevated)] text-[var(--text-primary)] border border-[var(--border-default)] text-xs"
|
|
>
|
|
{content}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
}
|