39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
// components/Header.tsx
|
|
"use client";
|
|
import React from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useAuth } from '@/context/AuthContext';
|
|
import { useHeader } from '@/context/HeaderContext'; // Import useHeader hook
|
|
import { ThemeToggle } from '@/components/ThemeToggle';
|
|
|
|
const Header: React.FC = () => {
|
|
const router = useRouter();
|
|
const { user, logout } = useAuth();
|
|
const { config } = useHeader(); // Consume the header config from context
|
|
|
|
const handleLogoutAndRedirect = () => {
|
|
logout();
|
|
router.push('/');
|
|
};
|
|
|
|
return (
|
|
<header className="flex justify-between items-center p-4 bg-card text-card-foreground shadow-md">
|
|
<div className="flex items-center">
|
|
{config.showBackButton && ( // Use config from context
|
|
<Button onClick={() => router.back()} variant="outline" className="mr-4">
|
|
Back
|
|
</Button>
|
|
)}
|
|
<h1 className="text-xl font-bold">Radio App Admin</h1>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
{user && <span className="text-sm text-muted-foreground">Logged in as: {user.username} ({user.role})</span>}
|
|
{user && <Button onClick={handleLogoutAndRedirect} variant="outline">Logout</Button>}
|
|
<ThemeToggle />
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header; |