Spaces:
Runtime error
Runtime error
File size: 3,386 Bytes
fcb5a67 |
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 80 81 82 83 |
import React, { useState } from 'react';
import { Search, BookOpen, Compass, Sparkles, Wand2, Globe, Settings } from 'lucide-react';
import AIConfigModal from './AIConfigModal';
interface HeaderProps {
activeTab: string;
onTabChange: (tab: string) => void;
}
const Header: React.FC<HeaderProps> = ({ activeTab, onTabChange }) => {
const [showAIConfig, setShowAIConfig] = useState(false);
const tabs = [
{ id: 'search', label: 'Search', icon: Search },
{ id: 'explore', label: 'Explore', icon: Compass },
{ id: 'study', label: 'Study Plans', icon: BookOpen },
{ id: 'ai-generator', label: 'AI Generator', icon: Sparkles },
{ id: 'transformer', label: 'Transform', icon: Wand2 },
{ id: 'multilingual', label: 'Multilingual', icon: Globe },
];
return (
<>
<header className="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-2">
<div className="w-8 h-8 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-lg flex items-center justify-center">
<BookOpen className="w-5 h-5 text-white" />
</div>
<h1 className="text-xl font-bold text-gray-900">Wikistro</h1>
</div>
<div className="hidden sm:block">
<p className="text-sm text-gray-600">Transform Knowledge into Learning</p>
</div>
</div>
<nav className="flex items-center space-x-1">
<div className="flex space-x-1 overflow-x-auto">
{tabs.map((tab) => {
const Icon = tab.icon;
return (
<button
key={tab.id}
onClick={() => onTabChange(tab.id)}
className={`flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 whitespace-nowrap ${
activeTab === tab.id
? 'bg-primary-50 text-primary-700 shadow-sm'
: 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
}`}
>
<Icon className="w-4 h-4" />
<span className="hidden sm:inline">{tab.label}</span>
</button>
);
})}
</div>
<div className="ml-2 pl-2 border-l border-gray-200">
<button
onClick={() => setShowAIConfig(true)}
className="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-all duration-200"
title="AI Configuration"
>
<Settings className="w-4 h-4" />
<span className="hidden sm:inline text-sm font-medium">AI Config</span>
</button>
</div>
</nav>
</div>
</div>
</header>
<AIConfigModal
isOpen={showAIConfig}
onClose={() => setShowAIConfig(false)}
/>
</>
);
};
export default Header; |