added 1RM and macro calculators to fitness dashboard.
This commit is contained in:
Parth
@@ -0,0 +1,207 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
LayoutDashboard,
|
||||
CheckSquare,
|
||||
Flame,
|
||||
Calendar as CalendarIcon,
|
||||
Wallet,
|
||||
BookOpen,
|
||||
Timer,
|
||||
Sparkles,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
UserCheck,
|
||||
Dumbbell
|
||||
} from 'lucide-react';
|
||||
import { ActiveModule } from '@/lib/types';
|
||||
|
||||
interface SidebarProps {
|
||||
activeModule: ActiveModule;
|
||||
onSelectModule: (module: ActiveModule) => void;
|
||||
isCollapsed: boolean;
|
||||
onToggleCollapse: () => void;
|
||||
pendingTasksCount: number;
|
||||
habitsCount: number;
|
||||
}
|
||||
|
||||
export const Sidebar: React.FC<SidebarProps> = ({
|
||||
activeModule,
|
||||
onSelectModule,
|
||||
isCollapsed,
|
||||
onToggleCollapse,
|
||||
pendingTasksCount,
|
||||
habitsCount,
|
||||
}) => {
|
||||
const navItems = [
|
||||
{
|
||||
id: 'dashboard' as ActiveModule,
|
||||
label: 'Command Center',
|
||||
icon: LayoutDashboard,
|
||||
badge: null,
|
||||
glowColor: 'group-hover:text-cyan-400',
|
||||
activeBg: 'bg-cyan-500/10 text-cyan-400 border-cyan-500/40',
|
||||
},
|
||||
{
|
||||
id: 'fitness' as ActiveModule,
|
||||
label: 'Fitness Lab',
|
||||
icon: Dumbbell,
|
||||
badge: 'MPS',
|
||||
glowColor: 'group-hover:text-lime-400',
|
||||
activeBg: 'bg-lime-500/10 text-lime-400 border-lime-500/40',
|
||||
},
|
||||
{
|
||||
id: 'pomodoro' as ActiveModule,
|
||||
label: 'Focus Timer',
|
||||
icon: Timer,
|
||||
badge: '25m',
|
||||
glowColor: 'group-hover:text-amber-400',
|
||||
activeBg: 'bg-amber-500/10 text-amber-400 border-amber-500/40',
|
||||
},
|
||||
{
|
||||
id: 'tasks' as ActiveModule,
|
||||
label: 'Tasks & Kanban',
|
||||
icon: CheckSquare,
|
||||
badge: pendingTasksCount > 0 ? `${pendingTasksCount}` : null,
|
||||
glowColor: 'group-hover:text-emerald-400',
|
||||
activeBg: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/40',
|
||||
},
|
||||
{
|
||||
id: 'habits' as ActiveModule,
|
||||
label: 'Habits & Streaks',
|
||||
icon: Flame,
|
||||
badge: habitsCount > 0 ? `${habitsCount}` : null,
|
||||
glowColor: 'group-hover:text-orange-400',
|
||||
activeBg: 'bg-orange-500/10 text-orange-400 border-orange-500/40',
|
||||
},
|
||||
{
|
||||
id: 'calendar' as ActiveModule,
|
||||
label: 'Calendar Planner',
|
||||
icon: CalendarIcon,
|
||||
badge: null,
|
||||
glowColor: 'group-hover:text-blue-400',
|
||||
activeBg: 'bg-blue-500/10 text-blue-400 border-blue-500/40',
|
||||
},
|
||||
{
|
||||
id: 'finance' as ActiveModule,
|
||||
label: 'Budget & Finance',
|
||||
icon: Wallet,
|
||||
badge: null,
|
||||
glowColor: 'group-hover:text-teal-400',
|
||||
activeBg: 'bg-teal-500/10 text-teal-400 border-teal-500/40',
|
||||
},
|
||||
{
|
||||
id: 'notes' as ActiveModule,
|
||||
label: 'Notes & Journal',
|
||||
icon: BookOpen,
|
||||
badge: null,
|
||||
glowColor: 'group-hover:text-purple-400',
|
||||
activeBg: 'bg-purple-500/10 text-purple-400 border-purple-500/40',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={`relative flex flex-col justify-between h-screen bg-[#0a0f1d] border-r border-slate-800/80 transition-all duration-300 z-30 select-none ${
|
||||
isCollapsed ? 'w-20' : 'w-64'
|
||||
}`}
|
||||
>
|
||||
{/* Brand Header */}
|
||||
<div className="p-4 border-b border-slate-800/70">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3 overflow-hidden">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-cyan-500 to-blue-600 flex items-center justify-center shadow-lg shadow-cyan-500/20 shrink-0">
|
||||
<Sparkles className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<div className="flex flex-col">
|
||||
<span className="font-bold text-base text-slate-100 tracking-tight whitespace-nowrap">
|
||||
Parth's Life
|
||||
</span>
|
||||
<span className="text-[11px] font-semibold text-cyan-400 tracking-wider uppercase">
|
||||
Command Center
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={onToggleCollapse}
|
||||
className="p-1.5 rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-800/60 transition-colors"
|
||||
title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
|
||||
>
|
||||
{isCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation List */}
|
||||
<div className="flex-1 py-4 px-3 space-y-1.5 overflow-y-auto">
|
||||
<div className="text-[11px] font-semibold text-slate-500 px-3 uppercase tracking-wider mb-2">
|
||||
{!isCollapsed ? 'Modules' : '•••'}
|
||||
</div>
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = activeModule === item.id;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onSelectModule(item.id)}
|
||||
className={`w-full flex items-center gap-3.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-all group relative border ${
|
||||
isActive
|
||||
? item.activeBg
|
||||
: 'text-slate-400 border-transparent hover:text-slate-200 hover:bg-slate-800/40 hover:border-slate-800/50'
|
||||
}`}
|
||||
title={isCollapsed ? item.label : undefined}
|
||||
>
|
||||
<Icon className={`w-5 h-5 shrink-0 transition-transform group-hover:scale-110 ${isActive ? '' : item.glowColor}`} />
|
||||
|
||||
{!isCollapsed && (
|
||||
<span className="flex-1 text-left truncate">
|
||||
{item.label}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!isCollapsed && item.badge && (
|
||||
<span className={`text-[11px] font-bold px-2 py-0.5 rounded-full ${
|
||||
isActive
|
||||
? 'bg-white/10 text-white'
|
||||
: 'bg-slate-800 text-slate-400 border border-slate-700/50'
|
||||
}`}>
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Collapsed Badge Dot */}
|
||||
{isCollapsed && item.badge && (
|
||||
<span className="absolute top-2 right-2 w-2 h-2 rounded-full bg-cyan-400" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* User / Status Footer */}
|
||||
<div className="p-3 border-t border-slate-800/70">
|
||||
<div className={`flex items-center gap-3 p-2 rounded-xl bg-slate-900/60 border border-slate-800/60 ${isCollapsed ? 'justify-center' : ''}`}>
|
||||
<div className="relative shrink-0">
|
||||
<div className="w-9 h-9 rounded-full bg-gradient-to-br from-violet-500 via-indigo-500 to-cyan-400 flex items-center justify-center text-white font-bold text-sm shadow-md">
|
||||
P
|
||||
</div>
|
||||
<span className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-emerald-400 border-2 border-[#0a0f1d] rounded-full"></span>
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs font-semibold text-slate-200 truncate">Parth</p>
|
||||
<div className="flex items-center gap-1 text-[10px] text-emerald-400 font-medium">
|
||||
<UserCheck className="w-3 h-3" />
|
||||
<span>Focus Active</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user