import AvatarView, { AvatarViewLoading, } from "@/app/[language]/hall/components/AvatarView"; import { Hall } from "@/app/[language]/hall/type"; import { FC } from "react"; import ListGroup from "react-bootstrap/ListGroup"; import ListGroupItem from "react-bootstrap/ListGroupItem"; export default function AvatarsView({ isLoaded, halls, Component, }: { isLoaded: boolean; halls: Hall[]; Component?: FC<{ value: number }>; }) { return ( <ListGroup> {isLoaded ? halls.map(({ avatarID, avatarName, text, value }, i) => ( <ListGroupItem key={avatarID}> <AvatarView avatarID={avatarID} avatarName={avatarName} text={text} value={value} avatarPlace={i + 1} > {Component && <Component value={value} />} </AvatarView> </ListGroupItem> )) : [...Array(50).keys()].map((i) => ( <ListGroupItem key={i}> <AvatarViewLoading /> </ListGroupItem> ))} </ListGroup> ); }