32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
/** 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">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<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>)
|
|
}
|