blob: 949ced3acd27a2670abbe64512c25ca99c56371f (
plain)
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
|
"use client"
import {ListIcon, NotebookText, Users, User} from "lucide-react"
import {
SidebarGroup,
SidebarGroupContent,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "@/components/ui/sidebar"
import {setPage} from "@/models/appSlice.ts";
import {useAppDispatch, useAppSelector} from "@/hooks.ts";
import {useSelector} from "react-redux";
import {selectQuestions} from "@/models/questionSlice.ts";
import {Badge} from "@/components/ui/badge"
import {selectUserUpkAnswers} from "@/models/userUpkAnswerSlice.ts";
export function NavMain() {
const dispatch = useAppDispatch()
const app = useAppSelector(state => state.app)
const questions = useSelector(selectQuestions)
const upkAnswers = useSelector(selectUserUpkAnswers)
return (
<SidebarGroup>
<SidebarGroupContent className="flex flex-col gap-2">
<SidebarMenu>
<SidebarMenuItem key="surveys"
onClick={() => dispatch(setPage("offerwall"))}
>
<SidebarMenuButton tooltip="Surveys">
<NotebookText/>
<span>
Surveys <Badge
className="absolute top-2 right-2 h-5 min-w-5 rounded-full px-1 font-mono tabular-nums cursor-pointer"
variant="outline"
title={`${(app.availability_count ?? 0).toLocaleString()} live surveys`}
>{(app.availability_count ?? 0).toLocaleString()}</Badge>
</span>
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem key="questions"
onClick={() => dispatch(setPage("questions"))}
>
<SidebarMenuButton tooltip="Questions">
<ListIcon/>
<span>
Questions <Badge
className="absolute top-2 right-2 h-5 min-w-5 rounded-full px-1 font-mono tabular-nums cursor-pointer"
variant="outline"
title={`${questions.length.toLocaleString()} profiling question available`}
>{questions.length.toLocaleString()}</Badge>
</span>
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem key="demographics"
onClick={() => dispatch(setPage("demographics"))}
>
<SidebarMenuButton tooltip="User Demographics">
<User/>
<span>
Demographics <Badge
className="absolute top-2 right-2 h-5 min-w-5 rounded-full px-1 font-mono tabular-nums cursor-pointer"
variant="outline"
>{upkAnswers.length.toLocaleString()}</Badge>
</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
)
}
|
