finish implementing vote card with mock data

next.config.js

@@ -5,6 +5,10 @@ const nextConfig = {
             {
                 protocol: "https",
                 hostname: "png.pngtree.com"
+            },
+            {
+                protocol: "https",
+                hostname: "encrypted-tbn0.gstatic.com"
             }
         ]
     }

src/app/ideation/components/ContributionCard.tsx

@@ -9,7 +9,10 @@ function ContributionCard() {
         </h1>
         <Avatar width={64} height={64} />
         <h2 className="text-xl font-semibold text-neutral-focus">Test User</h2>
-        <Button title="Vote" customClassName="w-full bg-base-content text-neutral-focus border-primary">
+        <Button
+          title="Vote"
+          customClassName="w-full bg-base-content text-neutral-focus border-primary"
+        >
           Vote
         </Button>
       </section>

src/app/ideation/components/IdeationContainer.tsx

@@ -1,38 +1,30 @@
-import { ContributionCard, VoteCard } from ".";
+import { ContributionCard, VoteCard, type Ideation } from ".";
 
-function IdeationContainer() {
+function IdeationContainer({
+  title,
+  project_idea,
+  vision_statement,
+  users,
+  voted,
+  own_idea,
+  contributed_by,
+}: Ideation) {
   return (
     <div className="card w-[1280px] h-[457px] bg-primary-content text-neutral-content flex flex-row items-start p-10 gap-x-20">
-      <VoteCard />
+      <VoteCard users={users} voted={voted} />
       <section className="card-body gap-y-7 p-0 w-[1000px] h-[377px] overflow-y-auto pr-5">
-        <h2 className="text-xl font-semibold text-neutral-focus">
-          Real Estate Crowdsourcing
-        </h2>
+        <h2 className="text-xl font-semibold text-neutral-focus">{title}</h2>
         <h3 className="text-base text-neutral-focus font-semibold">
           Project Idea
         </h3>
         <p className="text-base text-neutral-focus font-medium">
-          A real estate crowdsourcing application is a platform that allows
-          individuals to invest in real estate properties without needing to
-          purchase entire properties themselves. Through the application,
-          investors can pool their money together to fund a real estate project,
-          and then receive a portion of the profits once the project is
-          complete. The platform typically offers a range of real estate
-          projects for investors to choose from, and provides tools to help
-          investors track their investments and receive regular updates on the
-          progress of each project.
+          {project_idea}
         </p>
         <h3 className="text-base text-neutral-focus font-semibold">
           Vision Statement
         </h3>
         <p className="text-base text-neutral-focus font-medium">
-          Our vision is to democratize real estate investment by creating an
-          inclusive platform that enables everyone to invest in real estate
-          projects, regardless of their financial status. We strive to provide a
-          seamless experience for our users by offering a wide range of
-          investment options and easy-to-use tools to monitor their investments.
-          Our goal is to empower individuals to take control of their financial
-          future and build wealth through real estate investments.
+          {vision_statement}
         </p>
       </section>
       <ContributionCard />

src/app/ideation/components/VoteCard.tsx

@@ -1,16 +1,25 @@
 import { Avatar, Button } from "@/components";
 
-function VoteCard() {
+interface VoteCardProps {
+  users: string[];
+  voted: boolean;
+}
+
+function VoteCard({ users, voted }: VoteCardProps) {
   return (
     <div className="card w-1/3 h-fit bg-base-content rounded-lg">
       <section className="flex flex-col items-start p-4 gap-y-4">
-        <h1 className="text-3xl font-semibold text-neutral-focus">4</h1>
+        <h1 className="text-3xl font-semibold text-neutral-focus">
+          {users.length}
+        </h1>
         <h2 className="text-xl font-semibold text-neutral-focus">Votes</h2>
-
-        <Avatar width={24} height={24} />
-
-        <Button title="Vote" customClassName="w-full bg-primary">
-          Vote
+        <div className="avatar-group -space-x-2 w-full">
+          {users.map((user) => (
+            <Avatar width={24} height={24} key={user} />
+          ))}
+        </div>
+        <Button title="Vote" customClassName="w-full bg-primary hover:bg-primary-focus disabled:bg-primary-focus disabled:text-base-content" disabled={voted}>
+          {voted ? "Voted" : "Vote"}
         </Button>
       </section>
     </div>

src/app/ideation/components/fixtures/ideation.ts

@@ -0,0 +1,62 @@
+export interface Ideation {
+  id?: number;
+  title: string;
+  project_idea: string;
+  vision_statement: string;
+  users: string[];
+  contributed_by: {
+    name: string;
+    avatar?: string;
+  };
+  voted: boolean;
+  own_idea: boolean;
+}
+
+export const ideation = [
+  {
+    id: 1,
+    title: "Real Estate Crowdsourcing",
+    project_idea: `A real estate crowdsourcing application is a platform that allows
+          individuals to invest in real estate properties without needing to
+          purchase entire properties themselves. Through the application,
+          investors can pool their money together to fund a real estate project,
+          and then receive a portion of the profits once the project is
+          complete. The platform typically offers a range of real estate
+          projects for investors to choose from, and provides tools to help
+          investors track their investments and receive regular updates on the
+          progress of each project.`,
+    vision_statement: `Our vision is to democratize real estate investment by creating an
+          inclusive platform that enables everyone to invest in real estate
+          projects, regardless of their financial status. We strive to provide a
+          seamless experience for our users by offering a wide range of
+          investment options and easy-to-use tools to monitor their investments.
+          Our goal is to empower individuals to take control of their financial
+          future and build wealth through real estate investments.`,
+    users: ["Test User 1", "Test User 2", "Test User 3"],
+    contributed_by: {
+      name: "Test User 1",
+      avatar:
+        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQm3RFDZM21teuCMFYx_AROjt-AzUwDBROFww&usqp=CAU",
+    },
+    voted: true,
+    own_idea: true,
+  },
+  {
+    id: 2,
+    title: "Toys Exchange App",
+    project_idea: `A toy exchange app is an online platform where users can trade or swap toys with each other. The app 
+      may include features like listing available toys for trade, searching for specific toys, messaging with 
+      other users to arrange exchanges, and rating the reliability of other users. This type of app can be a great 
+      way for families to save money by swapping gently used toys instead of buying new ones.`,
+    vision_statement: `Our vision for a toy exchange app is an online platform where users can trade or swap toys 
+    with each other. The app may include features like listing available toys for trade, searching for specific toys, 
+    messaging with other users to arrange exchanges, and rating the reliability of other users. This type of app can be a 
+    great way for families to save money by swapping gently used toys instead of buying new ones.`,
+    users: ["Test User 1", "Test User 2"],
+    contributed_by: {
+      name: "Test User 2",
+    },
+    voted: false,
+    own_idea: false,
+  },
+];

src/app/ideation/components/index.ts

@@ -3,3 +3,4 @@ export { default as IdeationContainer } from "./IdeationContainer";
 export { default as VoteDescriptionCard } from "./VoteDescriptionCard";
 export { default as VoteCard } from "./VoteCard";
 export { default as ContributionCard } from "./ContributionCard";
+export { ideation, type Ideation } from "./fixtures/ideation";

src/app/ideation/page.tsx

@@ -1,11 +1,26 @@
-import { CreateIdeationContainer, IdeationContainer } from "./components";
+import {
+  CreateIdeationContainer,
+  IdeationContainer,
+  ideation,
+} from "./components";
 
 function IdeationPage() {
   return (
     <div className="flex flex-row justify-center">
-      <div className="flex flex-col gap-y-9">
+      <div className="flex flex-col gap-y-9 p-3">
         <CreateIdeationContainer />
-        <IdeationContainer />
+        {ideation.map((i) => (
+          <IdeationContainer
+            key={i.id}
+            title={i.title}
+            project_idea={i.project_idea}
+            vision_statement={i.vision_statement}
+            users={i.users}
+            voted={i.voted}
+            own_idea={i.own_idea}
+            contributed_by={i.contributed_by}
+          />
+        ))}
       </div>
     </div>
   );

src/components/Button.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-interface ButtonProps {
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   title: string;
   children: ReactNode;
   customClassName?: string;
@@ -10,12 +10,14 @@ export default function Button({
   title,
   children,
   customClassName,
+  ...attributes
 }: ButtonProps) {
   return (
     <button
       type="button"
       className={`btn grid grid-cols-[auto,auto] gap-x-1 ${customClassName}`}
       aria-label={`${title}`}
+      {...attributes}
     >
       {children}
     </button>