Continued updating the code to work with entities better

src/components/UserDisplayList.tsx

@@ -0,0 +1,30 @@
+/** eslint-disable @next/next/no-img-element */
+import { User } from "@/interfaces/user"
+
+interface Props {
+  users: User[]
+  title: string;
+}
+
+const UserDisplay = (displayUser: User) => (
+  <div className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
+    <img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
+    <div className="flex flex-col gap-1 items-start">
+      <span>{displayUser.name}</span>
+      <span className="text-sm opacity-75">{displayUser.email}</span>
+    </div>
+  </div>
+);
+
+export default function UserDisplayList({ title, users }: Props) {
+  return (<div className="bg-white border shadow flex flex-col rounded-xl w-full">
+    <span className="p-4">{title}</span>
+    <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
+      {users
+        .slice(0, 10)
+        .map((x) => (
+          <UserDisplay key={x.id} {...x} />
+        ))}
+    </div>
+  </div>)
+}