59 lines
2.5 KiB
TypeScript
59 lines
2.5 KiB
TypeScript
import type { User } from './data';
|
|
|
|
interface TopNavbarProps {
|
|
title: string;
|
|
filterUser: string | null;
|
|
onFilterChange: (uid: string | null) => void;
|
|
searchQuery: string;
|
|
onSearch: (q: string) => void;
|
|
onNewTask: () => void;
|
|
onOpenSidebar: () => void;
|
|
users: User[];
|
|
}
|
|
|
|
export function TopNavbar({ title, filterUser, onFilterChange, searchQuery, onSearch, onNewTask, onOpenSidebar, users }: TopNavbarProps) {
|
|
return (
|
|
<div className="top-navbar">
|
|
<button className="hamburger-btn" onClick={onOpenSidebar}>☰</button>
|
|
<span className="navbar-title">{title}</span>
|
|
<div className="navbar-search">
|
|
<span className="navbar-search-icon">🔍</span>
|
|
<input placeholder="Search tasks..." value={searchQuery} onChange={e => onSearch(e.target.value)} />
|
|
</div>
|
|
<div className="navbar-right">
|
|
<div className="filter-chips">
|
|
<span className={`filter-chip filter-chip-all ${!filterUser ? 'active' : ''}`} onClick={() => onFilterChange(null)}>All</span>
|
|
{users.map(u => (
|
|
<div key={u.id} className={`filter-chip ${filterUser === u.id ? 'active' : ''}`}
|
|
style={{ background: u.color, borderColor: filterUser === u.id ? u.color : 'transparent' }}
|
|
title={u.name} onClick={() => onFilterChange(u.id === filterUser ? null : u.id)}>
|
|
{u.avatar}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button className="notif-btn">🔔<span className="notif-badge">3</span></button>
|
|
<button className="new-task-btn" onClick={onNewTask}>+ New Task</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface BottomToggleBarProps {
|
|
activeView: string;
|
|
onViewChange: (v: string) => void;
|
|
}
|
|
|
|
export function BottomToggleBar({ activeView, onViewChange }: BottomToggleBarProps) {
|
|
return (
|
|
<div className="bottom-bar">
|
|
<div className="toggle-pill">
|
|
{[{ id: 'calendar', icon: '📅', label: 'Calendar' }, { id: 'kanban', icon: '▦', label: 'Kanban' }, { id: 'list', icon: '☰', label: 'List' }].map(v => (
|
|
<button key={v.id} className={`toggle-btn ${activeView === v.id ? 'active' : ''}`} onClick={() => onViewChange(v.id)}>
|
|
{v.icon} {v.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|