From 7535afef67b2bfacd01c5259b6e5d10636b2b953 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Mon, 4 Nov 2024 11:09:33 +0700
Subject: [PATCH] Refactor ProjectSection and Invest components for improved
 type safety and formatting

---
 src/app/(investment)/deals/page.tsx | 17 +++++++-
 src/app/overview/page.tsx           | 68 ++++++++++++++++++++++++-----
 src/app/portfolio/[uid]/page.tsx    |  2 +-
 3 files changed, 73 insertions(+), 14 deletions(-)

diff --git a/src/app/(investment)/deals/page.tsx b/src/app/(investment)/deals/page.tsx
index 799cad4..ba8d94d 100644
--- a/src/app/(investment)/deals/page.tsx
+++ b/src/app/(investment)/deals/page.tsx
@@ -13,7 +13,20 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 
-const ProjectSection = ({ filteredProjects }) => {
+interface Project {
+  project_id: string;
+  project_name: string;
+  project_short_description: string;
+  published_time: string;
+  card_image_url: string;
+  business_location: string;
+  min_investment: number;
+  total_investment: number;
+  target_investment: number;
+  tags: { tag_name: string }[];
+}
+
+const ProjectSection = ({ filteredProjects }: { filteredProjects: Project[] }) => {
   interface Tags {
     tag_name: string;
   }
@@ -266,7 +279,7 @@ export default function Deals() {
         <Separator className="mt-10" />
 
         {/* Project Cards Section */}
-        <ProjectSection filteredProjects={projects} />
+        <ProjectSection filteredProjects={projects || []} />
       </div>
     </div>
   );
diff --git a/src/app/overview/page.tsx b/src/app/overview/page.tsx
index cd07319..afc6732 100644
--- a/src/app/overview/page.tsx
+++ b/src/app/overview/page.tsx
@@ -64,7 +64,13 @@ export default function Invest() {
           {/* Name, star and share button packed */}
           <div className="grid grid-cols-4">
             <div className="flex col-span-2">
-              <Image src="./logo.svg" alt="logo" width={50} height={50} className="sm:scale-75" />
+              <Image
+                src="./logo.svg"
+                alt="logo"
+                width={50}
+                height={50}
+                className="sm:scale-75"
+              />
               <div className="mt-3 font-bold  text-lg md:text-3xl">NVIDIA</div>
             </div>
             <div className="grid grid-cols-2 gap-5 justify-self-end ">
@@ -72,7 +78,11 @@ export default function Invest() {
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <StarIcon id="follow" fill={isFollow ? "#FFFF00" : "#fff"} strokeWidth={2} />
+                      <StarIcon
+                        id="follow"
+                        fill={isFollow ? "#FFFF00" : "#fff"}
+                        strokeWidth={2}
+                      />
                     </TooltipTrigger>
                     <TooltipContent>
                       <p>Follow NIVIDIA</p>
@@ -86,10 +96,16 @@ export default function Invest() {
             </div>
           </div>
           {/* end of pack */}
-          <p className="mt-2 sm:text-sm"> World's first non-metal sustainable battery</p>
+          <p className="mt-2 sm:text-sm">
+            {" "}
+            World&apos;s first non-metal sustainable battery
+          </p>
           <div className="flex flex-wrap mt-3">
             {["Technology", "Gaming"].map((tag) => (
-              <span key={tag} className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1">
+              <span
+                key={tag}
+                className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1"
+              >
                 {tag}
               </span>
             ))}
@@ -101,7 +117,11 @@ export default function Invest() {
                 <CarouselContent className="h-[400px] flex h-full">
                   {Array.from({ length: 5 }).map((_, index) => (
                     <CarouselItem key={index}>
-                      <img src="./boiler1.jpg" alt="" className="rounded-lg self-center" />
+                      <img
+                        src="./boiler1.jpg"
+                        alt=""
+                        className="rounded-lg self-center"
+                      />
                     </CarouselItem>
                   ))}
                 </CarouselContent>{" "}
@@ -132,19 +152,36 @@ export default function Invest() {
             <div className=" w-2/3 mt-4  m-auto grid-rows-5">
               <div className="pl-5">
                 <h1 className="font-semibold text-xl md:text-4xl mt-8">
-                  <CountUp start={0} end={100000} duration={2} prefix="$" className="" />
+                  <CountUp
+                    start={0}
+                    end={100000}
+                    duration={2}
+                    prefix="$"
+                    className=""
+                  />
                 </h1>
                 <p className="text-sm md:text-lg"> 5% raised of $5M max goal</p>
                 <Progress value={progress} className="w-[60%] h-3 mt-3" />
                 <h1 className="font-semibold text-4xl md:mt-8">
                   {" "}
-                  <CountUp start={0} end={1000} duration={2} className="text-xl md:text-4xl" />
+                  <CountUp
+                    start={0}
+                    end={1000}
+                    duration={2}
+                    className="text-xl md:text-4xl"
+                  />
                 </h1>
                 <p className="text-sm md:text-lg"> Investors</p>
               </div>
               <Separator decorative className="mt-3 w-3/4 ml-5" />
               <h1 className="font-semibold text-xl md:text-4xl mt-8 ml-5">
-                <CountUp start={0} end={5800} duration={2} className="text-xl md:text-4xl" /> hours
+                <CountUp
+                  start={0}
+                  end={5800}
+                  duration={2}
+                  className="text-xl md:text-4xl"
+                />{" "}
+                hours
               </h1>
               <p className="ml-5"> Left to invest</p>
               <Button className="mt-5 md:mt-10 ml-0 md:ml-[25%] scale-75 md:scale-100">
@@ -158,17 +195,26 @@ export default function Invest() {
       <div className="flex w-[90%] mt-24 m-auto ml-10 md:ml-32">
         <ul className="list-none flex gap-10 text-lg md:text-xl ">
           <li>
-            <a onClick={() => handleClick("Pitch")} className={tab === "Pitch" ? "text-blue-600" : ""}>
+            <a
+              onClick={() => handleClick("Pitch")}
+              className={tab === "Pitch" ? "text-blue-600" : ""}
+            >
               Pitch
             </a>
           </li>
           <li>
-            <a onClick={() => handleClick("General Data")} className={tab === "General Data" ? "text-blue-600" : ""}>
+            <a
+              onClick={() => handleClick("General Data")}
+              className={tab === "General Data" ? "text-blue-600" : ""}
+            >
               General Data
             </a>
           </li>
           <li>
-            <a onClick={() => handleClick("Updates")} className={tab === "Updates" ? "text-blue-600" : ""}>
+            <a
+              onClick={() => handleClick("Updates")}
+              className={tab === "Updates" ? "text-blue-600" : ""}
+            >
               Updates
             </a>
           </li>
diff --git a/src/app/portfolio/[uid]/page.tsx b/src/app/portfolio/[uid]/page.tsx
index 825730f..3cdc730 100644
--- a/src/app/portfolio/[uid]/page.tsx
+++ b/src/app/portfolio/[uid]/page.tsx
@@ -107,7 +107,7 @@ export default async function Portfolio({
           Welcome to your Portfolio, {username}!
         </h1>
         <p className="text-lg text-muted-foreground">
-          Here's an overview of your investment journey and progress.
+          Here&lsquo;s an overview of your investment journey and progress.
         </p>
         <p className="text-xl font-medium text-green-400">
           Total Investment: $