Skip to content

Feat: Add paper preview modal on eye icon click #488

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Rithish-2914 wants to merge 2 commits into
base: staging
Choose a base branch
from
+107 −82
Open

Feat: Add paper preview modal on eye icon click #488

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e915c2b
fix: resolve accordion not collapsing due to controlled value prop
Rithish-2914 Apr 11, 2026
1ae7e52
feat: add paper preview modal with PDF viewer (handles CORS using Goo…
Rithish-2914 Apr 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ yarn-error.log*
# local env files
# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
.env
.env.lcal
.env.local
.env*.local
.env.prod
# vercel
Expand Down
26 changes: 8 additions & 18 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

159 changes: 97 additions & 62 deletions src/components/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
"use client";

import React from "react";
import { type IPaper } from "@/interface";
import Image from "next/image";
import { Eye, Download, Check } from "lucide-react";
Expand All @@ -23,6 +24,8 @@ interface CardProps {
}

const Card = ({ paper, onSelect, isSelected }: CardProps) => {
const [previewOpen, setPreviewOpen] = React.useState(false);

const handleDownload = async (paper: IPaper) => {
await downloadFile(getSecureUrl(paper.file_url), generateFileName(paper));
};
Expand All @@ -34,77 +37,109 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
const paperLink = `/paper/${paper._id}`;

return (
<div
className={cn(
"overflow-hidden rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] font-play transition-all duration-150 hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] hover:dark:bg-[#262635]",
isSelected && "bg-white",
)}
>
<Link href={paperLink} target="_blank" rel="noopener noreferrer">
<Image
src={paper.thumbnail_url}
alt={paper.subject}
width={320}
height={180}
className="w-full object-cover p-4 pb-3 md:h-[250px]"
/>

<div className="justify-center">
<div className="flex flex-row items-center justify-between px-4 pb-2">
<div className="text-md font-play font-medium">
{extractBracketContent(paper.subject)}
</div>
<div className="flex gap-2">
<Link href={paperLink} target="_blank" rel="noopener noreferrer">
<Eye size={22} />
</Link>
<Download
size={20}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
void handleDownload(paper);
}}
className="cursor-pointer"
/>
<>
<div
className={cn(
"overflow-hidden rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] font-play transition-all duration-150 hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] hover:dark:bg-[#262635]",
isSelected && "bg-white",
)}
>
<Link href={paperLink} target="_blank" rel="noopener noreferrer">
<Image
src={paper.thumbnail_url}
alt={paper.subject}
width={320}
height={180}
className="w-full object-cover p-4 pb-3 md:h-[250px]"
/>

<div className="justify-center">
<div className="flex flex-row items-center justify-between px-4 pb-2">
<div className="text-md font-play font-medium">
{extractBracketContent(paper.subject)}
</div>
</div>
</div>

<div className="h-[1px] w-full bg-[#734DFF] dark:bg-[#36266D]" />
<div className="h-[1px] w-full bg-[#734DFF] dark:bg-[#36266D]" />

<div className="space-y-2 p-4">
<div className="font-play text-lg font-semibold">
{extractWithoutBracketContent(paper.subject)}
</div>
<div className="flex flex-wrap gap-2">
<Capsule>{paper.exam}</Capsule>
<Capsule>{paper.slot}</Capsule>
<Capsule>{paper.year}</Capsule>
<Capsule>{paper.semester}</Capsule>
<div className="space-y-2 p-4">
<div className="font-play text-lg font-semibold">
{extractWithoutBracketContent(paper.subject)}
</div>
<div className="flex flex-wrap gap-2">
<Capsule>{paper.exam}</Capsule>
<Capsule>{paper.slot}</Capsule>
<Capsule>{paper.year}</Capsule>
<Capsule>{paper.semester}</Capsule>
</div>
</div>
</div>
</div>
</Link>

<div className="flex items-center justify-between gap-2 px-4 pb-4 font-play">
<div className="flex items-center gap-2">
<input
checked={isSelected}
onChange={handleCheckboxChange}
className="h-5 w-5 accent-[#7480FF]"
type="checkbox"
</Link>

<div className="flex justify-end gap-2 px-4 pb-2">
<Eye
size={22}
className="cursor-pointer"
onClick={(e) => {
e.stopPropagation();
setPreviewOpen(true);
}}
/>

<Download
size={20}
onClick={(e) => {
e.stopPropagation();
void handleDownload(paper);
}}
className="cursor-pointer"
/>
<p>Select</p>
</div>
{paper.answer_key_included && (
<div className="flex items-center gap-2 font-normal text-[#7480FF]">
<Check color="#7480FF" />
Answer Key

<div className="flex items-center justify-between gap-2 px-4 pb-4 font-play">
<div className="flex items-center gap-2">
<input
checked={isSelected}
onChange={handleCheckboxChange}
className="h-5 w-5 accent-[#7480FF]"
type="checkbox"
/>
<p>Select</p>
</div>
)}

{paper.answer_key_included && (
<div className="flex items-center gap-2 font-normal text-[#7480FF]">
<Check color="#7480FF" />
Answer Key
</div>
)}
</div>
</div>
</div>

{previewOpen && (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
onClick={() => setPreviewOpen(false)}
>
<div
className="relative w-[95%] max-w-5xl h-[90vh] rounded-lg bg-white p-2 dark:bg-[#171720]"
onClick={(e) => e.stopPropagation()}
>
<button
className="absolute right-3 top-3 z-10 text-xl"
onClick={() => setPreviewOpen(false)}
>
✕
</button>
<iframe
src={paper.file_url}
className="w-full h-full rounded-md"
/>
</div>
</div>
)}
</>
);
};

export default Card;
export default Card;
2 changes: 1 addition & 1 deletion src/components/SidebarSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
updater,
}) => (
<div className="flex w-full flex-col items-baseline justify-between border-b-2 border-[#36266d] px-[10px]">
<Accordion className="w-full" type="single" value={label}>
<Accordion className="w-full" type="single" collapsible>
<AccordionItem className="border-none no-underline" value={label}>
<AccordionTrigger className="w-full no-underline">
<div className="font-play text-sm no-underline">{label}</div>
Expand Down
Loading