AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

completionId: cgen-ea373a981e214e9bb90bf3da3e5e4838

Browse source 
cgen-ea373a981e214e9bb90bf3da3e5e4838
This commit is contained in:
Builder.io 2025-11-07 21:23:15 +00:00
parent 8cded838de
commit 51abaf64f1
1 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
client/components/ArmSwitcher.tsx
View file

@ -74,6 +74,7 @@ const LOGO_URLS: Record<string, string> = {
export default function ArmSwitcher() {
const navigate = useNavigate();
const [isExpanded, setIsExpanded] = useState(false);
const [scrollPosition, setScrollPosition] = useState(0);
const handleArmClick = (href: string) => {
navigate(href);
@ -82,7 +83,7 @@ export default function ArmSwitcher() {
return (
<>
{/* Desktop Version - Horizontal Layout */}
{/* Desktop Version - Horizontal Layout (lg+) */}
<div className="hidden lg:flex items-center gap-6 sm:gap-10 lg:gap-12">
{ARMS.map((arm) => (
<button
@ -109,8 +110,31 @@ export default function ArmSwitcher() {
))}
</div>
{/* Mobile Version - Expandable Icon */}
<div className="lg:hidden relative">
{/* Tablet Version - Compact Horizontal Bar (md to lg) */}
<div className="hidden md:flex lg:hidden items-center justify-center gap-2 px-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 transition-all duration-200 hover:scale-110 ${arm.bgColor}`}
title={arm.name}
>
<img
src={LOGO_URLS[arm.id]}
alt={arm.label}
className="relative h-6 w-6 object-contain"
/>
{/* 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-200 whitespace-nowrap pointer-events-none z-50">
{arm.label}
</div>
</button>
))}
</div>
{/* Mobile Version - Expandable Icon (< md) */}
<div className="md:hidden relative">
<button
onClick={() => setIsExpanded(!isExpanded)}
className={`relative h-12 w-12 flex items-center justify-center rounded-lg transition-all duration-300 ${