From 8d56fbce2f319380b69d9e1da9d88c26164f7877 Mon Sep 17 00:00:00 2001
From: sirin <sirinza29@gmail.com>
Date: Thu, 3 Oct 2024 09:37:15 +0700
Subject: [PATCH] Add filter by tag to deals page

---
 src/app/deals/page.tsx            | 76 ++++++++++---------------------
 src/app/find/page.tsx             |  2 +-
 src/app/page.tsx                  | 52 +++++----------------
 src/components/extendableCard.tsx | 22 +++------
 4 files changed, 44 insertions(+), 108 deletions(-)

diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx
index 21678af..85a375b 100644
--- a/src/app/deals/page.tsx
+++ b/src/app/deals/page.tsx
@@ -1,18 +1,7 @@
 "use client";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { useState } from "react";
-import {
-  Clock3Icon,
-  MessageSquareIcon,
-  UserIcon,
-  UsersIcon,
-} from "lucide-react";
+import { Clock3Icon, MessageSquareIcon, UserIcon, UsersIcon } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
 import { ExtendableCard } from "@/components/extendableCard";
 
@@ -21,14 +10,14 @@ export default function Deals() {
   const [contentTypeFilter, setContentTypeFilter] = useState("");
   const [authorFilter, setAuthorFilter] = useState("");
   const [groupsFilter, setGroupFilter] = useState("");
+  const [selectedTag, setSelectedTag] = useState("");
   const data = [
     {
       name: "NVDA",
-      description:
-        "Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology",
+      description: "Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology",
       joinDate: "December 2021",
       location: "Bangkok, Thailand",
-      tags: null,
+      tags: ["AI", "Technology"],
       minInvestment: 10000,
       totalInvestor: 58400,
       totalRaised: 9000000,
@@ -39,7 +28,7 @@ export default function Deals() {
         "Founded in 1976, Apple Inc. is a leading innovator in consumer electronics, software, and online services, known for products like the iPhone, MacBook, and the App Store.",
       joinDate: "February 2020",
       location: "Cupertino, California, USA",
-      tags: null,
+      tags: ["Consumer Electronics", "Software"],
       minInvestment: 10000,
       totalInvestor: 58400,
       totalRaised: 9000000,
@@ -50,30 +39,31 @@ export default function Deals() {
         "Founded in 1998, Google LLC specializes in internet-related services and products, including search engines, online advertising, cloud computing, and the Android operating system.",
       joinDate: "April 2019",
       location: "Mountain View, California, USA",
-      tags: null,
+      tags: ["Internet", "Search Engine"],
       minInvestment: 10000,
       totalInvestor: 5000,
       totalRaised: 1500000000,
     },
     {
       name: "Microsoft Corporation",
-      description:
-        "Microsoft Corporation is a multinational technology company.",
+      description: "Microsoft Corporation is a multinational technology company.",
       joinDate: "January 2018",
       location: "California, USA",
-      tags: null,
+      tags: ["Technology", "Software"],
       minInvestment: 250,
       totalInvestor: 5000,
       totalRaised: 1500000,
     },
   ];
 
+  const filteredData = selectedTag ? data.filter((item) => item.tags.includes(selectedTag)) : data;
+
   return (
     <div>
       <div className=" w-1/2 h-[250px] mt-10 ml-[15%]">
-        <h1 className="text-4xl font-bold">Investment Opportunities </h1>
+        <h1 className="text-4xl font-bold">Investment Opportunities</h1>
         <br />
-        <p>Browse current investment opportunities on Republic. </p>
+        <p>Browse current investment opportunities on B2DVenture.</p>
         <p>
           All companies are <u>vetted & pass due diligence.</u>
         </p>
@@ -89,40 +79,22 @@ export default function Deals() {
               <SelectItem value="Yesterday">Yesterday</SelectItem>
             </SelectContent>
           </Select>
-          <Select onValueChange={(value) => setContentTypeFilter(value)}>
+          <Select onValueChange={(value) => setSelectedTag(value)}>
+            {" "}
+            {/* Tag filtering */}
             <SelectTrigger className="w-[180px]">
               <MessageSquareIcon className="ml-2" />
-              <SelectValue placeholder="Content type" />
+              <SelectValue placeholder="Tags" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="Blog">Blog</SelectItem>
-              <SelectItem value="Youtube">Youtube</SelectItem>
+              <SelectItem value="_">All Tags</SelectItem> {/* Reset filter */}
+              <SelectItem value="AI">AI</SelectItem>
+              <SelectItem value="Technology">Technology</SelectItem>
+              <SelectItem value="Consumer Electronics">Consumer Electronics</SelectItem>
+              <SelectItem value="Software">Software</SelectItem>
+              <SelectItem value="Internet">Internet</SelectItem>
             </SelectContent>
           </Select>
-          <Select onValueChange={(value) => setAuthorFilter(value)}>
-            <SelectTrigger className="w-[180px]">
-              <UserIcon className="ml-2" />
-              <SelectValue placeholder="Author" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="Me">Me</SelectItem>
-              <SelectItem value="Charlie Puth">Charlie Puth</SelectItem>
-            </SelectContent>
-          </Select>
-          <Select onValueChange={(value) => setGroupFilter(value)}>
-            <SelectTrigger className="w-[180px]">
-              <UsersIcon />
-              <SelectValue placeholder="Sent to groups" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="Group1">Group1</SelectItem>
-              <SelectItem value="Group2">Group2</SelectItem>
-            </SelectContent>
-          </Select>
-          {/* {postAtFilter}
-          {contentTypeFilter}
-          {authorFilter}
-          {groupsFilter} */}
         </div>
         <Separator className="mt-10" />
       </div>
@@ -133,7 +105,7 @@ export default function Deals() {
       </div>
       {/* block for all the deals */}
       <div className="ml-[15%] mt-10 grid grid-cols-3">
-        {data.map((item, index) => (
+        {filteredData.map((item, index) => (
           <ExtendableCard
             key={index}
             name={item.name}
diff --git a/src/app/find/page.tsx b/src/app/find/page.tsx
index ba616f6..97e2bc1 100644
--- a/src/app/find/page.tsx
+++ b/src/app/find/page.tsx
@@ -164,7 +164,7 @@ export default function Find() {
                         minInvestment={project.ProjectInvestmentDetail[0]?.minInvestment}
                         totalInvestor={project.ProjectInvestmentDetail[0]?.totalInvestment}
                         totalRaised={project.ProjectInvestmentDetail[0]?.targetInvestment}
-                        tags={null}
+                        tags={[]}
                       />
                     ))}
                   </CardContent>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1bfadfb..8650999 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,13 +1,7 @@
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { ExtendableCard } from "@/components/extendableCard";
 
@@ -17,13 +11,9 @@ export default function Home() {
       <div className="flex flex-row bg-slate-100 dark:bg-gray-800">
         <div className="flex flex-col w-3/5">
           <span className="px-10 md:px-28 py-10 md:py-20">
-            <p className="text-lg md:text-4xl font-bold">
-              Explore the world of ventures
-            </p>
+            <p className="text-lg md:text-4xl font-bold">Explore the world of ventures</p>
             <span className="text-sm md:text-lg">
-              <p>
-                Unlock opportunities and connect with a community of passionate
-              </p>
+              <p>Unlock opportunities and connect with a community of passionate</p>
               <p>investors and innovators.</p>
               <p>Together, we turn ideas into impact.</p>
             </span>
@@ -69,23 +59,11 @@ export default function Home() {
           </CardHeader>
           <CardContent className="flex gap-2">
             <Button className="flex gap-1 border-2 border-border rounded-md p-1 bg-background text-foreground scale-75 md:scale-100">
-              <Image
-                src={"/github.svg"}
-                width={20}
-                height={20}
-                alt="github"
-                className="scale-75 md:scale-100"
-              />
+              <Image src={"/github.svg"} width={20} height={20} alt="github" className="scale-75 md:scale-100" />
               Github
             </Button>
             <Button className="flex gap-1 border-2 border-border rounded-md p-1 bg-background text-foreground scale-75 md:scale-100">
-              <Image
-                src={"/github.svg"}
-                width={20}
-                height={20}
-                alt="github"
-                className="scale-75 md:scale-100"
-              />
+              <Image src={"/github.svg"} width={20} height={20} alt="github" className="scale-75 md:scale-100" />
               Github
             </Button>
           </CardContent>
@@ -97,20 +75,16 @@ export default function Home() {
       <div className="flex flex-col px-10 md:px-28">
         <span className="pb-5">
           <p className="text-xl md:text-2xl font-bold">Hottest Deals</p>
-          <p className="text-md md:text-lg">
-            The deals attracting the most interest right now
-          </p>
+          <p className="text-md md:text-lg">The deals attracting the most interest right now</p>
         </span>
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
           <Link href={"/invest"}>
             <ExtendableCard
               name={"NVDA"}
-              description={
-                "Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology"
-              }
+              description={"Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology"}
               joinDate={"December 2021"}
               location={"Bangkok, Thailand"}
-              tags={null}
+              tags={[]}
               minInvestment={10000}
               totalInvestor={58400}
               totalRaised={9000000}
@@ -123,7 +97,7 @@ export default function Home() {
             }
             joinDate={"February 2020"}
             location={"Cupertino, California, USA"}
-            tags={null}
+            tags={[]}
             minInvestment={10000}
             totalInvestor={58400}
             totalRaised={9000000}
@@ -135,19 +109,17 @@ export default function Home() {
             }
             joinDate={"April 2019"}
             location={"Mountain View, California, USA"}
-            tags={null}
+            tags={[]}
             minInvestment={10000}
             totalInvestor={5000}
             totalRaised={1500000000}
           />
           <ExtendableCard
             name={"Microsoft Corporation"}
-            description={
-              "Microsoft Corporation is a multinational technology company."
-            }
+            description={"Microsoft Corporation is a multinational technology company."}
             joinDate={"January 2018"}
             location={"California, USA"}
-            tags={null}
+            tags={[]}
             minInvestment={250}
             totalInvestor={5000}
             totalRaised={1500000}
diff --git a/src/components/extendableCard.tsx b/src/components/extendableCard.tsx
index 8f5df5e..fe85be5 100644
--- a/src/components/extendableCard.tsx
+++ b/src/components/extendableCard.tsx
@@ -11,7 +11,7 @@ interface ExtendableCardProps {
   description: string;
   joinDate: string;
   location: string;
-  tags: XMap | null;
+  tags: XMap | null | never[] | string[];
   minInvestment: number;
   totalInvestor: number;
   totalRaised: number;
@@ -46,11 +46,8 @@ export function ExtendableCard(props: ExtendableCardProps) {
           <span className="text-xs md:text-sm">{props.location}</span>
         </div>
         <div className="mt-2 flex flex-wrap items-center text-muted-foreground group-hover:hidden">
-          {["Technology", "Gaming"].map((tag) => (
-            <span
-              key={tag}
-              className="text-[10px] md:text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1"
-            >
+          {props.tags.map((tag) => (
+            <span key={tag} className="text-[10px] md:text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1">
               {tag}
             </span>
           ))}
@@ -58,26 +55,21 @@ export function ExtendableCard(props: ExtendableCardProps) {
 
         {/* Hover content (appears when hovered) */}
         <div className="mt-4 max-h-0 overflow-hidden opacity-0 group-hover:max-h-[500px] group-hover:opacity-100 transition-all duration-1000 ease-in-out">
-          <p className="text-xs md:text-sm text-muted-foreground">
-            {props.description}
-          </p>
+          <p className="text-xs md:text-sm text-muted-foreground">{props.description}</p>
           <div className="mt-4 flex items-center justify-between">
             <div className="flex items-center space-x-2">
               <div>
                 <hr className="w-screen -ml-4 mb-2" />
                 <p className="text-xs md:text-base">
-                  <strong>${props.totalRaised.toLocaleString()}</strong>{" "}
-                  committed and reserved
+                  <strong>${props.totalRaised.toLocaleString()}</strong> committed and reserved
                 </p>
                 <hr className="w-screen -ml-4 mb-2 mt-2" />
                 <p className="mb-2 text-xs md:text-base">
-                  <strong>{props.totalInvestor.toLocaleString()}</strong>{" "}
-                  investors
+                  <strong>{props.totalInvestor.toLocaleString()}</strong> investors
                 </p>
                 <hr className="w-screen -ml-4 mb-2" />
                 <p className="text-xs md:text-base">
-                  <strong>${props.minInvestment.toLocaleString()}</strong> min.
-                  investment
+                  <strong>${props.minInvestment.toLocaleString()}</strong> min. investment
                 </p>
               </div>
             </div>