Spaces:
Sleeping
Sleeping
File size: 2,557 Bytes
760b33c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
import React from 'react';
import { Menu, User, BookOpen, Moon, Sun } from 'lucide-react';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import type { User as UserType } from '../App';
interface HeaderProps {
user: UserType | null;
onMenuClick: () => void;
onUserClick: () => void;
isDarkMode: boolean;
onToggleDarkMode: () => void;
}
export function Header({ user, onMenuClick, onUserClick, isDarkMode, onToggleDarkMode }: HeaderProps) {
return (
<header className="h-16 border-b border-border bg-card px-4 lg:px-6 flex items-center justify-between sticky top-0 z-[60]">
<div className="flex items-center gap-4">
<Button
variant="ghost"
size="icon"
className="lg:hidden"
onClick={onMenuClick}
>
<Menu className="h-5 w-5" />
</Button>
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center">
<BookOpen className="h-6 w-6 text-white" />
</div>
<div>
<h1 className="text-lg sm:text-xl tracking-tight">
Clare <span className="text-sm font-bold text-muted-foreground hidden sm:inline ml-2">Your Personalized AI Tutor</span>
</h1>
<p className="text-xs text-muted-foreground hidden sm:block">
Personalized guidance, review, and intelligent reinforcement
</p>
</div>
</div>
</div>
<div className="flex items-center gap-2">
<Badge variant="secondary" className="hidden md:flex">
Module 10 – Responsible AI
</Badge>
<Button
variant="ghost"
size="icon"
onClick={onToggleDarkMode}
aria-label="Toggle dark mode"
>
{isDarkMode ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
</Button>
{user ? (
<Button
variant="outline"
className="gap-2"
onClick={onUserClick}
>
<User className="h-4 w-4" />
<span className="hidden sm:inline">{user.name}</span>
</Button>
) : (
<Button
variant="default"
className="gap-2 lg:hidden"
onClick={onUserClick}
>
<User className="h-4 w-4" />
<span>Login</span>
</Button>
)}
</div>
</header>
);
} |