import { Hall } from "@/app/[language]/hall/type"; import AvatarDrawing from "@/components/AvatarDrawing"; import AvatarPlaceText from "@/components/AvatarPlaceText"; import AvatarTitle from "@/components/AvatarTitle"; import Link from "next/link"; import { ReactNode } from "react"; import { Placeholder, PlaceholderButton } from "react-bootstrap"; import Col from "react-bootstrap/Col"; import Row from "react-bootstrap/Row"; import Stack from "react-bootstrap/Stack"; export default function AvatarView({ avatarID, avatarName, text, avatarPlace, children, }: Hall & { avatarPlace: number; children?: ReactNode }) { return ( <Row as={Link} href={`/avatar/!${avatarID}`}> <Col xs="auto"> <AvatarPlaceText avatarPlace={avatarPlace} /> </Col> {children && <Col xs="auto">{children}</Col>} <Col xs="auto"> <AvatarDrawing avatarID={avatarID} /> </Col> <Col> <Stack gap={2}> <AvatarTitle avatarID={avatarID} avatarName={avatarName} /> {text} </Stack> </Col> </Row> ); } export function AvatarViewLoading() { return ( <Row> <Col xs="auto"> <PlaceholderButton /> </Col> <Col> <Stack gap={2}> <Stack gap={2} direction="horizontal"> <Placeholder xs={4} size="lg" bg="secondary" animation="wave" /> <Placeholder xs={8} size="lg" bg="secondary" animation="wave" /> </Stack> <Placeholder xs={2} size="lg" bg="secondary" animation="wave" /> </Stack> </Col> </Row> ); }