46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import { NavLink, useLocation } from 'react-router-dom';
|
|
import { CreditCard, Shield, Star, Palette, FileEdit } from 'lucide-react';
|
|
|
|
const settingsItems = [
|
|
{ label: 'Stripe', path: '/admin/settings/stripe', icon: CreditCard },
|
|
{ label: 'Permissions', path: '/admin/settings/permissions', icon: Shield },
|
|
{ label: 'Theme', path: '/admin/settings/theme', icon: Palette },
|
|
|
|
];
|
|
|
|
const SettingsTabs = () => {
|
|
const location = useLocation();
|
|
|
|
return (
|
|
<div className="w-full border-b border-border">
|
|
<nav className="flex gap-1 overflow-x-auto pb-px -mb-px" aria-label="Settings tabs">
|
|
{settingsItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = location.pathname === item.path;
|
|
|
|
return (
|
|
<NavLink
|
|
key={item.label}
|
|
to={item.path}
|
|
className={`
|
|
flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap
|
|
border-b-2 transition-all duration-200
|
|
${isActive
|
|
? 'border-primary text-primary bg-primary/5'
|
|
: 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
|
|
}
|
|
`}
|
|
>
|
|
<Icon className={`h-4 w-4 ${isActive ? 'text-primary' : ''}`} />
|
|
<span>{item.label}</span>
|
|
</NavLink>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SettingsTabs;
|