fixes

Author: NishantGupt786

src/app/upload/page.tsx

@@ -103,7 +103,7 @@ const Page = () => {
   };
 
   return (
-    <div className="h-screen">
+    <div className="h-screen flex flex-col justify-between">
       <div>
         <Navbar />
       </div>

src/components/Footer.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { Separator } from "./ui/separator";
 import ccLogo from "../assets/codechef_logo.svg";
 import Image from "next/image";
@@ -9,13 +9,20 @@ 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";
 import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
 
 export default function Footer() {
   const { theme, setTheme } = useTheme();
-  const isDarkMode = theme === "dark";
+  const [isDarkMode, setIsDarkMode] = useState<boolean | null>(true);
+
+  useEffect(() => {
+    if (theme) {
+      setIsDarkMode(theme === "dark");
+    }
+  }, [theme]);
 
   return (
-    <div className="mx-auto flex flex-col items-center justify-between lg:justify-around gap-y-12 pt-12 md:pt-8 lg:w-full lg:flex-row 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">
       <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
@@ -45,15 +52,15 @@ export default function Footer() {
         </Link>
         <Link href="https://www.facebook.com/codechefvit/">
           <Image
-            src={isDarkMode ? meta_icon : meta_icon_dark}
+            src={isDarkMode ? meta_icon_dark : meta_icon}
             alt="meta-icon"
             height={24}
             width={24}
           />
         </Link>
         <Link href="https://x.com/codechefvit">
           <Image
-            src={isDarkMode ? x_twitter_icon : x_twitter_icon_dark}
+            src={isDarkMode ? x_twitter_icon_dark : x_twitter_icon}
             alt="x_twitter_icon"
             height={24}
             width={24}

src/components/searchbar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useRef, useEffect } from "react";
 import axios, { AxiosError } from "axios";
 import { Search } from "lucide-react";
 import debounce from 'debounce';
@@ -13,6 +13,7 @@ function SearchBar () {
   const [suggestions, setSuggestions] = useState<string[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const suggestionsRef = useRef<HTMLUListElement | null>(null);
 
   const debouncedSearch = useCallback(
     debounce(async (text: string) => {
@@ -56,6 +57,19 @@ function SearchBar () {
     router.push(`/catalogue?subject=${encodeURIComponent(suggestion)}`);
   };
 
+  const handleClickOutside = (event: MouseEvent) => {
+    if (suggestionsRef.current && !suggestionsRef.current.contains(event.target as Node)) {
+      setSuggestions([]);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
   return (
     <div className="mx-4 md:mx-0">
       <form className="w-full max-w-xl">
@@ -76,24 +90,27 @@ function SearchBar () {
             Loading suggestions...
           </div>
         )}
-        {suggestions.length > 0 && !loading && (
-          <ul className="absolute mx-0.5 md:mx-0 md:w-full text-center max-w-xl z-20 border bg-white border-[#7480FF] dark:bg-[#030712] rounded-md mt-2">
-            {suggestions.map((suggestion, index) => (
-              <li 
-                key={index} 
-                onClick={() => handleSelectSuggestion(suggestion)} 
-                className="cursor-pointer p-2 truncate hover:opacity-50"
-                style={{ width: '100%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}
-              >
-                {suggestion}
-              </li>
-            ))}
+        {(suggestions.length > 0 || error) && !loading && (
+          <ul ref={suggestionsRef} className="absolute mx-0.5 md:mx-0 md:w-full text-center max-w-xl z-20 border bg-white border-[#7480FF] dark:bg-[#030712] rounded-md mt-2">
+            {error ? (
+              <li className="p-2 text-red">{error}</li>
+            ) : (
+              suggestions.map((suggestion, index) => (
+                <li 
+                  key={index} 
+                  onClick={() => handleSelectSuggestion(suggestion)} 
+                  className="cursor-pointer p-2 truncate hover:opacity-50"
+                  style={{ width: '100%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}
+                >
+                  {suggestion}
+                </li>
+              ))
+            )}
           </ul>
         )}
       </form>
-      {error && <p className="mt-4 text-red">{error}</p>}
     </div>
   );
-};
+}
 
 export default SearchBar;