Skip to content

Commit 9bb4263

Browse files
HaudinFlorenceHaudinFlorence
committed
Add a new page for fundable projects.
1 parent 4b4d0d8 commit 9bb4263

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+11767
-2
lines changed

‎docusaurus.config.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,13 @@ const config: Config = {
110110
className: "custom_navbar_item",
111111
label: "Blog",
112112
position: "left",
113+
},
114+
{
115+
to: "/fundable/",
116+
className: "custom_navbar_item",
117+
label: "Fundable projects",
118+
position: "right",
119+
className:"fundable_projects"
113120
},
114121
{
115122
to: "/contact/",

‎src/components/footer/Footer.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,16 @@ export default function Footer() {
6565
</li>
6666
</ul>
6767
</div>
68+
<div className="col flex-horizontally-centered">
69+
<ul>
70+
<li>
71+
<Link href={"/fundable"}>Fundable projects</Link>
72+
</li>
73+
<li>
74+
<Link href={"/contact"}>Contact us</Link>
75+
</li>
76+
</ul>
77+
</div>
6878
</div>
6979
</div>
7080
</div>

‎src/components/fundable/GetAQuoteForm.tsx

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import styles from "./styles.module.css";
2+
3+
export default function GetAQuoteForm() {
4+
return (
5+
<>
6+
<form
7+
action="https://formspree.io/f/xjvndwdq"
8+
method="POST"
9+
className={styles.contact_form}
10+
>
11+
<div className="form-group">
12+
<div>
13+
<label className={styles.form_label}>Project name</label>
14+
</div>
15+
<div className={styles.input_container}>
16+
<input
17+
type="text"
18+
className={styles.small_input}
19+
name="Project name"
20+
id="Project name"
21+
/>
22+
</div>
23+
<div>
24+
<label className={styles.form_label}>Your name</label>
25+
</div>
26+
<div className={styles.input_container}>
27+
<input
28+
type="text"
29+
className={styles.small_input}
30+
name="name"
31+
id="name"
32+
/>
33+
</div>
34+
</div>
35+
<div className="form-group">
36+
<div>
37+
<label className={styles.form_label}>Your company</label>
38+
</div>
39+
<div className={styles.input_container}>
40+
<input className={styles.small_input} name="company" id="company" />
41+
</div>
42+
</div>
43+
<div className="form-group">
44+
<div>
45+
<label className={styles.form_label}>Your email</label>
46+
</div>
47+
<div className={styles.input_container}>
48+
<input
49+
type="text"
50+
className={styles.small_input}
51+
name="email"
52+
id="email"
53+
/>
54+
</div>
55+
</div>
56+
<div className="form-group">
57+
<div>
58+
<label className={styles.form_label}>Your phone number</label>
59+
</div>
60+
<div className={styles.input_container}>
61+
<input
62+
type="text"
63+
className={styles.small_input}
64+
name="phone-number"
65+
id="phone-number"
66+
/>
67+
</div>
68+
</div>
69+
<div className="form-group">
70+
<div>
71+
<label className={styles.form_label}>Your message to us</label>
72+
</div>
73+
<div>
74+
<textarea
75+
className={styles.large_input}
76+
placeholder="Please explain your interests in funding this project"
77+
name="message"
78+
id="message"
79+
></textarea>
80+
</div>
81+
</div>
82+
<div>
83+
<div className={"flex-full-centered" + " "+ styles.send_button_container}>
84+
<input type="submit" value="SEND" className={"link-to-button" + " " + styles.send_button} />
85+
</div>
86+
</div>
87+
</form>
88+
</>
89+
);
90+
}

‎src/components/fundable/GetAQuotePage.tsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
2+
import styles from "./styles.module.css";
3+
import GetAQuoteForm from "./GetAQuoteForm"
4+
import { LargeProjectCardContent } from "./LargeProjectCard";
5+
import { useHistory, useLocation } from "@docusaurus/router";
6+
import Layout from "@theme/Layout";
7+
import { Route } from 'react-router-dom';
8+
import { getCategoryFromProjectPageName } from ".";
9+
import FundableProjects from ".";
10+
11+
function GetAQuoteComponent({ project }) {
12+
return (
13+
<div className={styles.get_a_quote_dialog}>
14+
<div className={"row" + " " + "flex-horizontally-centered"}>
15+
16+
<div className="col col--6">
17+
<LargeProjectCardContent project={project} />
18+
</div>
19+
<div className="col col--6">
20+
<h1 className={"padding-none text--center"}> Get a quote</h1>
21+
<div className="flex-horizontally-centered"><GetAQuoteForm /></div>
22+
</div>
23+
</div>
24+
</div>
25+
)
26+
}
27+
export default function GetAQuotePage() {
28+
const location = useLocation();
29+
const history = useHistory();
30+
31+
const handleClose = () => {
32+
history.goBack();
33+
34+
}
35+
return (
36+
<Layout>
37+
<FundableProjects />
38+
<Route
39+
path="/fundable/:pageName/GetAQuote"
40+
render={({ match }) => {
41+
const { pageName } = match.params; /* extract the dynamic part from the url i.e. the pageName*/
42+
const projectsByCategory = getCategoryFromProjectPageName(pageName);
43+
const project = projectsByCategory.find((project) => project.pageName === pageName);
44+
if (!project) return null;
45+
46+
return (
47+
<div className={styles.modal_overlay} >
48+
<div
49+
className={styles.modal_content}
50+
onClick={(e) => e.stopPropagation()}
51+
>
52+
<button
53+
className="close-button"
54+
style={{
55+
position: "absolute",
56+
top: "10px",
57+
right: "10px",
58+
}}
59+
onClick={handleClose}
60+
/>
61+
<GetAQuoteComponent project={project} />
62+
</div>
63+
</div>
64+
);
65+
}}
66+
/>
67+
</Layout>
68+
)
69+
}

‎src/components/fundable/IconContainer.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import styles from "./styles.module.css";
2+
import Link from "@docusaurus/Link";
3+
import GHPicture from "@site/static/img/socialmedias/GH.svg";
4+
import LinkedInPicture from "@site/static/img/socialmedias/LinkedIn.svg";
5+
import BlueskyPicture from "@site/static/img/socialmedias/Bluesky.svg";
6+
import MastodonPicture from "@site/static/img/socialmedias/Mastodon.svg";
7+
8+
export default function IconContainer({ project }) {
9+
const icons = project.icons
10+
return (
11+
12+
13+
<div className={styles.icon_container}>
14+
{icons.map((Icon, index) => (
15+
<div key={index} className={styles.iconWrapper}>
16+
<Icon height={"42px"} width={"42px"}
17+
alt={
18+
"Icon for the fundable project."
19+
} />
20+
</div>
21+
))}
22+
</div>
23+
);
24+
25+
26+
}

‎src/components/fundable/LargeProjectCard.tsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import styles from "./styles.module.css";
2+
import React from "react";
3+
import IconContainer from "./IconContainer";
4+
import LinkToGetAQuote from "./LinkToGetAQuote";
5+
import { useHistory, useLocation } from "@docusaurus/router";
6+
7+
export function LargeProjectCardContent({ project }) {
8+
const history = useHistory();
9+
const location = useLocation();
10+
11+
function openDialog() {
12+
const pageName = project.pageName;
13+
14+
history.push({
15+
pathname: `/fundable/${pageName}/GetAQuote`,
16+
state: { from: location.pathname, scrollY: window.scrollY },
17+
});
18+
}
19+
return (
20+
<div className={"container"} onClick={openDialog}>
21+
<div className={"row-padding-none"}>
22+
<div className="col col--12">
23+
<div className={styles.large_project_card_title}>{project.title}</div>
24+
</div>
25+
<div style={{ padding: "0 16px" }}><IconContainer project={project} /></div>
26+
</div>
27+
<div className="row">
28+
<div className="col col--12">
29+
<div className={styles.large_project_card_text_container}>
30+
<div className={styles.large_project_card_section_title}>Overview</div>
31+
<div className={styles.large_project_card_description_container}>
32+
<div className={styles.large_project_card_description}>
33+
<project.description />
34+
</div>
35+
</div>
36+
<div className={styles.large_project_card_section_title}>Option A</div>
37+
<div className={styles.large_project_card_option}>
38+
{project.optionA}
39+
</div>
40+
<div className={styles.large_project_card_section_title}>Option B</div>
41+
<div className={styles.large_project_card_option}>
42+
{project.optionB}
43+
</div>
44+
<div className={styles.large_project_card_section_title}>Custom Option</div>
45+
<div className={styles.large_project_card_option}>
46+
{project.customOption}
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
)
53+
}
54+
export default function LargeProjectCard({ project }) {
55+
return (
56+
<div className={styles.large_project_card}>
57+
<LargeProjectCardContent project={project} />
58+
<div className="row">
59+
<div className="col col--12">
60+
<div className={styles.large_project_card_contact_text}>Are you interested in this project? Either entirely or partially, contact us for more information on how to help us fund it.</div>
61+
<div><LinkToGetAQuote label={"GET A QUOTE"} pageName={project.pageName} /></div>
62+
</div>
63+
</div>
64+
</div>
65+
66+
);
67+
}

‎src/components/fundable/LargeProjectCardPage.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { useHistory, useLocation } from "@docusaurus/router";
2+
import { useEffect } from "react";
3+
import styles from "./styles.module.css";
4+
import LargeProjectCard from "./LargeProjectCard";
5+
import { getCategoryFromProjectPageName } from ".";
6+
import FundableProjects from ".";
7+
import Layout from "@theme/Layout";
8+
import { Route } from 'react-router-dom';
9+
10+
11+
export default function LargeProjectCardPage() {
12+
const location = useLocation();
13+
const history = useHistory();
14+
15+
useEffect(() => {
16+
if (location.state?.fromFundable) {
17+
window.scrollTo({ top: location.state.scrollY ?? 0, behavior: 'auto' });
18+
}
19+
}, []);
20+
21+
const handleOverlayClick = () => {
22+
const scrollY = location.state?.scrollY;
23+
setTimeout(() => {
24+
if (scrollY !== undefined) {
25+
window.scrollTo({ top: scrollY, behavior: 'auto' });
26+
}
27+
}, 0);
28+
history.replace('/fundable');
29+
};
30+
31+
const handleClose = () => {
32+
const scrollY = location.state?.scrollY;
33+
if (location.state?.fromFundable) {
34+
history.replace('/fundable');
35+
36+
setTimeout(() => {
37+
if (scrollY !== undefined) {
38+
window.scrollTo({ top: scrollY, behavior: 'auto' });
39+
}
40+
}, 0);
41+
} else {
42+
history.goBack();
43+
}
44+
}
45+
return (
46+
<Layout>
47+
<FundableProjects />
48+
<Route
49+
path="/fundable/:pageName"
50+
render={({ match }) => {
51+
const { pageName } = match.params; /* extract the dynamic part from the url i.e. the pageName*/
52+
const projectsByCategory = getCategoryFromProjectPageName(pageName);
53+
const project = projectsByCategory.find((project) => project.pageName === pageName);
54+
if (!project) return null;
55+
56+
return (
57+
<div className={styles.modal_overlay} onClick={handleOverlayClick}>
58+
<div
59+
className={styles.modal_content}
60+
onClick={(e) => e.stopPropagation()}
61+
>
62+
<button
63+
className="close-button"
64+
style={{
65+
position: "absolute",
66+
top: "10px",
67+
right: "10px",
68+
}}
69+
onClick={handleClose}
70+
/>
71+
<LargeProjectCard project={project} />
72+
</div>
73+
</div>
74+
);
75+
}}
76+
/>
77+
</Layout>
78+
)
79+
}

‎src/components/fundable/LinkToGetAQuote.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import styles from "./styles.module.css";
2+
import Link from "@docusaurus/Link";
3+
4+
export default function LinkToGetAQuote({label, pageName}) {
5+
const pathname = "/fundable/"+ pageName+ "/GetAQuote"
6+
return (
7+
<div className="flex-full-centered">
8+
<Link
9+
className={"link-to-button" + " " + styles.link_to_get_a_quote}
10+
href={pathname}
11+
>
12+
{label}
13+
</Link>
14+
</div>
15+
);
16+
}

0 commit comments

Comments
 (0)