let download images via ingest now

components/select.js

@@ -1,5 +1,43 @@
+import Image from "next/image";
+import styles from "../styles/Components.module.css";
+
 export default function Select(props) {
-  const { data, onSelect } = props;
-  console.log(data);
-  return <div></div>;
+  const { data, onSelect, selected = {} } = props;
+  console.log("data", data, "selected", selected);
+  return (
+    <div className={styles.select}>
+      {data &&
+        data.map((border, index) => {
+          return (
+            <div
+              className={[
+                styles.borderKeeper,
+                selected == border.id ? styles.selected : undefined,
+              ].join(" ")}
+              key={border.id}>
+              <Image
+                className={styles.userImage}
+                src="/user.png"
+                alt="user image"
+                width={128}
+                height={128}
+                onClick={(ev) => {
+                  onSelect(border.id);
+                }}
+              />
+              <Image
+                className={styles.borderImage}
+                src={`/images/${border.imageName}`}
+                alt={`border with id ${border.id}`}
+                width={132}
+                height={132}
+                onClick={(ev) => {
+                  onSelect(border.id);
+                }}
+              />
+            </div>
+          );
+        })}
+    </div>
+  );
 }

components/userInfo.js

@@ -2,15 +2,9 @@ import { useSession, signIn, signOut } from "next-auth/react";
 import { useEffect, useState } from "react";
 import styles from "../styles/Components.module.css";
 
-export default function UserInfo() {
+export default function UserInfo(props) {
   const { data: session } = useSession();
-  const [borderData, setBorderData] = useState(null);
-
-  useEffect(() => {
-    fetch("api/user/border/@me")
-      .then((res) => res.json())
-      .then((data) => setBorderData(data));
-  }, []);
+  const { borderData } = props;
 
   return (
     <div>