Adding dowloaded data

components/ui/Business/ResumeDownloader.tsx

@@ -1,26 +1,44 @@
 import { useTranslation } from "react-i18next";
 import { DownloadIcon, FileTextIcon } from "@radix-ui/react-icons";
+import { useFileDownload } from "@/hooks/use-file-download";
+import { useEffect } from "react";
 
 export const ResumeDownloader = () => {
   const { t } = useTranslation("home");
+  const [downloadFile] = useFileDownload(
+    "https://drive.google.com/uc?export=download&id=1uzadlIy4kqjwy6wsZcQdWBUyiBIXvlkQ"
+  );
+
+  useEffect(() => {
+    downloadFile();
+  }, [downloadFile]);
 
   return (
     <section className="flex flex-col mt-10">
       <div className="flex items-center justify-start">
         <h2 className="text-xl font-bold ">{t("resumeCallTitle")}</h2>
       </div>
 
-      <div className="flex gap-4 mt-2">
+      <div className="flex justify-between items-center">
         <p className="max-w-md font-light text-muted-foreground">
           {t("resumeCallBody")}
         </p>
         <div className="flex flex-col justify-start items-center gap-2 m-3">
-          <FileTextIcon className="size-10 cursor-pointer hover:text-blue-600 dark:hover:text-blue-300 dark:text-orange-300"></FileTextIcon>
-          <div className="flex gap-2">
-            <span className="text-sm text-muted-foreground">
+          <FileTextIcon
+            onClick={downloadFile}
+            className="size-12 cursor-pointer hover:text-blue-600 dark:hover:text-blue-300 dark:text-orange-300"
+          ></FileTextIcon>
+          <div className="flex items-center gap-2">
+            <span
+              onClick={downloadFile}
+              className="text-sm cursor-pointer text-muted-foreground  hover:text-blue-600 dark:hover:text-blue-300"
+            >
               Sanket_FE_JS.docx
             </span>
-            <DownloadIcon className="size-5 cursor-pointer hover:text-blue-600 dark:hover:text-blue-300 dark:text-orange-300"></DownloadIcon>
+            <DownloadIcon
+              onClick={downloadFile}
+              className="size-4 cursor-pointer hover:text-blue-600 dark:hover:text-blue-300 dark:text-orange-300"
+            ></DownloadIcon>
           </div>
         </div>
       </div>

hooks/use-file-download.ts

@@ -1,3 +1,15 @@
-export const useFileDownload = () => {
+import { useCallback } from "react"
 
+export const useFileDownload = (url: string): [() => void] => {
+  const downloadFile = useCallback(async () => {
+    const fileUrl = url;
+    const a = document.createElement("a");
+    a.href = fileUrl;
+    a.download = "Sanket_FE_JS.pdf"; // Optional, set a custom file name
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }, [url])
+
+  return [downloadFile];
 }

pages/index.tsx

@@ -17,8 +17,8 @@ export default function Page({ recentPosts }: PageProps) {
     <div className="container max-w-3xl">
       <section>
         <Introduction></Introduction>
-        <SkillMetric></SkillMetric>
         <ResumeDownloader></ResumeDownloader>
+        <SkillMetric></SkillMetric>
         <RecentPosts list={recentPosts}></RecentPosts>
       </section>
     </div>