changes

Author: NishantGupt786

src/app/papersadminlogin/page.tsx

@@ -9,6 +9,8 @@ import {
 import { handleAPIError } from "@/util/error";
 import toast from "react-hot-toast";
 import { ApiError } from "next/dist/server/api-utils";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 
 const LoginPage = () => {
   const router = useRouter();
@@ -52,8 +54,8 @@ const LoginPage = () => {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50">
-      <div className="w-full max-w-md rounded-md bg-white p-8 shadow-md">
+    <div className="flex min-h-screen items-center justify-center ">
+      <div className="w-full max-w-md rounded-md bg-blue-800 p-8 shadow-md">
         <h1 className="mb-4 text-2xl font-bold">Login</h1>
         {error && <p className="mb-4 text-red-500">{error}</p>}
         <form
@@ -65,41 +67,42 @@ const LoginPage = () => {
           <div className="mb-4">
             <label
               htmlFor="email"
-              className="block text-sm font-medium text-gray-700"
+              className="block text-sm font-medium"
             >
               Email:
             </label>
-            <input
+            <Input
               id="email"
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
-              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+              className="mt-1 block w-full rounded-md border px-3 py-2 shadow-sm sm:text-sm"
             />
           </div>
           <div className="mb-4">
             <label
               htmlFor="password"
-              className="block text-sm font-medium text-gray-700"
+              className="block text-sm font-medium"
             >
               Password:
             </label>
-            <input
+            <Input
               id="password"
               type="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
-              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+              className="mt-1 block w-full rounded-md border px-3 py-2 shadow-sm sm:text-sm"
             />
           </div>
-          <button
+          <Button
             type="submit"
-            className="w-full rounded-md bg-indigo-500 px-4 py-2 text-white hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50"
+            variant="outline"
+            className="w-full"
           >
             Login
-          </button>
+          </Button>
         </form>
       </div>
     </div>

src/components/Card.tsx

@@ -9,6 +9,7 @@ import {
 import { capsule } from "@/util/utils";
 import axios from "axios";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
 
 const Card = ({
   paper,
@@ -63,27 +64,24 @@ const Card = ({
       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");
-    }
+    window.open(paper.finalUrl, "_blank");
   }
 
   return (
     <div
       key={paper._id}
       className={`w-56 space-y-1 rounded-xl border border-black dark:border-[#7480FF]/25  ${checked ? "bg-[#EEF2FF] dark:bg-[#050b1f]" : ""}  p-4 `}
     >
-      <Image
-        src={paper.thumbnailUrl}
-        alt={paper.subject}
-        width={320}
-        height={180}
-        onClick={handleOpen}
-        className="mb-2 h-[180px] w-full cursor-pointer object-cover"
-      />
+      <Link href={paper.finalUrl}>
+        <Image
+          src={paper.thumbnailUrl}
+          alt={paper.subject}
+          width={320}
+          height={180}
+          onClick={handleOpen}
+          className="mb-2 h-[180px] w-full cursor-pointer object-cover"
+        />
+      </Link>
 
       <div className="text-sm font-medium">
         {extractBracketContent(paper.subject)}
@@ -96,7 +94,7 @@ const Card = ({
         {capsule(paper.slot)}
         {capsule(paper.year)}
       </div>
-      <div className="flex items-center justify-between gap-2">
+      <div className="hidden md:flex items-center justify-between gap-2">
         <div className="flex items-center gap-1">
           <input
             checked={checked}

src/components/CatalogueContent.tsx

@@ -181,7 +181,7 @@ const CatalogueContent = () => {
         <Loader />
       ) : papers.length > 0 ? (
         <>
-          <div className="mb-4 flex justify-center gap-2 md:justify-end 2xl:mr-4">
+          <div className="mb-4 hidden md:flex justify-center gap-2 md:justify-end 2xl:mr-4">
             <Button variant="outline" onClick={handleSelectAll}>
               Select All
             </Button>