From 78bf92d9379073b220bf4b7b4d0dd2b0886ea2e9 Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Thu, 31 Aug 2023 16:06:24 -0400
Subject: [PATCH 01/17] fix hot reload in docker

---
 docker-compose.yml | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docker-compose.yml b/docker-compose.yml
index fbbcc4e4..4560cd1c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -11,6 +11,11 @@ services:
       - 5555:5555
     depends_on:
       - db
+    environment:
+      - WATCHPACK_POLLING=true
+    volumes:
+      - .:/usr/src/app
+      - /usr/src/app/node_modules
   db:
     container_name: db
     image: postgres:latest

From 327697fb46b6bc5b7125f1f5f341e493bd19df4e Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Mon, 4 Sep 2023 21:43:21 -0400
Subject: [PATCH 02/17] vote description card

---
 .../ideation/components/CreateIdeationContainer.tsx | 13 +++++++++++++
 src/app/ideation/components/VoteDescriptionCard.tsx | 12 ++++++++++++
 src/app/ideation/components/index.ts                |  2 ++
 src/app/ideation/index.ts                           |  0
 src/app/ideation/page.tsx                           | 11 +++++++++++
 src/app/layout.tsx                                  |  3 +--
 6 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/app/ideation/components/CreateIdeationContainer.tsx
 create mode 100644 src/app/ideation/components/VoteDescriptionCard.tsx
 create mode 100644 src/app/ideation/components/index.ts
 create mode 100644 src/app/ideation/index.ts
 create mode 100644 src/app/ideation/page.tsx

diff --git a/src/app/ideation/components/CreateIdeationContainer.tsx b/src/app/ideation/components/CreateIdeationContainer.tsx
new file mode 100644
index 00000000..c99557d8
--- /dev/null
+++ b/src/app/ideation/components/CreateIdeationContainer.tsx
@@ -0,0 +1,13 @@
+import { VoteDescriptionCard } from ".";
+
+function CreateIdeationContainer() {
+  return (
+    <div className="card w-[1280px] h-[190px] bg-base-100 text-neutral-content flex flex-row items-center">
+      <div className="card-body items-center text-center">
+        <VoteDescriptionCard />
+      </div>
+    </div>
+  );
+}
+
+export default CreateIdeationContainer;
diff --git a/src/app/ideation/components/VoteDescriptionCard.tsx b/src/app/ideation/components/VoteDescriptionCard.tsx
new file mode 100644
index 00000000..56e11bf9
--- /dev/null
+++ b/src/app/ideation/components/VoteDescriptionCard.tsx
@@ -0,0 +1,12 @@
+function VoteDescriptionCard() {
+  return (
+    <div className="card w-1/4 h-32 bg-base-content text-neutral-focus rounded-lg">
+      <div className="flex flex-col items-start p-4 gap-y-4">
+        <h2 className="text-xl font-semibold">Votes</h2>
+        <div className="text-base font-medium text-neutral text-left">Vote for the projects you are interested in.</div>
+      </div>
+    </div>
+  );
+}
+
+export default VoteDescriptionCard;
diff --git a/src/app/ideation/components/index.ts b/src/app/ideation/components/index.ts
new file mode 100644
index 00000000..26db8003
--- /dev/null
+++ b/src/app/ideation/components/index.ts
@@ -0,0 +1,2 @@
+export { default as CreateIdeationContainer } from "./CreateIdeationContainer";
+export { default as VoteDescriptionCard } from "./VoteDescriptionCard";
diff --git a/src/app/ideation/index.ts b/src/app/ideation/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/ideation/page.tsx b/src/app/ideation/page.tsx
new file mode 100644
index 00000000..b3ce0121
--- /dev/null
+++ b/src/app/ideation/page.tsx
@@ -0,0 +1,11 @@
+import { CreateIdeationContainer } from "./components";
+
+function IdeationPage() {
+  return (
+    <div className="flex flex-row justify-center">
+      <CreateIdeationContainer />
+    </div>
+  );
+}
+
+export default IdeationPage;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c0cca4d2..e6fe0c97 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -9,7 +9,6 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
-
 // If loading a variable font, you don't need to specify the font weight
 const inter = Inter({
   weight: ["400", "500", "600", "700"],
@@ -23,7 +22,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={inter.className}>
+    <html lang="en" className={`${inter.className} bg-base-content`}>
       <body>
         <nav>
           <BellIcon className="h-12 w-12 text-primary" />

From fdc1beab5ccc13407a5cb2fb3e4aa45cbaadddaa Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Mon, 4 Sep 2023 21:54:36 -0400
Subject: [PATCH 03/17] vote description

---
 src/app/ideation/components/CreateIdeationContainer.tsx | 4 +++-
 src/app/ideation/components/VoteDescriptionCard.tsx     | 8 +++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/ideation/components/CreateIdeationContainer.tsx b/src/app/ideation/components/CreateIdeationContainer.tsx
index c99557d8..d222a48b 100644
--- a/src/app/ideation/components/CreateIdeationContainer.tsx
+++ b/src/app/ideation/components/CreateIdeationContainer.tsx
@@ -3,8 +3,10 @@ import { VoteDescriptionCard } from ".";
 function CreateIdeationContainer() {
   return (
     <div className="card w-[1280px] h-[190px] bg-base-100 text-neutral-content flex flex-row items-center">
-      <div className="card-body items-center text-center">
         <VoteDescriptionCard />
+      <div className="card-body gap-y-7">
+        <h2 className="text-xl font-semibold text-neutral-focus">What is your Voyage project idea & vision?</h2>
+        <p className="text-base font-medium text-neutral">We value your ideas! Share your ideas on what our project should be. Describe your vision to capture what it does and the benefit it will bring to users.</p>
       </div>
     </div>
   );
diff --git a/src/app/ideation/components/VoteDescriptionCard.tsx b/src/app/ideation/components/VoteDescriptionCard.tsx
index 56e11bf9..db644d1e 100644
--- a/src/app/ideation/components/VoteDescriptionCard.tsx
+++ b/src/app/ideation/components/VoteDescriptionCard.tsx
@@ -1,9 +1,11 @@
 function VoteDescriptionCard() {
   return (
-    <div className="card w-1/4 h-32 bg-base-content text-neutral-focus rounded-lg">
+    <div className="card w-1/4 h-32 bg-base-content rounded-lg ml-10">
       <div className="flex flex-col items-start p-4 gap-y-4">
-        <h2 className="text-xl font-semibold">Votes</h2>
-        <div className="text-base font-medium text-neutral text-left">Vote for the projects you are interested in.</div>
+        <h2 className="text-xl font-semibold text-neutral-focus">Votes</h2>
+        <div className="text-base font-medium text-neutral text-left">
+          Vote for the projects you are interested in.
+        </div>
       </div>
     </div>
   );

From a1810c5dc5ee877d7e6773d324ad6b892c20f004 Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Mon, 4 Sep 2023 22:11:47 -0400
Subject: [PATCH 04/17] add button placeholder

---
 .../components/CreateIdeationContainer.tsx    | 19 ++++++++++++++-----
 .../components/VoteDescriptionCard.tsx        |  2 +-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/app/ideation/components/CreateIdeationContainer.tsx b/src/app/ideation/components/CreateIdeationContainer.tsx
index d222a48b..fa61fc67 100644
--- a/src/app/ideation/components/CreateIdeationContainer.tsx
+++ b/src/app/ideation/components/CreateIdeationContainer.tsx
@@ -2,12 +2,21 @@ import { VoteDescriptionCard } from ".";
 
 function CreateIdeationContainer() {
   return (
-    <div className="card w-[1280px] h-[190px] bg-base-100 text-neutral-content flex flex-row items-center">
-        <VoteDescriptionCard />
-      <div className="card-body gap-y-7">
-        <h2 className="text-xl font-semibold text-neutral-focus">What is your Voyage project idea & vision?</h2>
-        <p className="text-base font-medium text-neutral">We value your ideas! Share your ideas on what our project should be. Describe your vision to capture what it does and the benefit it will bring to users.</p>
+    <div className="card w-[1280px] h-[190px] bg-base-100 text-neutral-content flex flex-row items-center px-10">
+      <VoteDescriptionCard />
+      <div className="card-body gap-y-7 px-20">
+        <h2 className="text-xl font-semibold text-neutral-focus">
+          What is your Voyage project idea & vision?
+        </h2>
+        <p className="text-base font-medium text-neutral">
+          We value your ideas! Share your ideas on what our project should be.
+          Describe your vision to capture what it does and the benefit it will
+          bring to users.
+        </p>
       </div>
+      <button className="btn btn-primary text-base-content w-1/7" type="button">
+        Create Project
+      </button>
     </div>
   );
 }
diff --git a/src/app/ideation/components/VoteDescriptionCard.tsx b/src/app/ideation/components/VoteDescriptionCard.tsx
index db644d1e..ab1c2b8f 100644
--- a/src/app/ideation/components/VoteDescriptionCard.tsx
+++ b/src/app/ideation/components/VoteDescriptionCard.tsx
@@ -1,6 +1,6 @@
 function VoteDescriptionCard() {
   return (
-    <div className="card w-1/4 h-32 bg-base-content rounded-lg ml-10">
+    <div className="card w-1/3 h-32 bg-base-content rounded-lg">
       <div className="flex flex-col items-start p-4 gap-y-4">
         <h2 className="text-xl font-semibold text-neutral-focus">Votes</h2>
         <div className="text-base font-medium text-neutral text-left">

From b1500d1241a70e77a6d96af99e901a09018d7f44 Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Mon, 4 Sep 2023 22:38:20 -0400
Subject: [PATCH 05/17] use original text casing in button text

---
 src/app/ideation/components/CreateIdeationContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/ideation/components/CreateIdeationContainer.tsx b/src/app/ideation/components/CreateIdeationContainer.tsx
index fa61fc67..29398caf 100644
--- a/src/app/ideation/components/CreateIdeationContainer.tsx
+++ b/src/app/ideation/components/CreateIdeationContainer.tsx
@@ -14,7 +14,7 @@ function CreateIdeationContainer() {
           bring to users.
         </p>
       </div>
-      <button className="btn btn-primary text-base-content w-1/7" type="button">
+      <button className="btn btn-primary text-base-content w-1/7 normal-case" type="button">
         Create Project
       </button>
     </div>

From b4d71fa4289c34d04dcce43d88dcda79995d3f00 Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Mon, 4 Sep 2023 23:53:23 -0400
Subject: [PATCH 06/17] slightly better semantic html

---
 src/app/ideation/components/CreateIdeationContainer.tsx | 4 ++--
 src/app/ideation/components/VoteDescriptionCard.tsx     | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/ideation/components/CreateIdeationContainer.tsx b/src/app/ideation/components/CreateIdeationContainer.tsx
index 29398caf..50da8ae3 100644
--- a/src/app/ideation/components/CreateIdeationContainer.tsx
+++ b/src/app/ideation/components/CreateIdeationContainer.tsx
@@ -4,7 +4,7 @@ function CreateIdeationContainer() {
   return (
     <div className="card w-[1280px] h-[190px] bg-base-100 text-neutral-content flex flex-row items-center px-10">
       <VoteDescriptionCard />
-      <div className="card-body gap-y-7 px-20">
+      <section className="card-body gap-y-7 px-20">
         <h2 className="text-xl font-semibold text-neutral-focus">
           What is your Voyage project idea & vision?
         </h2>
@@ -13,7 +13,7 @@ function CreateIdeationContainer() {
           Describe your vision to capture what it does and the benefit it will
           bring to users.
         </p>
-      </div>
+      </section>
       <button className="btn btn-primary text-base-content w-1/7 normal-case" type="button">
         Create Project
       </button>
diff --git a/src/app/ideation/components/VoteDescriptionCard.tsx b/src/app/ideation/components/VoteDescriptionCard.tsx
index ab1c2b8f..a0713689 100644
--- a/src/app/ideation/components/VoteDescriptionCard.tsx
+++ b/src/app/ideation/components/VoteDescriptionCard.tsx
@@ -1,12 +1,12 @@
 function VoteDescriptionCard() {
   return (
     <div className="card w-1/3 h-32 bg-base-content rounded-lg">
-      <div className="flex flex-col items-start p-4 gap-y-4">
+      <section className="flex flex-col items-start p-4 gap-y-4">
         <h2 className="text-xl font-semibold text-neutral-focus">Votes</h2>
-        <div className="text-base font-medium text-neutral text-left">
+        <p className="text-base font-medium text-neutral text-left">
           Vote for the projects you are interested in.
-        </div>
-      </div>
+        </p>
+      </section>
     </div>
   );
 }

From 8249fc0f1fe6217de55f15ca91b8318970248366 Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Tue, 5 Sep 2023 00:01:32 -0400
Subject: [PATCH 07/17] prettier

---
 src/app/ideation/components/CreateIdeationContainer.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/ideation/components/CreateIdeationContainer.tsx b/src/app/ideation/components/CreateIdeationContainer.tsx
index 50da8ae3..b442f2ed 100644
--- a/src/app/ideation/components/CreateIdeationContainer.tsx
+++ b/src/app/ideation/components/CreateIdeationContainer.tsx
@@ -14,7 +14,10 @@ function CreateIdeationContainer() {
           bring to users.
         </p>
       </section>
-      <button className="btn btn-primary text-base-content w-1/7 normal-case" type="button">
+      <button
+        className="btn btn-primary text-base-content w-1/7 normal-case"
+        type="button"
+      >
         Create Project
       </button>
     </div>

From aebbf969c0b3ce41a014fa17b4860f642ddc1eff Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Tue, 5 Sep 2023 15:30:03 -0400
Subject: [PATCH 08/17] merge dev branch updates

---
 src/app/tech-stack/components/TechStackContainer.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/tech-stack/components/TechStackContainer.tsx b/src/app/tech-stack/components/TechStackContainer.tsx
index 97e0e6d6..59c85ff3 100644
--- a/src/app/tech-stack/components/TechStackContainer.tsx
+++ b/src/app/tech-stack/components/TechStackContainer.tsx
@@ -4,7 +4,9 @@ import { TechStackCard } from ".";
 
 export default function TechStackContainer() {
   return (
-    <div className={`card bg-primary-content p-10 ${styles["tech-container-width"]}`}>
+    <div
+      className={`card bg-primary-content p-10 ${styles["tech-container-width"]}`}
+    >
       <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20 justify-items-stretch">
         {Object.keys(techStack).map((cardType, index) => (
           <li

From 62bdac210d2a3076ae2a49653c36cdad04cf445d Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Tue, 5 Sep 2023 16:11:59 -0400
Subject: [PATCH 09/17] make button reusable

---
 .../components/CreateIdeationContainer.tsx    | 11 +++++++--
 .../tech-stack/components/TechStackCard.tsx   | 11 +++++++--
 .../components/TechStackContainer.tsx         |  6 ++---
 src/components/Button.tsx                     | 23 +++++++++++++++++++
 src/components/EditButton.tsx                 | 18 ---------------
 src/components/index.ts                       |  2 +-
 6 files changed, 45 insertions(+), 26 deletions(-)
 create mode 100644 src/components/Button.tsx
 delete mode 100644 src/components/EditButton.tsx

diff --git a/src/app/ideation/components/CreateIdeationContainer.tsx b/src/app/ideation/components/CreateIdeationContainer.tsx
index b442f2ed..26beb5b9 100644
--- a/src/app/ideation/components/CreateIdeationContainer.tsx
+++ b/src/app/ideation/components/CreateIdeationContainer.tsx
@@ -1,4 +1,5 @@
 import { VoteDescriptionCard } from ".";
+import { Button } from "@/components";
 
 function CreateIdeationContainer() {
   return (
@@ -14,12 +15,18 @@ function CreateIdeationContainer() {
           bring to users.
         </p>
       </section>
-      <button
+      <Button
+        title="Create Project"
+        customClassName="w-1/7 btn-primary text-base-content normal-case"
+      >
+        Create Project
+      </Button>
+      {/* <button
         className="btn btn-primary text-base-content w-1/7 normal-case"
         type="button"
       >
         Create Project
-      </button>
+      </button> */}
     </div>
   );
 }
diff --git a/src/app/tech-stack/components/TechStackCard.tsx b/src/app/tech-stack/components/TechStackCard.tsx
index 2b1c33a9..7d8f8823 100644
--- a/src/app/tech-stack/components/TechStackCard.tsx
+++ b/src/app/tech-stack/components/TechStackCard.tsx
@@ -1,5 +1,6 @@
+import { PencilSquareIcon } from "@heroicons/react/24/solid";
 import { TechItem } from "./fixtures/TechStack";
-import { Avatar, EditButton } from "@/components";
+import { Avatar, Button } from "@/components";
 
 interface TechStackCardProps {
   title: string;
@@ -13,7 +14,13 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
         <h3 className="text-xl font-semibold text-black mt-5 ml-5 self-center">
           {title}
         </h3>
-        <EditButton title={title} />
+        <Button
+          title={`edit ${title}`}
+          customClassName="mt-5 mr-5 capitalize w-16 h-8 p-0 min-h-full text-sm font-semibold text-black bg-secondary border-transparent"
+        >
+          <PencilSquareIcon className="h-4 w-4 text-black" />
+          Edit
+        </Button>
       </div>
       <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5">
         <ul className="text-black">
diff --git a/src/app/tech-stack/components/TechStackContainer.tsx b/src/app/tech-stack/components/TechStackContainer.tsx
index 59c85ff3..fb97f3de 100644
--- a/src/app/tech-stack/components/TechStackContainer.tsx
+++ b/src/app/tech-stack/components/TechStackContainer.tsx
@@ -14,9 +14,9 @@ export default function TechStackContainer() {
             className={`mx-auto xl:mx-0 ${
               index % 3 === 0
                 ? "justify-self-start"
-                : index % 3 === 1
-                  ? "justify-self-center"
-                  : "justify-self-end"
+                : index % 3 === 1 
+                ? "justify-self-center" // eslint-disable-line
+                : "justify-self-end" // eslint-disable-line
             }`}
           >
             <TechStackCard
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 00000000..1b6a544b
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+
+interface EditButtonProps {
+  title: string;
+  children: ReactNode;
+  customClassName: string;
+}
+
+export default function Button({
+  title,
+  children,
+  customClassName,
+}: EditButtonProps) {
+  return (
+    <button
+      type="button"
+      className={`btn grid grid-cols-[auto,auto] gap-x-1 ${customClassName}`}
+      aria-label={`${title}`}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/EditButton.tsx b/src/components/EditButton.tsx
deleted file mode 100644
index 94885b63..00000000
--- a/src/components/EditButton.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { PencilSquareIcon } from "@heroicons/react/24/solid";
-
-interface EditButtonProps {
-  title: string;
-}
-
-export default function EditButton({ title }: EditButtonProps) {
-  return (
-    <button
-      type="button"
-      className="btn grid grid-cols-[auto,auto] gap-x-1 mt-5 mr-5 capitalize w-16 h-8 p-0 min-h-full text-sm font-semibold text-black bg-secondary border-transparent"
-      aria-label={`Edit ${title}`}
-    >
-      <PencilSquareIcon className="h-4 w-4 text-black" />
-      Edit
-    </button>
-  );
-}
diff --git a/src/components/index.ts b/src/components/index.ts
index 2b77dcee..ca491c00 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,3 @@
 export { default as StoreProvider } from "./StoreProvider";
 export { default as Avatar } from "./Avatar";
-export { default as EditButton } from "./EditButton";
+export { default as Button } from "./Button";

From 2e68374d019b5f920acb986b0a0fae54e65b9d48 Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Tue, 5 Sep 2023 16:36:48 -0400
Subject: [PATCH 10/17] make avatar more reusable

---
 next.config.js                                     | 11 ++++++++++-
 src/app/tech-stack/components/TechStackCard.tsx    |  4 ++--
 .../tech-stack/components/TechStackContainer.tsx   |  2 +-
 src/components/Avatar.tsx                          | 14 +++++++++++---
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/next.config.js b/next.config.js
index 658404ac..e3a94aa6 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    images: {
+        remotePatterns: [
+            {
+                protocol: "https",
+                hostname: "png.pngtree.com"
+            }
+        ]
+    }
+};
 
 module.exports = nextConfig;
diff --git a/src/app/tech-stack/components/TechStackCard.tsx b/src/app/tech-stack/components/TechStackCard.tsx
index 7d8f8823..f9870e01 100644
--- a/src/app/tech-stack/components/TechStackCard.tsx
+++ b/src/app/tech-stack/components/TechStackCard.tsx
@@ -22,7 +22,7 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
           Edit
         </Button>
       </div>
-      <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5">
+      <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5 pt-1">
         <ul className="text-black">
           {data.map((element) => (
             <li
@@ -32,7 +32,7 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
               {element.value}
               <div className="avatar-group -space-x-2 absolute left-28">
                 {element.users.map((user) => (
-                  <Avatar key={`${element.id}-${user}`} />
+                  <Avatar key={`${element.id}-${user}`} image="https://png.pngtree.com/png-vector/20210604/ourmid/pngtree-gray-avatar-placeholder-png-image_3416697.jpg" width={24} height={24} />
                 ))}
               </div>
             </li>
diff --git a/src/app/tech-stack/components/TechStackContainer.tsx b/src/app/tech-stack/components/TechStackContainer.tsx
index fb97f3de..cda850a6 100644
--- a/src/app/tech-stack/components/TechStackContainer.tsx
+++ b/src/app/tech-stack/components/TechStackContainer.tsx
@@ -14,7 +14,7 @@ export default function TechStackContainer() {
             className={`mx-auto xl:mx-0 ${
               index % 3 === 0
                 ? "justify-self-start"
-                : index % 3 === 1 
+                : index % 3 === 1
                 ? "justify-self-center" // eslint-disable-line
                 : "justify-self-end" // eslint-disable-line
             }`}
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index f12304ba..f6d0c4ab 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,7 +1,15 @@
-export default function Avatar() {
+import Image from "next/image";
+
+interface AvatarProps {
+  image: string;
+  width: number;
+  height: number;
+}
+
+export default function Avatar({ image, width, height }: AvatarProps) {
   return (
-    <div className="avatar bg-neutral-300 rounded-full border border-base-content">
-      <div className="w-6"></div>
+    <div className="avatar rounded-full border border-base-content">
+      <Image alt="avatar" src={image} width={width} height={height}></Image>
     </div>
   );
 }

From 4bccd4c76de45e7ea9cac5c0b4db3b2bf6bfb100 Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Tue, 5 Sep 2023 16:45:49 -0400
Subject: [PATCH 11/17] add default image for avatar

---
 src/app/tech-stack/components/TechStackCard.tsx |  6 +++++-
 src/components/Avatar.tsx                       | 12 ++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/app/tech-stack/components/TechStackCard.tsx b/src/app/tech-stack/components/TechStackCard.tsx
index f9870e01..f3211015 100644
--- a/src/app/tech-stack/components/TechStackCard.tsx
+++ b/src/app/tech-stack/components/TechStackCard.tsx
@@ -32,7 +32,11 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
               {element.value}
               <div className="avatar-group -space-x-2 absolute left-28">
                 {element.users.map((user) => (
-                  <Avatar key={`${element.id}-${user}`} image="https://png.pngtree.com/png-vector/20210604/ourmid/pngtree-gray-avatar-placeholder-png-image_3416697.jpg" width={24} height={24} />
+                  <Avatar
+                    key={`${element.id}-${user}`}
+                    width={24}
+                    height={24}
+                  />
                 ))}
               </div>
             </li>
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index f6d0c4ab..ad53cdd8 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,7 +1,7 @@
 import Image from "next/image";
 
 interface AvatarProps {
-  image: string;
+  image?: string;
   width: number;
   height: number;
 }
@@ -9,7 +9,15 @@ interface AvatarProps {
 export default function Avatar({ image, width, height }: AvatarProps) {
   return (
     <div className="avatar rounded-full border border-base-content">
-      <Image alt="avatar" src={image} width={width} height={height}></Image>
+      <Image
+        alt="avatar"
+        src={
+          image ||
+          "https://png.pngtree.com/png-vector/20210604/ourmid/pngtree-gray-avatar-placeholder-png-image_3416697.jpg"
+        }
+        width={width}
+        height={height}
+      ></Image>
     </div>
   );
 }

From be9df15ebcbb1bf47945da5b3d54aae44a8782ef Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Tue, 5 Sep 2023 17:30:50 -0400
Subject: [PATCH 12/17] ideation project idea / vision statement section

---
 .../components/CreateIdeationContainer.tsx    |  6 ---
 .../ideation/components/IdeationContainer.tsx | 45 +++++++++++++++++++
 src/app/ideation/components/index.ts          |  1 +
 src/app/ideation/page.tsx                     |  7 ++-
 4 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 src/app/ideation/components/IdeationContainer.tsx

diff --git a/src/app/ideation/components/CreateIdeationContainer.tsx b/src/app/ideation/components/CreateIdeationContainer.tsx
index 26beb5b9..b999be75 100644
--- a/src/app/ideation/components/CreateIdeationContainer.tsx
+++ b/src/app/ideation/components/CreateIdeationContainer.tsx
@@ -21,12 +21,6 @@ function CreateIdeationContainer() {
       >
         Create Project
       </Button>
-      {/* <button
-        className="btn btn-primary text-base-content w-1/7 normal-case"
-        type="button"
-      >
-        Create Project
-      </button> */}
     </div>
   );
 }
diff --git a/src/app/ideation/components/IdeationContainer.tsx b/src/app/ideation/components/IdeationContainer.tsx
new file mode 100644
index 00000000..40971016
--- /dev/null
+++ b/src/app/ideation/components/IdeationContainer.tsx
@@ -0,0 +1,45 @@
+import { VoteDescriptionCard } from ".";
+import { Button } from "@/components";
+
+function IdeationContainer() {
+  return (
+    <div className="card w-[1280px] h-[457px] bg-primary-content text-neutral-content flex flex-row items-start p-10 gap-x-20">
+      <VoteDescriptionCard />
+      <section className="card-body gap-y-7 p-0 w-[1150px] h-[377px] overflow-y-auto pr-2">
+        <h2 className="text-xl font-semibold text-neutral-focus">
+          Real Estate Crowdsourcing
+        </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.
+        </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.
+        </p>
+      </section>
+      <Button
+        title="Create Project"
+        customClassName="w-1/7 btn-primary text-base-content normal-case"
+      >
+        Create Project
+      </Button>
+    </div>
+  );
+}
+
+export default IdeationContainer;
diff --git a/src/app/ideation/components/index.ts b/src/app/ideation/components/index.ts
index 26db8003..a7ac6274 100644
--- a/src/app/ideation/components/index.ts
+++ b/src/app/ideation/components/index.ts
@@ -1,2 +1,3 @@
 export { default as CreateIdeationContainer } from "./CreateIdeationContainer";
+export { default as IdeationContainer } from "./IdeationContainer";
 export { default as VoteDescriptionCard } from "./VoteDescriptionCard";
diff --git a/src/app/ideation/page.tsx b/src/app/ideation/page.tsx
index b3ce0121..0a537db5 100644
--- a/src/app/ideation/page.tsx
+++ b/src/app/ideation/page.tsx
@@ -1,9 +1,12 @@
-import { CreateIdeationContainer } from "./components";
+import { CreateIdeationContainer, IdeationContainer } from "./components";
 
 function IdeationPage() {
   return (
     <div className="flex flex-row justify-center">
-      <CreateIdeationContainer />
+      <div className="flex flex-col gap-y-9">
+        <CreateIdeationContainer />
+        <IdeationContainer />
+      </div>
     </div>
   );
 }

From a7187bd98ebbde78c74dab328a0d133b8b93e6e0 Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Tue, 5 Sep 2023 17:46:26 -0400
Subject: [PATCH 13/17] vote card

---
 .../ideation/components/IdeationContainer.tsx  | 12 ++++++++----
 src/app/ideation/components/VoteCard.tsx       | 18 ++++++++++++++++++
 src/app/ideation/components/index.ts           |  1 +
 src/components/Button.tsx                      |  6 +++---
 4 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 src/app/ideation/components/VoteCard.tsx

diff --git a/src/app/ideation/components/IdeationContainer.tsx b/src/app/ideation/components/IdeationContainer.tsx
index 40971016..eae28a2a 100644
--- a/src/app/ideation/components/IdeationContainer.tsx
+++ b/src/app/ideation/components/IdeationContainer.tsx
@@ -1,15 +1,17 @@
-import { VoteDescriptionCard } from ".";
+import { VoteCard } from ".";
 import { Button } from "@/components";
 
 function IdeationContainer() {
   return (
     <div className="card w-[1280px] h-[457px] bg-primary-content text-neutral-content flex flex-row items-start p-10 gap-x-20">
-      <VoteDescriptionCard />
+      <VoteCard />
       <section className="card-body gap-y-7 p-0 w-[1150px] h-[377px] overflow-y-auto pr-2">
         <h2 className="text-xl font-semibold text-neutral-focus">
           Real Estate Crowdsourcing
         </h2>
-        <h3 className="text-base text-neutral-focus font-semibold">Project Idea</h3>
+        <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
@@ -21,7 +23,9 @@ function IdeationContainer() {
           investors track their investments and receive regular updates on the
           progress of each project.
         </p>
-        <h3 className="text-base text-neutral-focus font-semibold">Vision Statement</h3>
+        <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
diff --git a/src/app/ideation/components/VoteCard.tsx b/src/app/ideation/components/VoteCard.tsx
new file mode 100644
index 00000000..5245cd91
--- /dev/null
+++ b/src/app/ideation/components/VoteCard.tsx
@@ -0,0 +1,18 @@
+import { Avatar, Button } from "@/components";
+
+function VoteCard() {
+  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>
+        <h2 className="text-xl font-semibold text-neutral-focus">Votes</h2>
+        <div>
+          <Avatar width={24} height={24} />
+        </div>
+        <Button title="Vote" customClassName="w-full bg-primary">Vote</Button>
+      </section>
+    </div>
+  );
+}
+
+export default VoteCard;
diff --git a/src/app/ideation/components/index.ts b/src/app/ideation/components/index.ts
index a7ac6274..84940984 100644
--- a/src/app/ideation/components/index.ts
+++ b/src/app/ideation/components/index.ts
@@ -1,3 +1,4 @@
 export { default as CreateIdeationContainer } from "./CreateIdeationContainer";
 export { default as IdeationContainer } from "./IdeationContainer";
 export { default as VoteDescriptionCard } from "./VoteDescriptionCard";
+export { default as VoteCard } from "./VoteCard";
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 1b6a544b..e3dbb0af 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,16 +1,16 @@
 import { ReactNode } from "react";
 
-interface EditButtonProps {
+interface ButtonProps {
   title: string;
   children: ReactNode;
-  customClassName: string;
+  customClassName?: string;
 }
 
 export default function Button({
   title,
   children,
   customClassName,
-}: EditButtonProps) {
+}: ButtonProps) {
   return (
     <button
       type="button"

From 96e45e0d95aa85e1009f1e3316b6cd16ce7e518a Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Tue, 5 Sep 2023 18:08:46 -0400
Subject: [PATCH 14/17] contribution card

---
 .../ideation/components/ContributionCard.tsx  | 20 +++++++++++++++++++
 .../ideation/components/IdeationContainer.tsx | 12 +++--------
 src/app/ideation/components/VoteCard.tsx      | 10 ++++++----
 src/app/ideation/components/index.ts          |  1 +
 4 files changed, 30 insertions(+), 13 deletions(-)
 create mode 100644 src/app/ideation/components/ContributionCard.tsx

diff --git a/src/app/ideation/components/ContributionCard.tsx b/src/app/ideation/components/ContributionCard.tsx
new file mode 100644
index 00000000..675bc4d9
--- /dev/null
+++ b/src/app/ideation/components/ContributionCard.tsx
@@ -0,0 +1,20 @@
+import { Avatar, Button } from "@/components";
+
+function ContributionCard() {
+  return (
+    <div className="card w-1/3 h-fit bg-accent-focus rounded-lg">
+      <section className="flex flex-col items-start p-4 gap-y-4">
+        <h1 className="text-base font-medium text-neutral-focus">
+          Contributed By
+        </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">
+          Vote
+        </Button>
+      </section>
+    </div>
+  );
+}
+
+export default ContributionCard;
diff --git a/src/app/ideation/components/IdeationContainer.tsx b/src/app/ideation/components/IdeationContainer.tsx
index eae28a2a..acb9b201 100644
--- a/src/app/ideation/components/IdeationContainer.tsx
+++ b/src/app/ideation/components/IdeationContainer.tsx
@@ -1,11 +1,10 @@
-import { VoteCard } from ".";
-import { Button } from "@/components";
+import { ContributionCard, VoteCard } from ".";
 
 function IdeationContainer() {
   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 />
-      <section className="card-body gap-y-7 p-0 w-[1150px] h-[377px] overflow-y-auto pr-2">
+      <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>
@@ -36,12 +35,7 @@ function IdeationContainer() {
           future and build wealth through real estate investments.
         </p>
       </section>
-      <Button
-        title="Create Project"
-        customClassName="w-1/7 btn-primary text-base-content normal-case"
-      >
-        Create Project
-      </Button>
+      <ContributionCard />
     </div>
   );
 }
diff --git a/src/app/ideation/components/VoteCard.tsx b/src/app/ideation/components/VoteCard.tsx
index 5245cd91..ffe6ae77 100644
--- a/src/app/ideation/components/VoteCard.tsx
+++ b/src/app/ideation/components/VoteCard.tsx
@@ -6,10 +6,12 @@ function VoteCard() {
       <section className="flex flex-col items-start p-4 gap-y-4">
         <h1 className="text-3xl font-semibold text-neutral-focus">4</h1>
         <h2 className="text-xl font-semibold text-neutral-focus">Votes</h2>
-        <div>
-          <Avatar width={24} height={24} />
-        </div>
-        <Button title="Vote" customClassName="w-full bg-primary">Vote</Button>
+
+        <Avatar width={24} height={24} />
+
+        <Button title="Vote" customClassName="w-full bg-primary">
+          Vote
+        </Button>
       </section>
     </div>
   );
diff --git a/src/app/ideation/components/index.ts b/src/app/ideation/components/index.ts
index 84940984..b605f4fb 100644
--- a/src/app/ideation/components/index.ts
+++ b/src/app/ideation/components/index.ts
@@ -2,3 +2,4 @@ export { default as CreateIdeationContainer } from "./CreateIdeationContainer";
 export { default as IdeationContainer } from "./IdeationContainer";
 export { default as VoteDescriptionCard } from "./VoteDescriptionCard";
 export { default as VoteCard } from "./VoteCard";
+export { default as ContributionCard } from "./ContributionCard";

From 9e6954ac23bf475ce4bab1d77cf075e678625525 Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Tue, 5 Sep 2023 19:32:15 -0400
Subject: [PATCH 15/17] finish implementing vote card with mock data

---
 next.config.js                                |  4 ++
 .../ideation/components/ContributionCard.tsx  |  5 +-
 .../ideation/components/IdeationContainer.tsx | 36 +++++------
 src/app/ideation/components/VoteCard.tsx      | 23 ++++---
 .../ideation/components/fixtures/ideation.ts  | 62 +++++++++++++++++++
 src/app/ideation/components/index.ts          |  1 +
 src/app/ideation/page.tsx                     | 21 ++++++-
 src/components/Button.tsx                     |  4 +-
 8 files changed, 122 insertions(+), 34 deletions(-)
 create mode 100644 src/app/ideation/components/fixtures/ideation.ts

diff --git a/next.config.js b/next.config.js
index e3a94aa6..ec6022d9 100644
--- a/next.config.js
+++ b/next.config.js
@@ -5,6 +5,10 @@ const nextConfig = {
             {
                 protocol: "https",
                 hostname: "png.pngtree.com"
+            },
+            {
+                protocol: "https",
+                hostname: "encrypted-tbn0.gstatic.com"
             }
         ]
     }
diff --git a/src/app/ideation/components/ContributionCard.tsx b/src/app/ideation/components/ContributionCard.tsx
index 675bc4d9..a532659b 100644
--- a/src/app/ideation/components/ContributionCard.tsx
+++ b/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>
diff --git a/src/app/ideation/components/IdeationContainer.tsx b/src/app/ideation/components/IdeationContainer.tsx
index acb9b201..4d1fa1b4 100644
--- a/src/app/ideation/components/IdeationContainer.tsx
+++ b/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 />
diff --git a/src/app/ideation/components/VoteCard.tsx b/src/app/ideation/components/VoteCard.tsx
index ffe6ae77..dccef002 100644
--- a/src/app/ideation/components/VoteCard.tsx
+++ b/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>
diff --git a/src/app/ideation/components/fixtures/ideation.ts b/src/app/ideation/components/fixtures/ideation.ts
new file mode 100644
index 00000000..12c17fb3
--- /dev/null
+++ b/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,
+  },
+];
diff --git a/src/app/ideation/components/index.ts b/src/app/ideation/components/index.ts
index b605f4fb..a5c98d9f 100644
--- a/src/app/ideation/components/index.ts
+++ b/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";
diff --git a/src/app/ideation/page.tsx b/src/app/ideation/page.tsx
index 0a537db5..ad98a635 100644
--- a/src/app/ideation/page.tsx
+++ b/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>
   );
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index e3dbb0af..4ac01707 100644
--- a/src/components/Button.tsx
+++ b/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>

From bc09855c81933f92129c5a55eb17d009c9c8b296 Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Tue, 5 Sep 2023 19:38:54 -0400
Subject: [PATCH 16/17] finish contribution card with mock data

---
 .../ideation/components/ContributionCard.tsx  | 30 +++++++++++++------
 .../ideation/components/IdeationContainer.tsx |  2 +-
 src/app/ideation/components/VoteCard.tsx      |  6 +++-
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/app/ideation/components/ContributionCard.tsx b/src/app/ideation/components/ContributionCard.tsx
index a532659b..a967e83d 100644
--- a/src/app/ideation/components/ContributionCard.tsx
+++ b/src/app/ideation/components/ContributionCard.tsx
@@ -1,20 +1,32 @@
 import { Avatar, Button } from "@/components";
 
-function ContributionCard() {
+interface ContributionCardProps {
+  own_idea: boolean;
+  contributed_by: {
+    name: string;
+    avatar?: string;
+  };
+}
+
+function ContributionCard({ own_idea, contributed_by }: ContributionCardProps) {
   return (
     <div className="card w-1/3 h-fit bg-accent-focus rounded-lg">
       <section className="flex flex-col items-start p-4 gap-y-4">
         <h1 className="text-base font-medium text-neutral-focus">
           Contributed By
         </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"
-        >
-          Vote
-        </Button>
+        <Avatar width={64} height={64} image={contributed_by.avatar} />
+        <h2 className="text-xl font-semibold text-neutral-focus">
+          {contributed_by.name}
+        </h2>
+        {own_idea ? (
+          <Button
+            title="Vote"
+            customClassName="w-full bg-base-content text-neutral-focus border-primary"
+          >
+            Edit Project
+          </Button>
+        ) : null}
       </section>
     </div>
   );
diff --git a/src/app/ideation/components/IdeationContainer.tsx b/src/app/ideation/components/IdeationContainer.tsx
index 4d1fa1b4..33a63a54 100644
--- a/src/app/ideation/components/IdeationContainer.tsx
+++ b/src/app/ideation/components/IdeationContainer.tsx
@@ -27,7 +27,7 @@ function IdeationContainer({
           {vision_statement}
         </p>
       </section>
-      <ContributionCard />
+      <ContributionCard own_idea={own_idea} contributed_by={contributed_by} />
     </div>
   );
 }
diff --git a/src/app/ideation/components/VoteCard.tsx b/src/app/ideation/components/VoteCard.tsx
index dccef002..f590f5ac 100644
--- a/src/app/ideation/components/VoteCard.tsx
+++ b/src/app/ideation/components/VoteCard.tsx
@@ -18,7 +18,11 @@ function VoteCard({ users, voted }: VoteCardProps) {
             <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}>
+        <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>

From 840001a5949e7a00fe3967a8e92b7303bd36a411 Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Tue, 5 Sep 2023 19:59:16 -0400
Subject: [PATCH 17/17] update vote text to account for 1 vote or multiple
 votes

---
 src/app/ideation/components/VoteCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/ideation/components/VoteCard.tsx b/src/app/ideation/components/VoteCard.tsx
index f590f5ac..f236e3e6 100644
--- a/src/app/ideation/components/VoteCard.tsx
+++ b/src/app/ideation/components/VoteCard.tsx
@@ -12,7 +12,7 @@ function VoteCard({ users, voted }: VoteCardProps) {
         <h1 className="text-3xl font-semibold text-neutral-focus">
           {users.length}
         </h1>
-        <h2 className="text-xl font-semibold text-neutral-focus">Votes</h2>
+        <h2 className="text-xl font-semibold text-neutral-focus">{`Vote${users.length > 1 ? "s" : ""}`}</h2>
         <div className="avatar-group -space-x-2 w-full">
           {users.map((user) => (
             <Avatar width={24} height={24} key={user} />