-
Notifications
You must be signed in to change notification settings - Fork 712
/
BlogAppbar.tsx
85 lines (77 loc) · 3.21 KB
/
BlogAppbar.tsx
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
import { Button } from "./shad/ui/button";
import { Problem, Track } from "@repo/store";
import { ReactNode, useMemo } from "react";
import Link from "next/link";
import { ChevronLeftIcon, ChevronRightIcon, DownloadIcon } from "@radix-ui/react-icons";
import { ModeToggle } from "./ModeToggle";
import { PageToggle } from "./PageToggle";
export const BlogAppbar = ({ problem, track }: { problem: Problem; track: Track }) => {
const problemIndex = useMemo(() => {
return track.problems.findIndex((p) => p === problem.id);
}, [track, problem]);
let totalPages = Array.from({ length: track.problems.length }, (_, i) => i + 1);
function setTheme(arg0: string) {
throw new Error("Function not implemented.");
}
return (
<div className="flex flex-col items-center justify-between p-4 border-b shadow-md w-full dark:bg-zinc-950 bg-zinc-50 sticky top-0 z-50 pt-1">
<div className="w-full flex flex-col items-center md:flex-row md:items-center md:justify-between mr-2">
<div className="dark:text-zinc-100 text-zinc-950 font-semibold text-3xl mb-2 md:mb-0">
<Link href={"/"}>DailyCode</Link>
</div>
<p className="flex-1 justify-center items-center font-medium ml-2 hidden md:flex">
{problem.title} ({problemIndex + 1} / {track.problems.length})
</p>
<div>
<PageToggle allProblemIds={track.problems} track={track} />
</div>
<div className="flex space-x-2">
<Link
prefetch={true}
href={problemIndex !== 0 ? `/tracks/${track.id}/${track.problems[problemIndex - 1]}` : ``}
style={{ cursor: problemIndex !== 0 ? "pointer" : "not-allowed" }}
>
<Button variant="outline" className="ml-2 bg-black text-white" disabled={problemIndex !== 0 ? false : true}>
<div className="pr-2">
<ChevronLeftIcon />
</div>
Prev
</Button>
</Link>
<Link
prefetch={true}
href={
problemIndex + 1 === track.problems.length
? ``
: `/tracks/${track.id}/${track.problems[problemIndex + 1]}`
}
style={{ cursor: problemIndex + 1 !== track.problems.length ? "pointer" : "not-allowed" }}
>
<Button
variant="outline"
className="bg-black text-white"
disabled={problemIndex + 1 !== track.problems.length ? false : true}
>
Next
<div className="pl-2">
<ChevronRightIcon />
</div>
</Button>
</Link>
<ModeToggle />
<Link href={`/pdf/${track.id}/${track.problems[problemIndex]}`} target="_blank">
<Button variant="outline" className="ml-2 bg-black text-white">
Download
<div className="pl-2">
<DownloadIcon />
</div>
</Button>
</Link>
</div>
</div>
<p className="flex-1 justify-center items-center font-medium ml-2 flex md:hidden pt-2 border-t w-full text-center bg-opacity-60">
{problem.title} ({problemIndex + 1} / {track.problems.length})
</p>
</div>
);
};