File size: 6,060 Bytes
70348ce | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | import { useEffect, useState } from 'react';
interface RadioNavProps {
active: string;
onNavigate: (id: string) => void;
}
const items = [
{
id: 'dashboard',
label: 'Dashboard',
icon: (
<path d="M4 13h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1zm-1 7a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v4zm10 0a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v7zm1-10h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1z" />
),
},
{
id: 'analyze',
label: 'Analyze',
icon: (
<path d="M12 2a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm0 8a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm9 11v-1a7 7 0 0 0-7-7h-4a7 7 0 0 0-7 7v1h2v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1z" />
),
},
{
id: 'pricing',
label: 'Pricing',
icon: (
<path d="M5 18v3.766l1.515-.909L11.277 18H16c1.103 0 2-.897 2-2V8c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h1zM4 8h12v8h-5.277L7 18.234V16H4V8zm16-6H8c-1.103 0-2 .897-2 2h12c1.103 0 2 .897 2 2v8c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2z" />
),
},
{
id: 'agents',
label: 'Agents',
icon: (
<path d="M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM12 20c-4.411 0-8-3.589-8-8s3.567-8 7.953-8C16.391 4 20 7.589 20 12s-3.589 8-8 8zm-1-5h2v2h-2zm0-8h2v6h-2z" />
),
},
{
id: 'settings',
label: 'Settings',
icon: (
<>
<path d="M12 16c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.084 0 2 .916 2 2s-.916 2-2 2-2-.916-2-2 .916-2 2-2z" />
<path d="m2.845 16.136 1 1.73c.531.917 1.809 1.261 2.73.73l.529-.306A8.1 8.1 0 0 0 9 19.402V20c0 1.103.897 2 2 2h2c1.103 0 2-.897 2-2v-.598a8.132 8.132 0 0 0 1.896-1.111l.529.306c.923.53 2.198.188 2.731-.731l.999-1.729a2.001 2.001 0 0 0-.731-2.732l-.505-.292a7.718 7.718 0 0 0 0-2.224l.505-.292a2.002 2.002 0 0 0 .731-2.732l-.999-1.729c-.531-.92-1.808-1.265-2.731-.732l-.529.306A8.1 8.1 0 0 0 15 4.598V4c0-1.103-.897-2-2-2h-2c-1.103 0-2 .897-2 2v.598a8.132 8.132 0 0 0-1.896 1.111l-.529-.306c-.924-.531-2.2-.187-2.731.732l-.999 1.729a2.001 2.001 0 0 0 .731 2.732l.505.292a7.683 7.683 0 0 0 0 2.223l-.505.292a2.003 2.003 0 0 0-.731 2.733zm3.326-2.758A5.703 5.703 0 0 1 6 12c0-.462.058-.926.17-1.378a.999.999 0 0 0-.47-1.108l-1.123-.65.998-1.729 1.145.662a.997.997 0 0 0 1.188-.142 6.071 6.071 0 0 1 2.384-1.399A1 1 0 0 0 11 5.3V4h2v1.3a1 1 0 0 0 .708.956 6.083 6.083 0 0 1 2.384 1.399.999.999 0 0 0 1.188.142l1.144-.661 1 1.729-1.124.649a1 1 0 0 0-.47 1.108c.112.452.17.916.17 1.378 0 .461-.058.925-.171 1.378a1 1 0 0 0 .471 1.108l1.123.649-.998 1.729-1.145-.661a.996.996 0 0 0-1.188.142 6.071 6.071 0 0 1-2.384 1.399A1 1 0 0 0 13 18.7l.002 1.3H11v-1.3a1 1 0 0 0-.708-.956 6.083 6.083 0 0 1-2.384-1.399.992.992 0 0 0-1.188-.141l-1.144.662-1-1.729 1.124-.651a1 1 0 0 0 .471-1.108z" />
</>
),
},
];
export default function RadioNav({ active, onNavigate }: RadioNavProps) {
const [hovered, setHovered] = useState<string | null>(null);
// Sync radio inputs with active state
useEffect(() => {
const el = document.getElementById(active) as HTMLInputElement | null;
if (el) el.checked = true;
}, [active]);
return (
<div className="fixed top-4 left-1/2 z-50 -translate-x-1/2 transition-all duration-450 ease-in-out w-auto px-4">
<article
className="flex rounded-2xl overflow-hidden"
style={{
background: '#0d0720',
border: '1px solid rgba(168,85,247,0.18)',
boxShadow: '0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(88,28,135,0.15)',
}}
>
{items.map(item => {
const isActive = active === item.id;
const isHovered = hovered === item.id;
return (
<label
key={item.id}
htmlFor={item.id}
className="relative flex flex-col items-center justify-center cursor-pointer select-none transition-all duration-300"
style={{
width: 72,
height: 64,
padding: '8px 4px 4px',
gap: 4,
borderRadius: 12,
background: isActive
? 'rgba(124,58,237,0.25)'
: isHovered
? 'rgba(88,28,135,0.15)'
: 'transparent',
boxShadow: isActive
? 'inset 0 1px 0 rgba(192,132,252,0.15), 0 0 16px rgba(124,58,237,0.2)'
: 'none',
borderBottom: isActive ? '2px solid rgba(168,85,247,0.7)' : '2px solid transparent',
}}
onMouseEnter={() => setHovered(item.id)}
onMouseLeave={() => setHovered(null)}
onClick={() => onNavigate(item.id)}
>
<input
id={item.id}
name="nav"
type="radio"
className="hidden"
defaultChecked={isActive}
/>
<svg
viewBox="0 0 24 24"
width={20}
height={20}
xmlns="http://www.w3.org/2000/svg"
style={{
fill: isActive ? '#c084fc' : isHovered ? '#a855f7' : 'rgba(168,85,247,0.35)',
filter: isActive ? 'drop-shadow(0 0 6px rgba(192,132,252,0.7))' : 'none',
transform: isActive || isHovered ? 'scale(1.2)' : 'scale(1)',
transition: 'all 0.3s ease',
}}
>
{item.icon}
</svg>
<span
className="font-bold uppercase tracking-wider"
style={{
fontSize: 8,
letterSpacing: '0.08em',
color: isActive ? '#c084fc' : isHovered ? '#a855f7' : 'rgba(168,85,247,0.3)',
transition: 'color 0.3s ease',
}}
>
{item.label}
</span>
</label>
);
})}
</article>
</div>
);
}
|