Add ProposalPreview and ProposalPreviewList

packages/joy-proposals/src/Proposal/Proposal.css

@@ -0,0 +1,31 @@
+.Proposal {
+  /* Ovverrides Semantic UI for the details page.*/
+  .ui.items > .item:first-child {
+    margin: 1em 0;
+  }
+
+  .details-container {
+    display: flex;
+  }
+
+  .ui.items > .item .extra.proposed-by {
+    /* This is to ensure Proposed By: is above the name of the creator. The image is 50x50 and has 14pxs of margin right*/
+    padding-left: 64px;
+  }
+
+  .center-content {
+    justify-content: center;
+  }
+
+  .bold {
+    font-weight: 700;
+  }
+
+  .details-param {
+    display: flex;
+  }
+
+  .ui.tabular.list-menu {
+    margin-bottom: 2rem;
+  }
+}

packages/joy-proposals/src/Proposal/ProposalPreview.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Header, Card } from "semantic-ui-react";
+
+import { ProposalProps } from "./ProposalDetails";
+import Details from "./Details";
+
+import "./Proposal.css";
+
+export default function ProposalPreview({ title, description, details }: ProposalProps) {
+    return (
+        <Card fluid className="Proposal">
+            <Card.Content>
+                <Card.Header>
+                    <Header as="h1">{title}</Header>
+                </Card.Header>
+                <Card.Description>{description}</Card.Description>
+                <Details {...details} />
+            </Card.Content>
+        </Card>
+    );
+}

packages/joy-proposals/src/Proposal/ProposalPreviewList.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import { Card, Menu, Container } from "semantic-ui-react";
+
+import { ProposalProps } from "./ProposalDetails";
+import ProposalPreview from "./ProposalPreview";
+
+type ProposalFilter = "all" | "active" | "withdrawn" | "approved" | "rejected" | "slashed";
+
+export default function ProposalPreviewList({ proposals }: { proposals: ProposalProps[] }) {
+    let [activeFilter, setActiveFilter] = useState<ProposalFilter>("all");
+    let proposalsMap = new Map();
+
+    proposalsMap.set("all", proposals);
+    proposalsMap.set("withdrawn", filterProposals("withdrawn", proposals));
+    proposalsMap.set("active", filterProposals("withdrawn", proposals));
+    proposalsMap.set("approved", filterProposals("approved", proposals));
+    proposalsMap.set("rejected", filterProposals("rejected", proposals));
+    proposalsMap.set("slashed", filterProposals("slashed", proposals));
+
+    return (
+        <Container className="Proposal">
+            <Menu tabular className="list-menu">
+                <Menu.Item
+                    name={`all - ${proposalsMap.get("withdrawn").length} `}
+                    active={activeFilter === "all"}
+                    onClick={() => setActiveFilter("all")}
+                />
+                <Menu.Item
+                    name={`withdrawn (${proposalsMap.get("withdrawn").length})`}
+                    active={activeFilter === "withdrawn"}
+                    onClick={() => setActiveFilter("withdrawn")}
+                />
+                <Menu.Item
+                    name={`active (${proposalsMap.get("active").length})`}
+                    active={activeFilter === "active"}
+                    onClick={() => setActiveFilter("active")}
+                />
+                <Menu.Item
+                    name={`approved (${proposalsMap.get("approved").length})`}
+                    active={activeFilter === "approved"}
+                    onClick={() => setActiveFilter("approved")}
+                />
+                <Menu.Item
+                    name={`rejected (${proposalsMap.get("rejected").length})`}
+                    active={activeFilter === "rejected"}
+                    onClick={() => setActiveFilter("rejected")}
+                />
+                <Menu.Item
+                    name={`slashed (${proposalsMap.get("slashed").length})`}
+                    active={activeFilter === "slashed"}
+                    onClick={() => setActiveFilter("slashed")}
+                />
+            </Menu>
+
+            <Card.Group>
+                {proposalsMap.get(activeFilter).map((prop, idx) => (
+                    <ProposalPreview
+                        key={`${prop.title}-${idx}`}
+                        title={prop.title}
+                        description={prop.description}
+                        details={prop.details}
+                    />
+                ))}
+            </Card.Group>
+        </Container>
+    );
+}
+
+function filterProposals(filter, proposals) {
+    if (filter === "all") {
+        return proposals;
+    } else if (filter === "active") {
+        return proposals.filter((prop: any) => prop.details.stage === "active");
+    }
+
+    return proposals.filter((prop: any) => prop.finalized === filter);
+}

packages/joy-proposals/src/Proposal/index.tsx

@@ -0,0 +1,3 @@
+export { default as ProposalDetails } from "./ProposalDetails";
+export { default as ProposalPreview } from "./ProposalPreview";
+export { default as ProposalPreviewList } from "./ProposalPreviewList";

packages/joy-proposals/src/ProposalDetails/ProposalDetails.css

@@ -1,18 +0,0 @@
-.ProposalDetails {
-  /* Ovverrides Semantic UI for the details page.*/
-  .ui.items > .item:first-child {
-    margin: 1em 0;
-  }
-
-  .details-container {
-    display: flex;
-  }
-
-  .bold {
-    font-weight: 700;
-  }
-
-  .details-param {
-    display: flex;
-  }
-}

packages/joy-proposals/src/ProposalDetails/index.tsx

@@ -1 +0,0 @@
-export { default } from "./ProposalDetails";