96e52666c5
=== NEW === - studio/ — MCPEngine Studio scaffold (Next.js monorepo, build plan) - docs/FACTORY-V2.md — Factory v2 architecture doc - docs/CALENDLY_MCP_BUILD_SUMMARY.md — Calendly MCP build report === UPDATED SERVERS === - fieldedge: Added jobs-tools, UI build script, main entry update - lightspeed: Updated main + server entry points - squarespace: Added collection-browser + page-manager apps - toast: Added main + server entry points === INFRA === - infra/command-center/state.json — Updated pipeline state - infra/command-center/FACTORY-V2.md — Factory v2 operator playbook
65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
'use client';
|
|
import React, { useState } from 'react';
|
|
import { clsx } from 'clsx';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
export interface NavRailItemProps {
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
active?: boolean;
|
|
onClick?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export const NavRailItem: React.FC<NavRailItemProps> = ({
|
|
icon,
|
|
label,
|
|
active = false,
|
|
onClick,
|
|
className,
|
|
}) => {
|
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
|
|
return (
|
|
<div className="relative">
|
|
<button
|
|
onClick={onClick}
|
|
onMouseEnter={() => setShowTooltip(true)}
|
|
onMouseLeave={() => setShowTooltip(false)}
|
|
aria-label={label}
|
|
className={twMerge(
|
|
clsx(
|
|
'w-10 h-10 rounded-lg flex items-center justify-center',
|
|
'transition-all duration-150 ease-out',
|
|
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/50',
|
|
active
|
|
? 'text-indigo-400 bg-indigo-500/10'
|
|
: 'text-gray-500 hover:text-gray-300 hover:bg-gray-800',
|
|
),
|
|
className,
|
|
)}
|
|
>
|
|
{icon}
|
|
</button>
|
|
|
|
{/* Tooltip — right side */}
|
|
{showTooltip && (
|
|
<div
|
|
className={clsx(
|
|
'absolute left-full top-1/2 -translate-y-1/2 ml-3 z-50',
|
|
'px-2.5 py-1 text-xs font-medium text-gray-100',
|
|
'bg-gray-800 border border-gray-700 rounded-md shadow-lg shadow-black/30',
|
|
'whitespace-nowrap pointer-events-none',
|
|
'animate-[fadeIn_0.1s_ease-out]',
|
|
)}
|
|
role="tooltip"
|
|
>
|
|
{label}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
NavRailItem.displayName = 'NavRailItem';
|