Link to all templates in the frontend

Author: linusha

frontend/src/components/DatawrapperLink.tsx

@@ -1,7 +1,10 @@
 import type { ComponentChildren } from "preact";
 import type { MouseEventHandler } from "preact/compat";
-import type { VotePositionCounts } from "../api";
+import type { Vote, VotePositionCounts } from "../api";
+import List from "../components/List";
+import ListItem from "../components/ListItem";
 import { formatDate } from "../lib/dates";
+import { Island } from "../lib/islands";
 
 type EmbedType = "members" | "groups" | "countries";
 
@@ -66,6 +69,71 @@ function DatawrapperLink({
   );
 }
 
+function DataWrapperLinkList({ vote }: { vote: Vote }) {
+  return (
+    <List space="xxs">
+      <ListItem
+        title={
+          <Island>
+            <DatawrapperLink
+              type="members"
+              voteId={vote.id}
+              title={vote.display_title || vote.id.toString()}
+              timestamp={vote.timestamp}
+              reference={vote.reference}
+              description={vote.description}
+              stats={vote.stats.total}
+            >
+              Individual votes
+            </DatawrapperLink>
+          </Island>
+        }
+        subtitle={"A searchable table containing each individual MEPs vote."}
+      />
+      <ListItem
+        title={
+          <Island>
+            <DatawrapperLink
+              type="groups"
+              voteId={vote.id}
+              title={vote.display_title || vote.id.toString()}
+              timestamp={vote.timestamp}
+              reference={vote.reference}
+              description={vote.description}
+              stats={vote.stats.total}
+            >
+              Votes by groups
+            </DatawrapperLink>
+          </Island>
+        }
+        subtitle={
+          "An interactive barchart showing how members of each group voted."
+        }
+      />
+      <ListItem
+        title={
+          <Island>
+            <DatawrapperLink
+              type="countries"
+              voteId={vote.id}
+              title={vote.display_title || vote.id.toString()}
+              timestamp={vote.timestamp}
+              reference={vote.reference}
+              description={vote.description}
+              stats={vote.stats.total}
+            >
+              Votes by countries
+            </DatawrapperLink>
+          </Island>
+        }
+        subtitle={
+          "An interactive barchart showing how MEPs from the different member states voted."
+        }
+      />
+    </List>
+  );
+}
+
 const GREEN = "rgb(0, 144, 118)";
 const RED = "rgb(199, 30, 29)";
 const BLUE = "rgb(29, 129, 162)";
@@ -288,3 +356,4 @@ function getPresetConfig(
 }
 
 export default DatawrapperLink;
+export { DataWrapperLinkList };

frontend/src/pages/VotePage.tsx

@@ -3,7 +3,7 @@ import App from "../components/App";
 import BaseLayout from "../components/BaseLayout";
 import Callout from "../components/Callout";
 import CopyrightLink from "../components/CopyrightLink";
-import DatawrapperLink from "../components/DatawrapperLink";
+import { DataWrapperLinkList } from "../components/DatawrapperLink";
 import ExternalLinks from "../components/ExternalLinks";
 import Footer from "../components/Footer";
 import PageNav from "../components/PageNav";
@@ -149,22 +149,11 @@ export const VotePage: Page<Vote> = ({ data }) => {
               <h2 id="embed" class="delta mb--xs">
                 Embed
               </h2>
-              <p>
-                Want to embed the results of this vote on your website? Use our{" "}
-                <Island>
-                  <DatawrapperLink
-                    voteId={data.id}
-                    title={data.display_title || data.id.toString()}
-                    timestamp={data.timestamp}
-                    reference={data.reference}
-                    description={data.description}
-                    stats={data.stats.total}
-                  >
-                    Datawrapper template
-                  </DatawrapperLink>
-                </Island>{" "}
-                to create an interactive table in just a few clicks.
+              <p class="mb--xs">
+                Want to embed the results of this vote on your website? Use one
+                of our Datawrapper templates:
               </p>
+              <DataWrapperLinkList vote={data} />
             </Wrapper>
           </div>
           <div class="px">