Add dummy form data for fetching form listings

3 files changed, 40 insertions, 10 deletions

diff --git a/src/api/forms.ts b/src/api/forms.ts
new file mode 100644
index 0000000..a0c27ce
--- /dev/null
+++ b/src/api/forms.ts
@@ -0,0 +1,25 @@
+export interface Form {
+    name: string,
+    description: string,
+    open: boolean
+}
+
+export function getForms(): Form[] {
+    return [
+        {
+            name: "Ban Appeals",
+            description: "Appealing bans from the Discord server",
+            open: true
+        },
+        {
+            name: "Insights 2020",
+            description: "Insights about the Python Discord community",
+            open: false
+        },
+        {
+            name: "Code Jam Sign Ups",
+            description: "Insights about the Python Discord community",
+            open: false
+        }
+    ]
+}
diff --git a/src/components/FormListing.tsx b/src/components/FormListing.tsx
index 09b3134..dc761b6 100644
--- a/src/components/FormListing.tsx
+++ b/src/components/FormListing.tsx
@@ -9,15 +9,15 @@ import Tag from "./Tag";
 
 import colors from "../colors";
 
+import { Form } from "../api/forms";
+
 interface FormListingProps {
-  title: string,
-  description: string,
-  open: boolean
+  form: Form
 }
 
-function FormListing(props: FormListingProps) {
+function FormListing({ form }: FormListingProps) {
   const listingStyle = css`
-    background-color: ${props.open ? colors.success : colors.darkButNotBlack};
+    background-color: ${form.open ? colors.success : colors.darkButNotBlack};
     width: 60%;
     padding: 20px;
     margin-top: 20px;
@@ -39,14 +39,14 @@ function FormListing(props: FormListingProps) {
 
   let closedTag;
 
-  if (!props.open) {
+  if (!form.open) {
     closedTag = <Tag text="CLOSED" color={colors.error}/>
   };
 
   return <Link to="/form" css={listingStyle}>
     <div>
-      <h3 css={{fontSize: "1.5em", marginBottom: "0"}}>{closedTag}{props.title} <FontAwesomeIcon icon={faArrowRight} css={{fontSize: "0.75em", paddingBottom: "1px"}}/></h3>
-      <p css={{marginTop: "5px"}}>{props.description}</p>
+      <h3 css={{fontSize: "1.5em", marginBottom: "0"}}>{closedTag}{form.title} <FontAwesomeIcon icon={faArrowRight} css={{fontSize: "0.75em", paddingBottom: "1px"}}/></h3>
+      <p css={{marginTop: "5px"}}>{form.description}</p>
     </div>
   </Link>
 }
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index 4a6e157..ef588f3 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -4,6 +4,8 @@ import { css, jsx } from "@emotion/core";
 import HeaderBar from "../components/HeaderBar";
 import FormListing from "../components/FormListing";
 
+import { getForms } from "../api/forms";
+
 function LandingPage() {
   return <div>
     <HeaderBar/>
@@ -15,8 +17,11 @@ function LandingPage() {
         flex-direction: column;
       `}>
         <h1>Available Forms</h1>
-        <FormListing title="Ban Appeals" description="Appealing bans from the Discord server" open={true}/>
-        <FormListing title="Insights 2020" description="Insights about the Python Discord community" open={false}/>
+        
+
+        {getForms().map(form => (
+          <FormListing form={form}/>
+        ))}
       </div>
     </div>
   </div>