dowmload changes

Author: NishantGupt786

src/app/page.tsx

@@ -6,13 +6,13 @@ import Footer from "@/components/Footer";
 
 const HomePage = () => {
   return (
-    <div>
+    <div className="flex min-h-screen flex-col">
       <div>
         <Navbar />
       </div>
-      <div className="mt-2 flex flex-col items-center justify-center gap-y-6">
+      <div className="mt-2 flex flex-col items-center justify-center gap-y-6 flex-grow">
         <div className="w-full max-w-2xl space-y-6 text-center">
-          <h1 className="phonk text-2xl md:text-3xl font-bold tracking-wider">
+          <h1 className="phonk text-2xl font-bold tracking-wider md:text-3xl">
             Built by students for students
           </h1>
           <p className="text-base font-semibold">

src/components/Card.tsx

@@ -27,6 +27,12 @@ const Card = ({
     setChecked(isSelected);
   }, [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);
+  };
+
   function handleCheckboxChange() {
     setChecked(!checked);
     onSelect(paper, !checked);
@@ -92,9 +98,9 @@ const Card = ({
           <p className="text-sm">Select</p>
         </div>
         <div className="flex gap-2" onClick={handleOpen}>
-          <Eye size={20} />
+          <Eye size={20} className="cursor-pointer" />
           <button
-            onClick={() => downloadFile(paper.finalUrl, `${paper.subject}.jpg`)}
+            onClick={() => handleDownload(paper)}
           >
             <Download size={20} />
           </button>

src/components/CatalogueContent.tsx

@@ -57,8 +57,8 @@ const CatalogueContent = () => {
 
   async function downloadFile(url: string, filename: string) {
     try {
-      const response = await fetch(url, { method: "GET" });
-      const blob = await response.blob();
+      const response = await axios.get(url, { responseType: "blob" });
+      const blob = new Blob([response.data]);
       const link = document.createElement("a");
       link.href = window.URL.createObjectURL(blob);
       link.download = filename;

src/components/Footer.tsx

@@ -9,7 +9,7 @@ import x_twitter_icon_dark from "../assets/x_twitter_icon_dark.svg";
 
 export default function Footer() {
   return (
-    <div className="flex md:flex-row flex-col gap-y-12 max-w-7xl mx-auto items-center justify-between pt-12">
+    <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="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">
           Papers