Skip to content

Commit 60840f9

Browse files
abhitrueprogrammerabhitrueprogrammer
committed
feat: add share button in toolbar, increase time delay on corousal and change colors on toolbar
1 parent 5b7cfbb commit 60840f9

File tree

4 files changed

+70
-59
lines changed

4 files changed

+70
-59
lines changed

‎src/app/paper/[id]/page.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,6 @@ const PaperPage = async ({ params }: { params: { id: string } }) => {
165165
<div>
166166
{paper.subject} {paper.exam} {paper.slot} {paper.year}
167167
</div>
168-
<ShareButton />
169168
</h1>
170169
<center>
171170
<PdfViewer

‎src/components/ShareButton.tsx

Lines changed: 54 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
"use client";
22
import React, { useEffect, useState } from "react";
3-
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
3+
import {
4+
Dialog,
5+
DialogContent,
6+
DialogDescription,
7+
DialogHeader,
8+
DialogTitle,
9+
DialogTrigger,
10+
} from "./ui/dialog";
411
import { Copy } from "lucide-react";
512
import toast from "react-hot-toast";
613
import { FaShare } from "react-icons/fa";
@@ -9,50 +16,53 @@ import { Button } from "./ui/button";
916
import { usePathname } from "next/navigation";
1017

1118
export default function ShareButton() {
12-
const [origin, setOrigin] = useState("");
19+
const [origin, setOrigin] = useState("");
1320

14-
useEffect(() => {
15-
if (typeof window !== "undefined") {
16-
setOrigin(window.location.origin);
17-
}
18-
}, []);
19-
20-
const pathname = usePathname();
21-
const paperPath = origin + pathname;
21+
useEffect(() => {
22+
if (typeof window !== "undefined") {
23+
setOrigin(window.location.origin);
24+
}
25+
}, []);
26+
27+
const pathname = usePathname();
28+
const paperPath = origin + pathname;
2229
return (
23-
<Dialog>
24-
<DialogTrigger>
25-
<FaShare></FaShare>
26-
</DialogTrigger>
27-
<DialogContent className="max-w-96">
28-
<DialogHeader>
29-
<DialogTitle>Share Papers with your friends!</DialogTitle>
30-
<DialogDescription>
31-
Either scan the QR or copy the link and share
32-
</DialogDescription>
33-
</DialogHeader>
34-
<div className="flex flex-col items-center justify-center gap-5">
35-
<QR url={paperPath}></QR>
36-
<Button
37-
type="submit"
38-
size="sm"
39-
className="flex w-fit items-center justify-between gap-5 px-3"
40-
onClick={async () => {
41-
await toast.promise(
42-
navigator.clipboard.writeText(paperPath), // This is a promise
43-
{
44-
success: "Link copied successfully",
45-
loading: "Copying link...",
46-
error: "Error copying link",
47-
},
48-
);
49-
}}
50-
>
51-
<p>Copy Link To Clipboard</p>
52-
<Copy />
53-
</Button>
54-
</div>
55-
</DialogContent>
56-
</Dialog>
30+
<Dialog>
31+
<DialogTrigger asChild>
32+
<Button>
33+
{" "}
34+
<FaShare />
35+
</Button>
36+
</DialogTrigger>
37+
<DialogContent className="max-w-96">
38+
<DialogHeader>
39+
<DialogTitle>Share Papers with your friends!</DialogTitle>
40+
<DialogDescription>
41+
Either scan the QR or copy the link and share
42+
</DialogDescription>
43+
</DialogHeader>
44+
<div className="flex flex-col items-center justify-center gap-5">
45+
<QR url={paperPath}></QR>
46+
<Button
47+
type="submit"
48+
size="sm"
49+
className="flex w-fit items-center justify-between gap-5 px-3"
50+
onClick={async () => {
51+
await toast.promise(
52+
navigator.clipboard.writeText(paperPath), // This is a promise
53+
{
54+
success: "Link copied successfully",
55+
loading: "Copying link...",
56+
error: "Error copying link",
57+
},
58+
);
59+
}}
60+
>
61+
<p>Copy Link To Clipboard</p>
62+
<Copy />
63+
</Button>
64+
</div>
65+
</DialogContent>
66+
</Dialog>
5767
);
5868
}

‎src/components/StoredPapers.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ function StoredPapers() {
6060
return <Loader prop="m-10" />;
6161
}
6262

63-
const plugins = [Autoplay({ delay: 3000, stopOnInteraction: true })];
63+
const plugins = [Autoplay({ delay: 5000, stopOnInteraction: true })];
6464

6565
return (
6666
<div className="px-4">

‎src/components/pdfViewer.tsx

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Download, ZoomIn, ZoomOut } from "lucide-react";
77
import { Button } from "./ui/button";
88
import { extractBracketContent } from "@/util/utils";
99
import { downloadFile } from "./CatalogueContent";
10+
import ShareButton from "./ShareButton";
1011

1112
// Set up PDF.js worker
1213
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
@@ -88,17 +89,18 @@ export default function PdfViewer({ url, name }: PdfViewerProps) {
8889
</div>
8990

9091
{/* Controls */}
91-
<div className="mt-4 flex flex-col items-center gap-4 rounded-lg bg-[#160820] p-4 shadow sm:flex-row">
92+
<div className="mt-4 flex flex-col items-center gap-4 rounded-lg bg-[#262635] p-4 shadow sm:flex-row">
9293
{/* Page Navigation */}
94+
<ShareButton />
9395
<Button onClick={downloadPDF}><Download/></Button>
9496
<div className="flex items-center gap-2">
95-
<button
97+
<Button
9698
onClick={goToPreviousPage}
9799
disabled={pageNumber <= 1}
98-
className="rounded bg-[#3d2075] px-3 py-1 text-white transition hover:bg-[#6536c1] disabled:bg-[#706b7a]"
100+
className="rounded px-3 py-1 disabled:opacity-50 text-white transition hover:bg-[#6536c1] disabled:bg-[#706b7a]"
99101
>
100102
{"<"}
101-
</button>
103+
</Button>
102104
<input
103105
type="number"
104106
value={pageNumber}
@@ -108,32 +110,32 @@ export default function PdfViewer({ url, name }: PdfViewerProps) {
108110
className="w-16 rounded border p-1 text-center"
109111
/>
110112
<span>of {numPages ?? 1}</span>
111-
<button
113+
<Button
112114
onClick={goToNextPage}
113115
disabled={pageNumber >= (numPages ?? 1)}
114-
className="rounded bg-[#3d2075] px-3 py-1 text-white transition hover:bg-[#6536c1] disabled:bg-[#706b7a]"
116+
className="rounded disabled:opacity-50 px-3 py-1 text-white transition hover:bg-[#6536c1] disabled:bg-[#706b7a]"
115117
>
116118
{">"}
117-
</button>
119+
</Button>
118120
</div>
119121

120122
{/* Zoom Controls */}
121123
<div className="flex items-center gap-2">
122-
<button
124+
<Button
123125
onClick={zoomOut}
124126
disabled={scale <= 0.25}
125-
className="rounded bg-[#3d2075] px-3 py-1 text-white transition hover:bg-[#6536c1] disabled:bg-gray-300"
127+
className="rounded px-3 py-1 text-white transition hover:bg-[#6536c1] disabled:bg-gray-300"
126128
>
127129
<ZoomOut />
128-
</button>
130+
</Button>
129131
<span>{(scale * 100).toFixed(0)}%</span>
130-
<button
132+
<Button
131133
onClick={zoomIn}
132134
disabled={scale >= 3}
133-
className="rounded bg-[#3d2075] px-3 py-1 text-white transition hover:bg-[#6536c1] disabled:bg-gray-300"
135+
className="rounded px-3 py-1 text-white transition hover:bg-[#6536c1] disabled:bg-gray-300"
134136
>
135137
{<ZoomIn />}
136-
</button>
138+
</Button>
137139
</div>
138140
</div>
139141

0 commit comments

Comments
 (0)