229 lines
9.2 KiB
TypeScript
229 lines
9.2 KiB
TypeScript
import React from 'react';
|
||
import {
|
||
BookOpen,
|
||
Film,
|
||
Palette,
|
||
Users,
|
||
Sparkles,
|
||
Printer,
|
||
Volume2,
|
||
VolumeX,
|
||
Moon,
|
||
Sun,
|
||
Layers,
|
||
BookMarked
|
||
} from 'lucide-react';
|
||
import { soundManager } from '../utils/audio';
|
||
|
||
export type NavTab =
|
||
| 'reader'
|
||
| 'storyboard'
|
||
| 'art'
|
||
| 'characters'
|
||
| 'adaptability'
|
||
| 'publishing'
|
||
| 'activities';
|
||
|
||
export type AgeGroup = 'toddler' | 'pictureBook' | 'earlyReader';
|
||
|
||
interface NavbarProps {
|
||
activeTab: NavTab;
|
||
setActiveTab: (tab: NavTab) => void;
|
||
ageGroup: AgeGroup;
|
||
setAgeGroup: (age: AgeGroup) => void;
|
||
isBedtimeMode: boolean;
|
||
setIsBedtimeMode: (val: boolean) => void;
|
||
soundEnabled: boolean;
|
||
setSoundEnabled: (val: boolean) => void;
|
||
onOpenPitchDeck: () => void;
|
||
}
|
||
|
||
export const Navbar: React.FC<NavbarProps> = ({
|
||
activeTab,
|
||
setActiveTab,
|
||
ageGroup,
|
||
setAgeGroup,
|
||
isBedtimeMode,
|
||
setIsBedtimeMode,
|
||
soundEnabled,
|
||
setSoundEnabled,
|
||
onOpenPitchDeck,
|
||
}) => {
|
||
const tabs = [
|
||
{ id: 'reader' as NavTab, label: 'Story Reader', icon: BookOpen, badge: 'Live Book' },
|
||
{ id: 'storyboard' as NavTab, label: 'Storyboard', icon: Film, badge: '5 Scenes' },
|
||
{ id: 'art' as NavTab, label: 'Art Direction', icon: Palette, badge: 'Palette & Style' },
|
||
{ id: 'characters' as NavTab, label: 'Characters', icon: Users, badge: 'Cast' },
|
||
{ id: 'adaptability' as NavTab, label: 'Age Editions', icon: Layers, badge: '3 Ages' },
|
||
{ id: 'publishing' as NavTab, label: 'Format & Pitch', icon: BookMarked, badge: 'Specs' },
|
||
{ id: 'activities' as NavTab, label: 'Activity Corner', icon: Sparkles, badge: 'Creative' },
|
||
];
|
||
|
||
const handleTabClick = (tabId: NavTab) => {
|
||
soundManager.playPop();
|
||
setActiveTab(tabId);
|
||
};
|
||
|
||
const handleSoundToggle = () => {
|
||
const newState = !soundEnabled;
|
||
setSoundEnabled(newState);
|
||
soundManager.enabled = newState;
|
||
if (newState) soundManager.playChime();
|
||
};
|
||
|
||
const handleBedtimeToggle = () => {
|
||
soundManager.playHarp();
|
||
setIsBedtimeMode(!isBedtimeMode);
|
||
};
|
||
|
||
return (
|
||
<header className={`sticky top-0 z-50 border-b transition-colors duration-300 backdrop-blur-md ${
|
||
isBedtimeMode
|
||
? 'bg-indigo-950/90 border-indigo-800 text-indigo-100 shadow-lg shadow-indigo-950/40'
|
||
: 'bg-[#fffdfa]/95 border-amber-200/70 text-amber-950 shadow-sm'
|
||
}`}>
|
||
{/* Top Banner with Brand and Controls */}
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5 flex flex-wrap items-center justify-between gap-3">
|
||
{/* Brand */}
|
||
<div
|
||
onClick={() => handleTabClick('reader')}
|
||
className="flex items-center gap-2.5 cursor-pointer group"
|
||
>
|
||
<div className="w-10 h-10 rounded-2xl bg-gradient-to-tr from-amber-400 via-rose-300 to-sky-300 flex items-center justify-center text-xl shadow-md group-hover:scale-105 transition-transform">
|
||
🦔
|
||
</div>
|
||
<div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="font-heading font-bold text-lg sm:text-xl tracking-tight leading-none text-amber-900 dark:text-amber-100 group-hover:text-amber-600 transition-colors">
|
||
Pip & the Whispering Cloud
|
||
</span>
|
||
<span className="hidden md:inline-flex text-[11px] font-semibold px-2 py-0.5 rounded-full bg-amber-100 text-amber-800 border border-amber-300/60">
|
||
Storybook Studio
|
||
</span>
|
||
</div>
|
||
<p className="text-xs text-amber-800/70 dark:text-indigo-300">
|
||
Heartwarming Children's Story & Concept Architecture
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Global Toolbar Controls */}
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
{/* Age Adaptability Selector */}
|
||
<div className="flex items-center bg-amber-100/70 dark:bg-indigo-900/80 p-1 rounded-xl border border-amber-200/80 dark:border-indigo-700 text-xs font-semibold">
|
||
<span className="px-2 text-amber-800/80 dark:text-indigo-300 hidden sm:inline">Edition:</span>
|
||
<button
|
||
onClick={() => { soundManager.playPop(); setAgeGroup('toddler'); }}
|
||
className={`px-2.5 py-1 rounded-lg transition-all ${
|
||
ageGroup === 'toddler'
|
||
? 'bg-amber-500 text-white shadow-sm font-bold'
|
||
: 'text-amber-900 dark:text-indigo-200 hover:bg-amber-200/50 dark:hover:bg-indigo-800'
|
||
}`}
|
||
title="Ages 1-3: Sensory, Onomatopoeia & Touch"
|
||
>
|
||
Toddler (1–3)
|
||
</button>
|
||
<button
|
||
onClick={() => { soundManager.playPop(); setAgeGroup('pictureBook'); }}
|
||
className={`px-2.5 py-1 rounded-lg transition-all ${
|
||
ageGroup === 'pictureBook'
|
||
? 'bg-amber-500 text-white shadow-sm font-bold'
|
||
: 'text-amber-900 dark:text-indigo-200 hover:bg-amber-200/50 dark:hover:bg-indigo-800'
|
||
}`}
|
||
title="Ages 4-7: Lyrical Picture Book & Read-Aloud"
|
||
>
|
||
Picture Book (4–7)
|
||
</button>
|
||
<button
|
||
onClick={() => { soundManager.playPop(); setAgeGroup('earlyReader'); }}
|
||
className={`px-2.5 py-1 rounded-lg transition-all ${
|
||
ageGroup === 'earlyReader'
|
||
? 'bg-amber-500 text-white shadow-sm font-bold'
|
||
: 'text-amber-900 dark:text-indigo-200 hover:bg-amber-200/50 dark:hover:bg-indigo-800'
|
||
}`}
|
||
title="Ages 7-9: Illustrated Chapters & Vocabulary"
|
||
>
|
||
Early Reader (7–9)
|
||
</button>
|
||
</div>
|
||
|
||
{/* Bedtime / Day Toggle */}
|
||
<button
|
||
onClick={handleBedtimeToggle}
|
||
className={`p-2 rounded-xl border transition-all flex items-center gap-1.5 text-xs font-medium ${
|
||
isBedtimeMode
|
||
? 'bg-indigo-900 border-indigo-700 text-amber-300 shadow-inner'
|
||
: 'bg-amber-50 border-amber-200 text-amber-800 hover:bg-amber-100'
|
||
}`}
|
||
title={isBedtimeMode ? "Switch to Daytime Mode" : "Switch to Bedtime Lullaby Mode"}
|
||
>
|
||
{isBedtimeMode ? <Moon className="w-4 h-4 fill-amber-300" /> : <Sun className="w-4 h-4 text-amber-500" />}
|
||
<span className="hidden md:inline">{isBedtimeMode ? 'Bedtime Mode' : 'Day Mode'}</span>
|
||
</button>
|
||
|
||
{/* Sound FX Toggle */}
|
||
<button
|
||
onClick={handleSoundToggle}
|
||
className={`p-2 rounded-xl border transition-all ${
|
||
soundEnabled
|
||
? 'bg-emerald-50 border-emerald-200 text-emerald-700 dark:bg-emerald-950 dark:border-emerald-700 dark:text-emerald-300'
|
||
: 'bg-stone-100 border-stone-200 text-stone-400 dark:bg-stone-900 dark:border-stone-800'
|
||
}`}
|
||
title={soundEnabled ? "Mute Sound Effects" : "Enable Sound Effects"}
|
||
>
|
||
{soundEnabled ? <Volume2 className="w-4 h-4" /> : <VolumeX className="w-4 h-4" />}
|
||
</button>
|
||
|
||
{/* Pitch Deck / Presentation Button */}
|
||
<button
|
||
onClick={() => { soundManager.playHarp(); onOpenPitchDeck(); }}
|
||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-gradient-to-r from-amber-600 to-rose-600 hover:from-amber-700 hover:to-rose-700 text-white font-medium text-xs shadow-sm hover:shadow transition-all"
|
||
>
|
||
<Printer className="w-3.5 h-3.5" />
|
||
<span className="hidden sm:inline">Pitch Deck</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Navigation Sub-Tabs */}
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 overflow-x-auto scrollbar-none">
|
||
<nav className="flex space-x-1 sm:space-x-2 py-1.5 min-w-max">
|
||
{tabs.map((tab) => {
|
||
const Icon = tab.icon;
|
||
const isActive = activeTab === tab.id;
|
||
return (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => handleTabClick(tab.id)}
|
||
className={`flex items-center gap-2 px-3.5 py-1.5 rounded-xl text-xs sm:text-sm font-semibold transition-all ${
|
||
isActive
|
||
? isBedtimeMode
|
||
? 'bg-indigo-800 text-amber-200 shadow-sm border border-indigo-600'
|
||
: 'bg-amber-500 text-white shadow-sm border border-amber-600/30'
|
||
: isBedtimeMode
|
||
? 'text-indigo-200 hover:bg-indigo-900/60 hover:text-white'
|
||
: 'text-amber-900/80 hover:bg-amber-100/70 hover:text-amber-950'
|
||
}`}
|
||
>
|
||
<Icon className={`w-4 h-4 ${isActive ? 'scale-110' : ''}`} />
|
||
<span>{tab.label}</span>
|
||
{tab.badge && (
|
||
<span className={`text-[10px] px-1.5 py-0.2 rounded-full font-bold ${
|
||
isActive
|
||
? 'bg-white/20 text-white'
|
||
: isBedtimeMode
|
||
? 'bg-indigo-900 text-indigo-300'
|
||
: 'bg-amber-200/60 text-amber-800'
|
||
}`}>
|
||
{tab.badge}
|
||
</span>
|
||
)}
|
||
</button>
|
||
);
|
||
})}
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
);
|
||
};
|