refactor: use ProjectSection component

src/app/find/ProjectSection.tsx

@@ -1,57 +0,0 @@
-import React from "react";
-import { ProjectCard } from "@/components/projectCard";
-import { Separator } from "@/components/ui/separator";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { ProjectCardProps } from "@/types/ProjectCard";
-import Link from "next/link";
-
-export function ProjectSection({ projectsData }: { projectsData: ProjectCardProps[] | null }) {
-  if (!projectsData || projectsData.length === 0) {
-    return (
-      <Card className="text-center">
-        <CardHeader>
-          <CardTitle>No Project Found</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p>Sorry, we could not find any projects matching your search criteria.</p>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      <div id="project-card">
-        <Card>
-          <CardHeader>
-            <CardTitle>Projects</CardTitle>
-            <CardDescription>Found {projectsData.length} projects!</CardDescription>
-          </CardHeader>
-          <Separator className="my-3" />
-          <CardContent>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-              {projectsData.map((project) => (
-                <div key={project.id}>
-                  <Link href={`/deals/${project.id}`}>
-                    <ProjectCard
-                      name={project.project_name}
-                      description={project.short_description}
-                      imageUri={project.image_url}
-                      joinDate={new Date(project.join_date).toLocaleDateString()}
-                      location={project.location}
-                      tags={project.tags}
-                      minInvestment={project.min_investment}
-                      totalInvestor={project.total_investor}
-                      totalRaised={project.total_raise}
-                    />
-                  </Link>
-                  <Separator />
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}

src/app/find/page.tsx

@@ -2,9 +2,10 @@ import React, { Suspense } from "react";
 import { getBusinessByName } from "@/lib/data/businessQuery";
 import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
 import { BusinessSection } from "./BusinessSection";
-import { ProjectSection } from "./ProjectSection";
+import { ProjectSection } from "@/components/ProjectSection";
 import { getProjectCardData } from "@/lib/data/projectQuery";
 import { Separator } from "@/components/ui/separator";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 
 export default async function FindContent({ searchParams }: { searchParams: { query: string } }) {
   const query = searchParams.query;
@@ -36,7 +37,20 @@ export default async function FindContent({ searchParams }: { searchParams: { qu
       </Suspense>
       <Separator className="my-3" />
       <Suspense fallback={<div>Loading Projects...</div>}>
-        <ProjectSection projectsData={projectsData} />
+        <div className="space-y-6">
+          <div id="project-card">
+            <Card>
+              <CardHeader>
+                <CardTitle>Projects</CardTitle>
+                <CardDescription>Found {projectsData?.length ?? 0} projects!</CardDescription>
+              </CardHeader>
+              <Separator className="my-3" />
+              <CardContent>
+                <ProjectSection projectsData={projectsData} />
+              </CardContent>
+            </Card>
+          </div>
+        </div>
       </Suspense>
     </div>
   );

src/app/page.tsx

@@ -9,6 +9,7 @@ import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
 import { Suspense } from "react";
 import { FC } from "react";
 import { ProjectCardProps } from "@/types/ProjectCard";
+import { ProjectSection } from "@/components/ProjectSection";
 
 interface TopProjectsProps {
   projects: ProjectCardProps[] | null;
@@ -134,7 +135,7 @@ export default async function Home() {
             </div>
           ) : (
             <Suspense fallback={<ProjectsLoader />}>
-              <TopProjects projects={topProjectsData} />
+              <ProjectSection projectsData={topProjectsData} />
             </Suspense>
           )}
           <div className="self-center py-5 scale-75 md:scale-100">

src/components/ProjectSection.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { ProjectCard } from "@/components/projectCard";
+import { Separator } from "@/components/ui/separator";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { ProjectCardProps } from "@/types/ProjectCard";
+import Link from "next/link";
+
+export function ProjectSection({ projectsData }: { projectsData: ProjectCardProps[] | null }) {
+  if (!projectsData || projectsData.length === 0) {
+    return (
+      <Card className="text-center">
+        <CardHeader>
+          <CardTitle>No Project Found</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p>Sorry, we could not find any projects.</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-4 gap-6">
+      {projectsData.map((project) => (
+        <div key={project.id}>
+          <Link href={`/deals/${project.id}`}>
+            <ProjectCard
+              name={project.project_name}
+              description={project.short_description}
+              imageUri={project.image_url}
+              joinDate={new Date(project.join_date).toLocaleDateString()}
+              location={project.location}
+              tags={project.tags}
+              minInvestment={project.min_investment}
+              totalInvestor={project.total_investor}
+              totalRaised={project.total_raise}
+            />
+          </Link>
+          <Separator />
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/projectCard.tsx

@@ -3,6 +3,7 @@
 import { CalendarDaysIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
+import { Separator } from "./ui/separator";
 
 interface XMap {
   [tag: string]: string;
@@ -13,7 +14,7 @@ interface ProjectCardProps {
   description: string;
   joinDate: string;
   location: string;
-  tags: XMap | null | never[] | string[];
+  tags?: XMap | null | never[] | string[];
   imageUri: string | null;
   minInvestment: number;
   totalInvestor: number;
@@ -22,18 +23,6 @@ interface ProjectCardProps {
 }
 
 export function ProjectCard(props: ProjectCardProps) {
-  if (props.minInvestment === null) {
-    props.minInvestment = 0;
-  }
-
-  if (props.totalInvestor === null) {
-    props.minInvestment = 0;
-  }
-
-  if (props.totalRaised === null) {
-    props.minInvestment = 0;
-  }
-
   return (
     <div
       className={cn(
@@ -98,18 +87,32 @@ export function ProjectCard(props: ProjectCardProps) {
           {/* Info 2 */}
           <div className="hidden group-hover:flex group-hover:absolute group-hover:bottom-4 p-4 ">
             {/* Info 2 (Visible on hover) */}
-            <div className="transition-transform duration-500 transform translate-y-6 opacity-0 group-hover:translate-y-0 group-hover:opacity-100">
+            <div className="transition-transform duration-500 transform translate-y-6 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 w-full">
-              <hr className="-ml-4 mb-2" />
+              <Separator className="-ml-4 mb-2" />
               <p className="text-base">
-                <strong>${props.totalRaised.toLocaleString()}</strong> committed and reserved
+                <strong>
+                  ${isNaN(props.totalRaised) || props.totalRaised == null ? "N/A" : props.totalRaised.toLocaleString()}
+                </strong>{" "}
+                committed and reserved
               </p>
-              <hr className="-ml-4 mb-2 mt-2" />
+              <Separator className="-ml-4 mb-2 mt-2" />
               <p className="mb-2 text-base">
-                <strong>{props.totalInvestor.toLocaleString()}</strong> investors
+                <strong>
+                  {isNaN(props.totalInvestor) || props.totalInvestor == null
+                    ? "N/A "
+                    : props.totalInvestor.toLocaleString()}
+                </strong>{" "}
+                investors
               </p>
-              <hr className="-ml-4 mb-2" />
+              <Separator className="-ml-4 mb-2" />
               <p className="text-base">
-                <strong>${props.minInvestment.toLocaleString()}</strong> min. investment
+                <strong>
+                  $
+                  {isNaN(props.minInvestment) || props.minInvestment == null
+                    ? "N/A"
+                    : props.minInvestment.toLocaleString()}
+                </strong>{" "}
+                min. investment
               </p>
             </div>
           </div>

src/types/ProjectCard.ts

@@ -5,7 +5,7 @@ export interface ProjectCardProps {
   image_url: string;
   join_date: string;
   location: string;
-  tags: string[] | null;
+  tags?: string[] | null;
   min_investment: number;
   total_investor: number;
   total_raise: number;