im dying

Author: NishantGupt786

src/app/upload/page.tsx

@@ -18,6 +18,14 @@ import {
   SelectLabel,
   SelectItem,
 } from "@/components/ui/select";
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandItem,
+  CommandEmpty,
+  CommandGroup,
+} from "@/components/ui/command";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 
@@ -31,6 +39,7 @@ const Page = () => {
   const [exam, setExam] = useState("");
   const [year, setYear] = useState("");
   const [files, setFiles] = useState<File[]>([]);
+  const [isSubjectCommandOpen, setIsSubjectCommandOpen] = useState(false);
   // const toggleOpenCamera = () => {
   //   setOpenCamera((prev) => !prev);
   // };
@@ -102,8 +111,13 @@ const Page = () => {
     }
   };
 
+  const handleSubjectSelect = (value: string) => {
+    setSubject(value);
+    setIsSubjectCommandOpen(false);
+  };
+
   return (
-    <div className="h-screen flex flex-col justify-between">
+    <div className="flex h-screen flex-col justify-between">
       <div>
         <Navbar />
       </div>
@@ -153,21 +167,47 @@ const Page = () => {
             {/* Subject Selection */}
             <div>
               <label>Subject:</label>
-              <Select value={subject} onValueChange={setSubject}>
-                <SelectTrigger className="m-2 rounded-md border p-2">
-                  <SelectValue placeholder="Select subject" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>Subjects</SelectLabel>
+              {/* <div className="relative">
+                <Button
+                  type="button"
+                  onClick={() => setIsSubjectCommandOpen((prev) => !prev)}
+                  className="m-2 rounded-md border p-2"
+                >
+                  {subject || "Select subject"}
+                </Button>
+                {isSubjectCommandOpen && (
+                  <Command className="absolute z-10 mt-2 w-full rounded-lg border shadow-md">
+                    <CommandInput placeholder="Search subject..." />
+                    <CommandList>
+                      <CommandEmpty>No subjects found.</CommandEmpty>
+                      <CommandGroup heading="Subjects">
+                        {courses.map((course) => (
+                          <CommandItem key={course} onSelect={() => handleSubjectSelect(course)}>
+                            <span>{course}</span>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                )}
+              </div> */}
+              <Command className="rounded-lg border shadow-md md:min-w-[450px]">
+                <CommandInput placeholder="Type a subject or search..." />
+                <CommandList className="h-[100px]">
+                  <CommandEmpty>No results found.</CommandEmpty>
+
+                  <CommandGroup heading="Subjects">
                     {courses.map((course) => (
-                      <SelectItem key={course} value={course}>
-                        {course}
-                      </SelectItem>
+                      <CommandItem
+                        key={course}
+                        onSelect={() => handleSubjectSelect(course)}
+                      >
+                        <span>{course}</span>
+                      </CommandItem>
                     ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
             </div>
 
             {/* Year Selection */}
@@ -232,7 +272,7 @@ const Page = () => {
         </fieldset>
         <Button
           onClick={handlePrint}
-          className="w-fit rounded-md px-4 py-3 text-lg font-bold"
+          className="w-fit rounded-md px-4 py-3"
         >
           Upload Papers
         </Button>

src/components/Card.tsx

@@ -27,9 +27,9 @@ const Card = ({
   }, [isSelected]);
 
   const handleDownload = async (paper: Paper) => {
-      const extension = paper.finalUrl.split(".").pop();
-      const fileName = `${extractBracketContent(paper.subject)}-${paper.exam}-${paper.slot}-${paper.year}.${extension}`;
-      await downloadFile(paper.finalUrl, fileName);
+    const extension = paper.finalUrl.split(".").pop();
+    const fileName = `${extractBracketContent(paper.subject)}-${paper.exam}-${paper.slot}-${paper.year}.${extension}`;
+    await downloadFile(paper.finalUrl, fileName);
   };
 
   function handleCheckboxChange() {
@@ -52,16 +52,24 @@ const Card = ({
   }
 
   function handleOpen() {
-    window.open(paper.finalUrl, "_blank");
-    const storedPapers = JSON.parse(localStorage.getItem("clickedPapers") ?? "[]");
-    const paperExists = storedPapers.some((storedPaper: Paper) => storedPaper._id === paper._id);
+    const storedPapers = JSON.parse(
+      localStorage.getItem("clickedPapers") ?? "[]",
+    );
+    const paperExists = storedPapers.some(
+      (storedPaper: Paper) => storedPaper._id === paper._id,
+    );
     if (!paperExists) {
-        const updatedPapers = [paper, ...storedPapers];
-        const lastThreePapers = updatedPapers.slice(0, 4);
-        localStorage.setItem("clickedPapers", JSON.stringify(lastThreePapers));
+      const updatedPapers = [paper, ...storedPapers];
+      const lastThreePapers = updatedPapers.slice(0, 4);
+      localStorage.setItem("clickedPapers", JSON.stringify(lastThreePapers));
     }
-}
-
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+    if (isMobile) {
+      router.push(paper.finalUrl);
+    } else {
+      window.open(paper.finalUrl, "_blank");
+    }
+  }
 
   return (
     <div
@@ -83,7 +91,7 @@ const Card = ({
       <div className="text-md font-medium">
         {extractWithoutBracketContent(paper.subject)}
       </div>
-      <div className="py-2 flex gap-2">
+      <div className="flex gap-2 py-2">
         {capsule(paper.exam)}
         {capsule(paper.slot)}
         {capsule(paper.year)}
@@ -98,11 +106,9 @@ const Card = ({
           />
           <p className="text-sm">Select</p>
         </div>
-        <div className="flex gap-2" onClick={handleOpen}>
-          <Eye size={20} className="cursor-pointer" />
-          <button
-            onClick={() => handleDownload(paper)}
-          >
+        <div className="flex gap-2">
+          <Eye size={20} className="cursor-pointer" onClick={handleOpen} />
+          <button onClick={() => handleDownload(paper)}>
             <Download size={20} />
           </button>
         </div>

src/components/Footer.tsx

@@ -22,7 +22,7 @@ export default function Footer() {
   }, [theme]);
 
   return (
-    <div className="mx-auto flex flex-col items-center justify-between gap-y-12 pt-12 md:pt-8 lg:w-full lg:flex-row lg:justify-around lg:px-12">
+    <div className="mx-auto flex flex-col items-center justify-between gap-y-12 pt-12 md:pt-8 lg:w-full lg:flex-row lg:justify-around lg:px-12 mb-4">
       <div className="flex items-center">
         <h1 className="jost bg-gradient-to-r from-[#562EE7] to-[#FFC6E8] bg-clip-text text-center text-3xl font-bold text-transparent lg:text-5xl">
           Papers

src/components/Navbar.tsx

@@ -7,8 +7,8 @@ import Link from "next/link";
 
 function Navbar() {
   return (
-    <div className="flex items-center justify-between px-4 py-6 md:px-12">
-      <div className="hiddaen w-[20%] md:block">
+    <div className="flex items-center justify-between px-2 gap-x-3 py-6 md:px-12">
+      <div className="hidden w-[20%] md:block">
         <a href="https://www.codechefvit.com/" className="inline-block">
           <Image
             src={ccLogo as HTMLImageElement}
@@ -31,7 +31,7 @@ function Navbar() {
         <Link href="/upload">
           <Button
             variant="outline"
-            className="rounded-full px-6 py-4 text-xs md:text-sm"
+            className="rounded-full px-6 py-4 text-xs md:text-sm mt-2 md:mt-0"
           >
             <ArrowUpToLine />
             <span>UPLOAD PAPERS</span>