forked from jamesp/sasa-membership
78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { User } from '../../services/membershipService';
|
|
import ProfileMenu from '../ProfileMenu';
|
|
import PortalBrand from '../layout/PortalBrand';
|
|
|
|
interface DashboardTopbarProps {
|
|
activeTab: 'overview' | 'questions' | 'settings' | 'admin';
|
|
isAdmin: boolean;
|
|
isAdminWorkspace: boolean;
|
|
navigateToTab: (tab: 'overview' | 'questions' | 'settings' | 'admin') => void;
|
|
enterAdminArea: () => void;
|
|
exitAdminArea: () => void;
|
|
onEditProfile: () => void;
|
|
subtitle?: string;
|
|
user: User | null;
|
|
}
|
|
|
|
const userTabs: Array<{ key: 'overview' | 'questions' | 'settings'; label: string }> = [
|
|
{ key: 'overview', label: 'Overview' },
|
|
{ key: 'questions', label: 'Profile Questions' },
|
|
{ key: 'settings', label: 'Profile Settings' }
|
|
];
|
|
|
|
const DashboardTopbar: React.FC<DashboardTopbarProps> = ({
|
|
activeTab,
|
|
isAdmin,
|
|
isAdminWorkspace,
|
|
navigateToTab,
|
|
enterAdminArea,
|
|
exitAdminArea,
|
|
onEditProfile,
|
|
subtitle,
|
|
user
|
|
}) => (
|
|
<nav className={isAdminWorkspace ? 'portal-topbar portal-topbar-admin' : 'portal-topbar member-topbar'}>
|
|
<PortalBrand
|
|
title={isAdminWorkspace ? 'SASA Admin' : 'SASA Member Portal'}
|
|
subtitle={subtitle || (isAdminWorkspace ? 'Operations network' : `Welcome, ${user?.first_name || 'Member'}`)}
|
|
admin={isAdminWorkspace}
|
|
/>
|
|
|
|
{!isAdminWorkspace && (
|
|
<div className="portal-nav">
|
|
{userTabs.map((tab) => (
|
|
<button
|
|
key={tab.key}
|
|
className={activeTab === tab.key ? 'portal-tab active' : 'portal-tab'}
|
|
onClick={() => navigateToTab(tab.key)}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
{isAdmin && (
|
|
<button className="portal-switch-button" onClick={enterAdminArea}>
|
|
Enter Admin Area
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="portal-meta">
|
|
{isAdminWorkspace && (
|
|
<button className="portal-exit-button" onClick={exitAdminArea}>
|
|
Back to User Space
|
|
</button>
|
|
)}
|
|
<ProfileMenu
|
|
userName={`${user?.first_name || ''} ${user?.last_name || ''}`.trim()}
|
|
userRole={user?.role || ''}
|
|
user={user}
|
|
onEditProfile={onEditProfile}
|
|
/>
|
|
</div>
|
|
</nav>
|
|
);
|
|
|
|
export default DashboardTopbar;
|