From 17b88407deead9d33dda2cc886de91ef9adce52e Mon Sep 17 00:00:00 2001
From: "EPAM\\Sanket_Joshi" <sanket_joshi@epam.com>
Date: Wed, 25 Sep 2024 19:44:50 +0530
Subject: [PATCH] Adding dowloaded data

---
 components/ui/Business/ResumeDownloader.tsx | 28 +++++++++++++++++----
 hooks/use-file-download.ts                  | 14 ++++++++++-
 pages/index.tsx                             |  2 +-
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/components/ui/Business/ResumeDownloader.tsx b/components/ui/Business/ResumeDownloader.tsx
index c9746ce..4ac8a5f 100644
--- a/components/ui/Business/ResumeDownloader.tsx
+++ b/components/ui/Business/ResumeDownloader.tsx
@@ -1,8 +1,17 @@
 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">
@@ -10,17 +19,26 @@ export const ResumeDownloader = () => {
         <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>
diff --git a/hooks/use-file-download.ts b/hooks/use-file-download.ts
index 259507f..04171da 100644
--- a/hooks/use-file-download.ts
+++ b/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];
 }
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
index 819eb4e..daf37d3 100644
--- a/pages/index.tsx
+++ b/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>