Merge pull request #10 from abhitrueprogrammer/master

Added several UI fixes

Author: NishantGupt786

package.json

@@ -51,6 +51,7 @@
     "react-dom": "^18.3.0",
     "react-dropzone": "^14.2.3",
     "react-hot-toast": "^2.4.1",
+    "react-icons": "^5.3.0",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
     "use-debounce": "^10.0.3",

pnpm-lock.yaml

@@ -402,7 +402,7 @@ function Upload() {
   }
 
   if (!tag) {
-    return <div>Loading...</div>;
+    return <div>.</div>;
   }
 
   return (

src/app/adminupload/page.tsx

@@ -3,12 +3,17 @@
 import CatalogueContent from "@/components/CatalogueContent";
 import { Suspense } from "react";
 import Navbar from "@/components/Navbar";
-
+import { RiLoader2Fill } from "react-icons/ri";
+import Loader from "@/components/ui/loader";
 const Catalogue = () => {
   return (
     <>
       <Navbar />
-      <Suspense fallback={<div>Loading catalogue...</div>}>
+      <Suspense
+        fallback={
+          <Loader />
+        }
+      >
         <CatalogueContent />
       </Suspense>
     </>

src/app/catalogue/page.tsx

@@ -2,13 +2,33 @@ import "@/styles/globals.css";
 import { Toaster } from "react-hot-toast";
 import { ThemeProvider } from "@/components/theme-provider";
 import { GeistSans } from "geist/font/sans";
+import { Metadata } from "next";
 
-export const metadata = {
-  title: "Create T3 App",
-  description: "Generated by create-t3-app",
-  icons: [{ rel: "icon", url: "/favicon.ico" }],
+
+export const metadata: Metadata = {
+  metadataBase: new URL("https://papers.codechefvit.com/"),
+  title: "Papers",
+  description: "Made with ♡ by CodeChef-VIT",
+  icons: [{ rel: "icon", url: "/chefshat.svg" }],
+  openGraph: {
+    title: "Papers",
+    images: [{ url: "/cookoff.png" }],
+    url: "https://papers.codechefvit.com/",
+    type: "website",
+    description: "Made with ♡ by CodeChef-VIT",
+    siteName: "Papers",
+  },
+  applicationName: "Papers",
+  keywords: [
+    "CodeChef",
+    "VIT",
+    "Vellore Institute of Technology",
+    "CodeChef-VIT",
+    "Papers"
+  ],
 };
 
+
 export default function RootLayout({
   children,
 }: {

src/app/layout.tsx

@@ -87,8 +87,8 @@ const Page = () => {
           }
         })(),
         {
-          loading: "Sending zip",
-          success: "zip successfully sent",
+          loading: "Sending papers",
+          success: "Papers successfully sent",
           error: (err: ApiError) => err.message,
         },
       );
@@ -107,7 +107,7 @@ const Page = () => {
       <div>
         <Navbar />
       </div>
-      <div className="2xl:my-12 flex flex-col items-center">
+      <div className="2xl:my-15 flex flex-col items-center">
         <fieldset className="mb-4 w-[350px] rounded-lg border-2 border-gray-300 p-4 pr-8">
           <legend className="text-lg font-bold">Select paper parameters</legend>
 

src/app/upload/page.tsx

@@ -9,6 +9,8 @@ import Card from "./Card";
 import { extractBracketContent } from "@/util/utils";
 import { useRouter } from "next/navigation";
 import SearchBar from "./searchbar";
+import { RiLoader2Fill } from "react-icons/ri";
+import Loader from "./ui/loader";
 
 const cryptr = new Cryptr(
   process.env.NEXT_PUBLIC_CRYPTO_SECRET ?? "default_crypto_secret",
@@ -168,7 +170,7 @@ const CatalogueContent = () => {
 
   return (
     <div className="min-h-screen px-2 md:p-8">
-      <div className="mb-4 flex flex-row w-full items-center md:justify-center md:gap-10">
+      <div className="mb-4 flex w-full flex-row items-center md:justify-center md:gap-10">
         <div className="w-[120%] md:w-[576px]">
           <SearchBar />
         </div>
@@ -187,10 +189,11 @@ const CatalogueContent = () => {
 
       {error && <p className="text-red-500">{error}</p>}
       {loading ? (
-        <p>Loading papers...</p>
+           <Loader />
+
       ) : papers.length > 0 ? (
         <>
-          <div className="mb-4 2xl:mr-4 flex justify-center md:justify-end gap-2">
+          <div className="mb-4 flex justify-center gap-2 md:justify-end 2xl:mr-4">
             <Button variant="outline" onClick={handleSelectAll}>
               Select All
             </Button>
@@ -205,7 +208,7 @@ const CatalogueContent = () => {
               Download All ({selectedPapers.length})
             </Button>
           </div>
-          <div className="flex flex-col items-center justify-center md:justify-normal md:flex-row flex-wrap mx-auto gap-10">
+          <div className="mx-auto flex flex-col flex-wrap items-center justify-center gap-10 md:flex-row md:justify-normal">
             {papers.map((paper) => (
               <Card
                 key={paper._id}

src/components/CatalogueContent.tsx

@@ -6,37 +6,78 @@ import meta_icon from "../assets/meta_icon.svg";
 import x_twitter_icon from "../assets/x_twitter_icon.svg";
 import meta_icon_dark from "../assets/meta_icon_dark.svg";
 import x_twitter_icon_dark from "../assets/x_twitter_icon_dark.svg";
+import Link from "next/link";
 
 export default function Footer() {
   return (
-    <div className="flex md:flex-row flex-col gap-y-12 md:w-full md:px-12 mx-auto items-center justify-between pt-12">
+    <div className="mx-auto flex flex-col items-center justify-between gap-y-12 pt-12 lg:w-full lg:flex-row lg:px-12">
       <div className="flex items-center">
-        <h1 className="jost bg-gradient-to-r from-[#562EE7] to-[#FFC6E8] bg-clip-text text-center text-3xl md:text-5xl font-bold text-transparent">
+        <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
         </h1>
-        <Separator orientation="vertical" className="min-h-20 h-full mx-3" />
+        <Separator orientation="vertical" className="mx-3 h-full min-h-20" />
         <div className="flex items-center">
           <Image
             src={ccLogo as HTMLImageElement}
             alt="codechef-logo"
             height={70}
             width={70}
           />
-          <p className="jost text-2xl md:text-4xl font-bold">CodeChef-VIT</p>
+          <p className="jost text-2xl font-bold lg:text-4xl">CodeChef-VIT</p>
         </div>
       </div>
 
-      <p className="text-xl md:block hidden">Made with Love By Codechef-VIT</p>
-      <div className="flex gap-x-8 items-center">
-        <Instagram />
-        <Linkedin />
-        <Youtube />
-        <Image src={meta_icon} alt="meta-icon" height={24} width={24} className="dark:hidden"/>
-        <Image src={x_twitter_icon} alt="x_twitter_icon" className="dark:hidden" height={24} width={24} />
-        <Image src={meta_icon_dark} alt="meta-icon" className="hidden dark:block" height={24} width={24} />
-        <Image src={x_twitter_icon_dark} alt="x_twitter_icon" className="hidden dark:block mb-2" height={24} width={24} />
+      <p className="hidden text-xl lg:block">Made with Love By Codechef-VIT</p>
+      <div className="flex items-center gap-x-8">
+        <Link href="https://www.instagram.com/codechefvit/">
+          <Instagram />
+        </Link>
+        <Link href="https://www.linkedin.com/company/codechefvit/">
+          <Linkedin />
+        </Link>
+        <Link href="https://www.youtube.com/@CodeChefVIT">
+          <Youtube />
+        </Link>
+        <Link href="https://www.facebook.com/codechefvit/">
+          <Image
+            src={meta_icon}
+            alt="meta-icon"
+            height={24}
+            width={24}
+            className="dark:hidden"
+          />
+        </Link>
+
+        <Link href="https://www.facebook.com/codechefvit/">
+          <Image
+            src={meta_icon_dark}
+            alt="meta-icon"
+            className="hidden dark:block"
+            height={24}
+            width={24}
+          />
+        </Link>
+        <Link href="https://x.com/codechefvit">
+          <Image
+            src={x_twitter_icon}
+            alt="x_twitter_icon"
+            className="dark:hidden"
+            height={24}
+            width={24}
+          />
+        </Link>
+
+        <Link href="https://x.com/codechefvit">
+          <Image
+            src={x_twitter_icon_dark}
+            alt="x_twitter_icon"
+            className="mb-2 hidden dark:block"
+            height={24}
+            width={24}
+          />
+        </Link>
       </div>
-      <p className="text-xl block md:hidden">Made with Love By Codechef-VIT</p>
+      <p className="block text-xl lg:hidden">Made with Love By Codechef-VIT</p>
     </div>
   );
 }

src/components/Footer.tsx

@@ -8,17 +8,21 @@ import Link from "next/link";
 function Navbar() {
   return (
     <div className="flex items-center justify-between px-4 py-6 md:px-12">
-      <div className="hidden w-[20%] md:block">
-        <Image
-          src={ccLogo as HTMLImageElement}
-          alt="codechef-logo"
-          height={70}
-          width={70}
-        />
+      <div className="hiddaen w-[20%] md:block">
+        <a href="https://www.codechefvit.com/" className="inline-block">
+          <Image
+            src={ccLogo as HTMLImageElement}
+            alt="codechef-logo"
+            height={70}
+            width={70}
+          />
+        </a>
+      </div>
+      <div>
+        <Link href="/"  className="jost bg-gradient-to-r from-[#562EE7] to-[#FFC6E8] bg-clip-text text-center text-5xl font-bold text-transparent md:w-[60%] md:text-6xl">
+          Papers
+        </Link>
       </div>
-      <Link href="/" className="jost bg-gradient-to-r from-[#562EE7] to-[#FFC6E8] bg-clip-text text-center text-5xl font-bold text-transparent md:w-[60%] md:text-6xl">
-        Papers
-      </Link>
       <div className="flex items-center justify-end gap-x-2 md:w-[20%]">
         <div className="hidden md:block">
           <ModeToggle />

src/components/Navbar.tsx

@@ -0,0 +1,14 @@
+const Loader = () => {
+    return (
+      <div className="m-52 flex justify-center items-center bg-gradient-to-br ">
+        <div className="relative">
+          <div className="absolute inset-0 rounded-full bg-gradient-to-r from-white to-transparent opacity-30 animate-ping"></div>
+          <div className="animate-spin rounded-full h-20 w-20 border-t-4 border-b-4 border-transparent border-t-white border-b-gray-800 shadow-lg"></div>
+          <div className="absolute inset-4 rounded-full bg-gradient-to-br from-[#262626] to-[#333333] shadow-inner"></div>
+          <div className="absolute inset-7 rounded-full bg-white shadow-lg animate-pulse"></div>
+        </div>
+      </div>
+    );
+  };
+  
+  export default Loader;