Feature/cgd 37

next.config.js

@@ -1,4 +1,17 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    images: {
+        remotePatterns: [
+            {
+                protocol: "https",
+                hostname: "png.pngtree.com"
+            },
+            {
+                protocol: "https",
+                hostname: "encrypted-tbn0.gstatic.com"
+            }
+        ]
+    }
+};
 
 module.exports = nextConfig;

src/app/ideation/components/ContributionCard.tsx

@@ -0,0 +1,35 @@
+import { Avatar, Button } from "@/components";
+
+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} 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>
+  );
+}
+
+export default ContributionCard;

src/app/ideation/components/CreateIdeationContainer.tsx

@@ -0,0 +1,28 @@
+import { VoteDescriptionCard } from ".";
+import { Button } from "@/components";
+
+function CreateIdeationContainer() {
+  return (
+    <div className="card w-[1280px] h-[190px] bg-base-100 text-neutral-content flex flex-row items-center px-10">
+      <VoteDescriptionCard />
+      <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>
+        <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>
+      </section>
+      <Button
+        title="Create Project"
+        customClassName="w-1/7 btn-primary text-base-content normal-case"
+      >
+        Create Project
+      </Button>
+    </div>
+  );
+}
+
+export default CreateIdeationContainer;

src/app/ideation/components/IdeationContainer.tsx

@@ -0,0 +1,35 @@
+import { ContributionCard, VoteCard, type Ideation } from ".";
+
+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 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">{title}</h2>
+        <h3 className="text-base text-neutral-focus font-semibold">
+          Project Idea
+        </h3>
+        <p className="text-base text-neutral-focus font-medium">
+          {project_idea}
+        </p>
+        <h3 className="text-base text-neutral-focus font-semibold">
+          Vision Statement
+        </h3>
+        <p className="text-base text-neutral-focus font-medium">
+          {vision_statement}
+        </p>
+      </section>
+      <ContributionCard own_idea={own_idea} contributed_by={contributed_by} />
+    </div>
+  );
+}
+
+export default IdeationContainer;

src/app/ideation/components/VoteCard.tsx

@@ -0,0 +1,33 @@
+import { Avatar, Button } from "@/components";
+
+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">
+          {users.length}
+        </h1>
+        <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} />
+          ))}
+        </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>
+  );
+}
+
+export default VoteCard;

src/app/ideation/components/VoteDescriptionCard.tsx

@@ -0,0 +1,14 @@
+function VoteDescriptionCard() {
+  return (
+    <div className="card w-1/3 h-32 bg-base-content rounded-lg">
+      <section className="flex flex-col items-start p-4 gap-y-4">
+        <h2 className="text-xl font-semibold text-neutral-focus">Votes</h2>
+        <p className="text-base font-medium text-neutral text-left">
+          Vote for the projects you are interested in.
+        </p>
+      </section>
+    </div>
+  );
+}
+
+export default VoteDescriptionCard;

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

@@ -0,0 +1,6 @@
+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";
+export { ideation, type Ideation } from "./fixtures/ideation";

src/app/ideation/page.tsx

@@ -0,0 +1,29 @@
+import {
+  CreateIdeationContainer,
+  IdeationContainer,
+  ideation,
+} from "./components";
+
+function IdeationPage() {
+  return (
+    <div className="flex flex-row justify-center">
+      <div className="flex flex-col gap-y-9 p-3">
+        <CreateIdeationContainer />
+        {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>
+  );
+}
+
+export default IdeationPage;

src/app/layout.tsx

@@ -22,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" />

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,9 +14,15 @@ 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">
+      <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5 pt-1">
         <ul className="text-black">
           {data.map((element) => (
             <li
@@ -25,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}`} />
+                  <Avatar
+                    key={`${element.id}-${user}`}
+                    width={24}
+                    height={24}
+                  />
                 ))}
               </div>
             </li>

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
@@ -13,8 +15,8 @@ export default function TechStackContainer() {
               index % 3 === 0
                 ? "justify-self-start"
                 : index % 3 === 1
-                  ? "justify-self-center"
-                  : "justify-self-end"
+                ? "justify-self-center" // eslint-disable-line
+                : "justify-self-end" // eslint-disable-line
             }`}
           >
             <TechStackCard

src/components/Avatar.tsx

@@ -1,7 +1,23 @@
-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 ||
+          "https://png.pngtree.com/png-vector/20210604/ourmid/pngtree-gray-avatar-placeholder-png-image_3416697.jpg"
+        }
+        width={width}
+        height={height}
+      ></Image>
     </div>
   );
 }

src/components/Button.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  title: string;
+  children: ReactNode;
+  customClassName?: string;
+}
+
+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>
+  );
+}