feat: add AdminMemberTiers page, MemberBadge component, and SettingsLayout; refactor routes and sidebar for improved navigation

src/components/SettingsSidebar.js

@@ -0,0 +1,46 @@
+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;