Nils-Johan Gynther
62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
|
|
type Tab = { id: string; label: string };
|
|
|
|
const USER_TABS: Tab[] = [
|
|
{ id: 'profil', label: 'Min profil' },
|
|
{ id: 'databas', label: '🗄️ Databas' },
|
|
];
|
|
const ADMIN_TABS: Tab[] = [
|
|
{ id: 'profil', label: 'Min profil' },
|
|
{ id: 'anvandare', label: '👥 Användare' },
|
|
{ id: 'databas', label: '🗄️ Databas' },
|
|
{ id: 'forslag', label: '⏳ Förslag' },
|
|
{ id: 'ai', label: '🤖 AI' },
|
|
];
|
|
|
|
type Props = {
|
|
activeTab: string;
|
|
isAdmin: boolean;
|
|
};
|
|
|
|
export default function ProfileTabs({ activeTab, isAdmin }: Props) {
|
|
const tabs = isAdmin ? ADMIN_TABS : USER_TABS;
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
gap: '0.25rem',
|
|
borderBottom: '2px solid #e5e7eb',
|
|
marginBottom: '2rem',
|
|
}}
|
|
>
|
|
{tabs.map((tab) => {
|
|
const active = tab.id === activeTab;
|
|
return (
|
|
<Link
|
|
key={tab.id}
|
|
href={`/profil?tab=${tab.id}`}
|
|
style={{
|
|
padding: '0.6rem 1.2rem',
|
|
textDecoration: 'none',
|
|
fontWeight: active ? 600 : 400,
|
|
fontSize: '0.95rem',
|
|
color: active ? '#2563eb' : '#555',
|
|
borderBottom: active ? '2px solid #2563eb' : '2px solid transparent',
|
|
marginBottom: '-2px',
|
|
borderRadius: '4px 4px 0 0',
|
|
background: active ? '#eff6ff' : 'transparent',
|
|
transition: 'background 0.15s',
|
|
}}
|
|
>
|
|
{tab.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|