diff --git a/next.config.js b/next.config.js index 658404ac..ec6022d9 100644 --- a/next.config.js +++ b/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; diff --git a/src/app/ideation/components/ContributionCard.tsx b/src/app/ideation/components/ContributionCard.tsx new file mode 100644 index 00000000..a967e83d --- /dev/null +++ b/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 ( +
+
+

+ Contributed By +

+ +

+ {contributed_by.name} +

+ {own_idea ? ( + + ) : null} +
+
+ ); +} + +export default ContributionCard; diff --git a/src/app/ideation/components/CreateIdeationContainer.tsx b/src/app/ideation/components/CreateIdeationContainer.tsx new file mode 100644 index 00000000..b999be75 --- /dev/null +++ b/src/app/ideation/components/CreateIdeationContainer.tsx @@ -0,0 +1,28 @@ +import { VoteDescriptionCard } from "."; +import { Button } from "@/components"; + +function CreateIdeationContainer() { + return ( +
+ +
+

+ What is your Voyage project idea & vision? +

+

+ 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. +

+
+ +
+ ); +} + +export default CreateIdeationContainer; diff --git a/src/app/ideation/components/IdeationContainer.tsx b/src/app/ideation/components/IdeationContainer.tsx new file mode 100644 index 00000000..33a63a54 --- /dev/null +++ b/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 ( +
+ +
+

{title}

+

+ Project Idea +

+

+ {project_idea} +

+

+ Vision Statement +

+

+ {vision_statement} +

+
+ +
+ ); +} + +export default IdeationContainer; diff --git a/src/app/ideation/components/VoteCard.tsx b/src/app/ideation/components/VoteCard.tsx new file mode 100644 index 00000000..f236e3e6 --- /dev/null +++ b/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 ( +
+
+

+ {users.length} +

+

{`Vote${users.length > 1 ? "s" : ""}`}

+
+ {users.map((user) => ( + + ))} +
+ +
+
+ ); +} + +export default VoteCard; diff --git a/src/app/ideation/components/VoteDescriptionCard.tsx b/src/app/ideation/components/VoteDescriptionCard.tsx new file mode 100644 index 00000000..a0713689 --- /dev/null +++ b/src/app/ideation/components/VoteDescriptionCard.tsx @@ -0,0 +1,14 @@ +function VoteDescriptionCard() { + return ( +
+
+

Votes

+

+ Vote for the projects you are interested in. +

+
+
+ ); +} + +export default VoteDescriptionCard; 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 new file mode 100644 index 00000000..a5c98d9f --- /dev/null +++ b/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"; 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..ad98a635 --- /dev/null +++ b/src/app/ideation/page.tsx @@ -0,0 +1,29 @@ +import { + CreateIdeationContainer, + IdeationContainer, + ideation, +} from "./components"; + +function IdeationPage() { + return ( +
+
+ + {ideation.map((i) => ( + + ))} +
+
+ ); +} + +export default IdeationPage; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 19afe4df..e6fe0c97 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -22,7 +22,7 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - +