even more styled components

components/List/List.module.css

@@ -0,0 +1,9 @@
+.unordered,
+.ordered {
+  margin-left: 1.5em;
+  padding-left: 0;
+}
+
+.item {
+  padding-left: 0.25em;
+}

components/List/List.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+
+import styles from "./List.module.css";
+
+type Props = {
+  children: ReactNode;
+};
+
+export const UnorderedList = ({ children, ...rest }: Props) => (
+  <ul className={styles.unordered} {...rest}>
+    {children}
+  </ul>
+);
+export const OrderedList = ({ children, ...rest }: Props) => (
+  <ol className={styles.ordered} {...rest}>
+    {children}
+  </ol>
+);
+
+// TODO: this is based on good faith that the children are all `<li>`s...
+export const ListItem = ({ children, ...rest }: Props) => (
+  <li className={styles.item} {...rest}>
+    {children}
+  </li>
+);