improve example usage page

site/docs/examples.mdx

@@ -8,7 +8,29 @@ If you've used our data and are willing to share your usage, please [submit a PR
 
 ## Daily Casualties / Summary Dataset
 
-- Latest total killed label on avatar maker ([View](https://ppm.techforpalestine.org/))
-- Line chart & count visualization ([View](https://genocide.club/talbroda))
-- Bar chart race ([View](https://hatemhosny.github.io/conflict-casualties/) | [Playground](https://livecodes.io/?x=id/5vjcrw2xdj8))
-- Summary count grid ([View](https://gazanumbers.jariyah.app/))
+import { ExampleUsageGrid } from "@site/src/components";
+
+<ExampleUsageGrid
+  examples={[
+    {
+      description: "Latest total killed label on avatar maker",
+      image: "/img/exampleuse/tfp-ppm.png",
+      link: "https://ppm.techforpalestine.org/",
+    },
+    {
+      description: "Line chart & count visualization",
+      image: "/img/exampleuse/linechart.png",
+      link: "https://genocide.club/hillel-fuld",
+    },
+    {
+      description: "Bar chart race",
+      image: "/img/exampleuse/racingbars.png",
+      link: "https://livecodes.io/?x=id/5vjcrw2xdj8",
+    },
+    {
+      description: "Summary count grid",
+      image: "/img/exampleuse/countgrid.png",
+      link: "https://gazanumbers.jariyah.app/",
+    },
+  ]}
+/>

site/src/components/ExampleUsageGrid/index.tsx

@@ -0,0 +1,44 @@
+import clsx from "clsx";
+import styles from "./styles.module.css";
+import { useMemo } from "react";
+
+type Props = {
+  examples: Array<{ image: string; description: string; link: string }>;
+};
+
+const numberPerRow = 2;
+
+export const ExampleUsageGrid = (props: Props) => {
+  const rows = useMemo(() => {
+    return props.examples.reduce((acc, example) => {
+      const newRow = Number.isInteger(acc.length / numberPerRow);
+      if (newRow) {
+        acc.push([example]);
+      } else {
+        acc[acc.length - 1].push(example);
+      }
+      return acc;
+    }, [] as Array<Props["examples"]>);
+  }, [props.examples]);
+
+  return (
+    <div>
+      {rows.map((row) => (
+        <div className="row">
+          {row.map((col) => (
+            <div className={clsx("col col--6")}>
+              <a href={col.link} target="_blank">
+                <div className={styles.exampleCard}>
+                  <img src={col.image} alt={col.description} />
+                  <div className={styles.exampleCardBody}>
+                    {col.description}
+                  </div>
+                </div>
+              </a>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};

site/src/components/ExampleUsageGrid/styles.module.css

@@ -0,0 +1,32 @@
+.exampleCard {
+  background-color: rgb(245, 245, 245);
+  box-shadow: 0px 0px 10px rgba(10, 10, 10, 0.2);
+  margin-bottom: 20px;
+  border-radius: 4px;
+  overflow: hidden;
+
+  &:hover {
+    box-shadow: 0px 0px 5px rgba(10, 10, 10, 0.1);
+  }
+
+  img {
+    max-width: 100%;
+    aspect-ratio: 4/2;
+    width: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+
+[data-theme="dark"] {
+  .exampleCard {
+    background-color: var(--ifm-navbar-background-color);
+  }
+}
+
+.exampleCardBody {
+  padding: 10px;
+  text-align: center;
+  font-weight: bold;
+}

site/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from "./DailyExplorer";
 export * from "./DailyReportStatsLabel";
+export * from "./ExampleUsageGrid";
 export * from "./ExternalLinkButton";
 export * from "./JSONFileLinks";
 export * from "./KilledListCountLabel";