47 lines
1.7 KiB
JavaScript
47 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import { NavLink } from 'react-router-dom';
|
|
import { CreditCard, Shield, Settings, Star } from 'lucide-react';
|
|
|
|
const settingsItems = [
|
|
{ label: 'Stripe Integration', path: '/admin/settings/stripe', icon: CreditCard },
|
|
{ label: 'Permissions', path: '/admin/settings/permissions', icon: Shield },
|
|
{ label: 'Member Tiers', path: '/admin/settings/member-tiers', icon: Star },
|
|
];
|
|
|
|
const SettingsSidebar = () => {
|
|
return (
|
|
<aside className="w-full lg:w-64 shrink-0 bg-background border border-[var(--neutral-800)] rounded-2xl p-4 lg:sticky lg:top-8 h-max">
|
|
<div className="flex items-center gap-2 px-2 pb-3 border-b border-[var(--neutral-800)]">
|
|
<Settings className="h-4 w-4 text-[var(--purple-ink)]" />
|
|
<span className="text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Settings
|
|
</span>
|
|
</div>
|
|
<nav className="mt-3 space-y-1">
|
|
{settingsItems.map((item) => {
|
|
const Icon = item.icon;
|
|
return (
|
|
<NavLink
|
|
key={item.label}
|
|
to={item.path}
|
|
className={({ isActive }) =>
|
|
[
|
|
'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
|
|
isActive
|
|
? 'bg-[var(--orange-light)]/10 text-[var(--purple-ink)]'
|
|
: 'text-[var(--purple-ink)] hover:bg-[var(--neutral-800)]/10',
|
|
].join(' ')
|
|
}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
<span>{item.label}</span>
|
|
</NavLink>
|
|
);
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
);
|
|
};
|
|
|
|
export default SettingsSidebar;
|