-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtemp_sheet.txt
More file actions
145 lines (137 loc) · 10.9 KB
/
Copy pathtemp_sheet.txt
File metadata and controls
145 lines (137 loc) · 10.9 KB
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<Menu className="h-5 w-5" />
</Button>
</SheetTrigger>
<SheetContent side="left" className="w-[85vw] max-w-[400px] p-0 bg-[#1c1c1e] border-none text-gray-200 rounded-r-2xl sm:rounded-r-3xl overflow-y-auto">
<SheetHeader className="p-4 border-b border-[#2c2c2e]/50 flex flex-row items-center justify-between space-y-0 text-left">
<SheetTitle className="sr-only">Navigation Menu</SheetTitle>
<Button variant="ghost" size="icon" className="hover:bg-[#2c2c2e] -ml-2" onClick={() => setIsMobileSheetOpen(false)}>
<Menu className="h-6 w-6 text-gray-300" />
</Button>
<Button variant="ghost" size="icon" className="hover:bg-[#2c2c2e] -mr-2">
<Settings className="h-5 w-5 text-gray-400" />
</Button>
</SheetHeader>
<div className="py-2">
{/* Views */}
<div className="px-4 py-2 animate-in fade-in slide-in-from-bottom-4 duration-500" style={{ animationFillMode: 'both', animationDelay: '100ms' }}>
<button onClick={() => { setViewMode("calendar"); setIsMobileSheetOpen(false); }} className="w-full flex items-center justify-between p-3 rounded-xl hover:bg-[#2c2c2e] active:scale-[0.98] transition-all">
<div className="flex items-center gap-4">
<CalendarIcon className="h-5 w-5 text-gray-400" />
<span className="text-lg">Calendar</span>
</div>
{viewMode === "calendar" && <CheckCircle2 className="h-5 w-5 text-blue-500" />}
</button>
<button onClick={() => { setViewMode("list"); setIsMobileSheetOpen(false); }} className="w-full flex items-center justify-between p-3 rounded-xl hover:bg-[#2c2c2e] active:scale-[0.98] transition-all mt-1">
<div className="flex items-center gap-4">
<ListIcon className="h-5 w-5 text-gray-400" />
<span className="text-lg">List</span>
</div>
{viewMode === "list" && <CheckCircle2 className="h-5 w-5 text-blue-500" />}
</button>
</div>
<div className="h-px bg-[#2c2c2e]/50 my-2 border-t border-dashed border-[#444]/30 mx-4" />
{/* Filters / Selectors */}
<div className="px-4 py-2 animate-in fade-in slide-in-from-bottom-4 duration-500" style={{ animationFillMode: 'both', animationDelay: '150ms' }}>
<button onClick={() => { handleScrollToToday(); setIsMobileSheetOpen(false); }} className="w-full flex items-center justify-between p-3 rounded-xl hover:bg-[#2c2c2e] active:scale-[0.98] transition-all mb-2 bg-[#2a2a2c]/50 border border-[#333]">
<div className="flex items-center gap-4">
<div className="flex items-center justify-center w-5 h-5 bg-blue-500 text-white text-[10px] font-bold rounded-[4px] shadow-[0_0_10px_rgba(59,130,246,0.3)]">
{new Date().getDate()}
</div>
<span className="text-lg">Go to Today</span>
</div>
</button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="w-full flex items-center justify-between p-3 rounded-xl hover:bg-[#2c2c2e] active:scale-[0.98] transition-all">
<div className="flex items-center gap-4">
<Filter className="h-5 w-5 text-gray-400" />
<span className="text-lg">Month</span>
</div>
<div className="flex items-center gap-2 text-muted-foreground text-sm">
<span>{months[0]}</span>
<ChevronDown className="h-4 w-4" />
</div>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-[200px] bg-[#2c2c2e] border-none text-gray-200">
{months.map((m) => (
<DropdownMenuItem key={m} onClick={() => { handleMonthSelect(m); setIsMobileSheetOpen(false); }} className="focus:bg-[#3c3c3e] focus:text-white">
{m}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="w-full flex items-center justify-between p-3 rounded-xl hover:bg-[#2c2c2e] active:scale-[0.98] transition-all mt-1">
<div className="flex items-center gap-4">
<Globe className="h-5 w-5 text-blue-400" />
<span className="text-lg">Continent</span>
</div>
<div className="flex items-center gap-2 text-muted-foreground text-sm max-w-[120px]">
<span className="truncate">{selectedContinent || "All"}</span>
<ChevronDown className="h-4 w-4 shrink-0" />
</div>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-[200px] bg-[#2c2c2e] border-none text-gray-200">
<DropdownMenuItem onClick={() => { setSelectedContinent(null); setIsMobileSheetOpen(false); }} className="focus:bg-[#3c3c3e] focus:text-white">All Continents</DropdownMenuItem>
{continents.map((continent) => (
<DropdownMenuItem key={continent} onClick={() => { setSelectedContinent(continent); setIsMobileSheetOpen(false); }} className="focus:bg-[#3c3c3e] focus:text-white">
{continent}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="w-full flex items-center justify-between p-3 rounded-xl hover:bg-[#2c2c2e] active:scale-[0.98] transition-all mt-1">
<div className="flex items-center gap-4">
<Tag className="h-5 w-5 text-blue-400" />
<span className="text-lg">Event Type</span>
</div>
<div className="flex items-center gap-2 text-muted-foreground text-sm max-w-[120px]">
<span className="truncate">{selectedEventType ? selectedEventType.charAt(0).toUpperCase() + selectedEventType.slice(1) : "All"}</span>
<ChevronDown className="h-4 w-4 shrink-0" />
</div>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-[200px] bg-[#2c2c2e] border-none text-gray-200">
<DropdownMenuItem onClick={() => { setSelectedEventType(null); setIsMobileSheetOpen(false); }} className="focus:bg-[#3c3c3e] focus:text-white">All Types</DropdownMenuItem>
{eventTypes.map((type) => (
<DropdownMenuItem key={type} onClick={() => { setSelectedEventType(type); setIsMobileSheetOpen(false); }} className="focus:bg-[#3c3c3e] focus:text-white">
{type.charAt(0).toUpperCase() + type.slice(1)}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="h-px bg-[#2c2c2e]/50 my-2 border-t border-dashed border-[#444]/30 mx-4" />
{/* Accounts / Profile */}
<div className="px-4 py-2 animate-in fade-in slide-in-from-bottom-4 duration-500" style={{ animationFillMode: 'both', animationDelay: '200ms' }}>
{session ? (
<>
<div className="flex items-center justify-between p-3 rounded-xl hover:bg-[#2c2c2e] active:scale-[0.98] transition-all cursor-pointer group">
<div className="flex items-center gap-4" onClick={() => fileInputRef.current?.click()}>
<Avatar className="h-8 w-8 rounded-full border border-border shrink-0 bg-blue-600">
<AvatarImage src={session.user?.image || ""} className="object-cover" />
<AvatarFallback className="bg-blue-600 text-white"><User className="h-4 w-4" /></AvatarFallback>
</Avatar>
<div className="flex flex-col overflow-hidden">
<span className="text-lg leading-tight truncate">My Profile {isAvatarUploading && "(Saving...)"}</span>
<span className="text-xs text-muted-foreground truncate">{session.user?.email}</span>
</div>
</div>
<LogOut className="h-4 w-4 text-gray-500 hover:text-red-400" onClick={(e) => { e.stopPropagation(); signOut(); setIsMobileSheetOpen(false); }} />
</div>
<button onClick={() => { setShowOnlySaved(!showOnlySaved); setIsMobileSheetOpen(false); }} className="w-full flex items-center justify-between p-3 rounded-xl hover:bg-[#2c2c2e] active:scale-[0.98] transition-all mt-2">
<div className="flex items-center gap-4">
<div className="h-6 w-6 rounded-full bg-[#916eff] flex items-center justify-center shrink-0">
<Heart className="h-3 w-3 text-white fill-white" />
</div>
<span className="text-lg">My Events ({savedEvents.length})</span>
</div>
<ChevronRight className="h-5 w-5 text-gray-500" />
</button>
</>
) : (