57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
import { Link } from 'react-router-dom'
|
|
|
|
export default function UserNav({ active }) {
|
|
const tabs = [
|
|
{
|
|
key: 'code',
|
|
to: '/saisir-code-unique',
|
|
label: 'Saisir un code',
|
|
icon: (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
key: 'gains',
|
|
to: '/mes-gains',
|
|
label: 'Mes gains',
|
|
icon: (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M20 12V22H4V12M22 7H2v5h20V7zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
key: 'profile',
|
|
to: '/profile',
|
|
label: 'Profil',
|
|
icon: (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
),
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="flex border-b border-gray-200 mb-6">
|
|
{tabs.map((tab) => (
|
|
<Link
|
|
key={tab.key}
|
|
to={tab.to}
|
|
className={`flex-1 flex items-center justify-center gap-1.5 py-3 text-xs sm:text-sm font-medium transition-colors ${
|
|
active === tab.key
|
|
? 'text-[#006B6B] border-b-2 border-[#006B6B]'
|
|
: 'text-gray-400 hover:text-gray-600'
|
|
}`}
|
|
>
|
|
{tab.icon}
|
|
<span className="hidden sm:inline">{tab.label}</span>
|
|
<span className="sm:hidden">{tab.label.split(' ')[0]}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|