design-system/src/pages/Admin/Admin.tsx

import { useNavigate, useLocation } from 'react-router-dom'
import { TopBar } from '../../design-system/layout/TopBar/TopBar'
import { Tabs } from '../../design-system/composites/Tabs/Tabs'
import styles from './Admin.module.css'
import type { ReactNode } from 'react'

const ADMIN_TABS = [
  { label: 'User Management', value: '/admin/rbac' },
  { label: 'Audit Log', value: '/admin/audit' },
  { label: 'OIDC', value: '/admin/oidc' },
]

interface AdminLayoutProps {
  title: string
  children: ReactNode
}

export function AdminLayout({ title, children }: AdminLayoutProps) {
  const navigate = useNavigate()
  const location = useLocation()

  return (
    <>
      <TopBar
        breadcrumb={[
          { label: 'Admin', href: '/admin' },
          { label: title },
        ]}
        environment="PRODUCTION"
        user={{ name: 'hendrik' }}
      />
      <Tabs
        tabs={ADMIN_TABS}
        active={location.pathname}
        onChange={(path) => navigate(path)}
      />
      <div className={styles.adminContent}>
        {children}
      </div>
    </>
  )
}