completionId: cgen-29efc44f84284ccdbce6e316b4dc9518
cgen-29efc44f84284ccdbce6e316b4dc9518
This commit is contained in:
Builder.io
parent
35cf0a622b
commit
3a7684abbb
1 changed files with 29 additions and 74 deletions
|
|
@ -60,92 +60,47 @@ const ARMS: Arm[] = [
|
|||
},
|
||||
];
|
||||
|
||||
const LOGO_URLS: Record<string, string> = {
|
||||
labs: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F85fe7910cff6483db1ea99c154684844?format=webp&width=800",
|
||||
gameforge:
|
||||
"https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fcd3534c1caa0497abfd44224040c6059?format=webp&width=800",
|
||||
corp: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fae654ecc18b241bdab273893e8231970?format=webp&width=800",
|
||||
foundation:
|
||||
"https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc02cb1bf5056479bbb3ea4bd91f0d472?format=webp&width=800",
|
||||
devlink:
|
||||
"https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F9a96b43cbd7b49bb9d5434580319c793?format=webp&width=800",
|
||||
};
|
||||
|
||||
export default function ArmSwitcher() {
|
||||
const navigate = useNavigate();
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const [isAnimating, setIsAnimating] = useState(true);
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAnimating || isHovering) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setCurrentIndex((prev) => (prev + 1) % ARMS.length);
|
||||
}, 4000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isAnimating, isHovering]);
|
||||
|
||||
const currentArm = ARMS[currentIndex];
|
||||
|
||||
const handleArmClick = (href: string) => {
|
||||
navigate(href);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center gap-3 cursor-pointer group"
|
||||
onMouseEnter={() => setIsHovering(true)}
|
||||
onMouseLeave={() => setIsHovering(false)}
|
||||
onClick={() => handleArmClick(currentArm.href)}
|
||||
>
|
||||
{/* Animated Icon Container */}
|
||||
<div className="relative h-10 w-10 flex items-center justify-center">
|
||||
<div
|
||||
className={`absolute inset-0 rounded-lg ${currentArm.bgColor} transition-all duration-500`}
|
||||
/>
|
||||
|
||||
{/* Temporary Logo - Simple geometric shape */}
|
||||
{currentArm.id === "devlink" ? (
|
||||
<img
|
||||
src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F9a96b43cbd7b49bb9d5434580319c793?format=webp&width=800"
|
||||
alt={currentArm.label}
|
||||
className="relative h-8 w-8 rounded transition-all duration-500"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="relative h-8 w-8 rounded flex items-center justify-center font-bold text-white transition-all duration-500"
|
||||
style={{ backgroundColor: currentArm.color }}
|
||||
>
|
||||
{currentArm.label[0].toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Animated border indicator */}
|
||||
<div
|
||||
className="absolute inset-0 rounded-lg border-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
style={{ borderColor: currentArm.color }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Text Label - Shows on hover/click or always visible */}
|
||||
<div className="hidden sm:flex flex-col gap-0.5 overflow-hidden">
|
||||
<div className="text-xs font-semibold text-gray-400 transition-colors duration-500">
|
||||
{currentArm.label}
|
||||
</div>
|
||||
<div
|
||||
className={`text-xs font-medium transition-colors duration-500 ${currentArm.textColor}`}
|
||||
<div className="flex items-center gap-2">
|
||||
{ARMS.map((arm) => (
|
||||
<button
|
||||
key={arm.id}
|
||||
onClick={() => handleArmClick(arm.href)}
|
||||
className="group relative h-10 w-10 flex items-center justify-center rounded-lg hover:scale-110 transition-transform duration-200"
|
||||
title={arm.name}
|
||||
>
|
||||
{currentArm.name}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`absolute inset-0 rounded-lg ${arm.bgColor} opacity-0 group-hover:opacity-100 transition-opacity duration-200`} />
|
||||
|
||||
{/* Indicator dots - Shows on mobile */}
|
||||
<div className="sm:hidden flex gap-1">
|
||||
{ARMS.map((_, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`h-1.5 rounded-full transition-all duration-300 ${
|
||||
idx === currentIndex ? "w-3 bg-aethex-400" : "w-1.5 bg-gray-600"
|
||||
}`}
|
||||
<img
|
||||
src={LOGO_URLS[arm.id]}
|
||||
alt={arm.label}
|
||||
className="relative h-8 w-8 object-contain transition-all duration-200"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tooltip on hover */}
|
||||
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2 py-1 bg-gray-900 rounded text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap pointer-events-none">
|
||||
Click to navigate
|
||||
</div>
|
||||
{/* Tooltip */}
|
||||
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2 py-1 bg-gray-900 rounded text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap pointer-events-none">
|
||||
{arm.name}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue