Newer
Older
taehui / qwilight-fe / src / app / [language] / hall / components / AvatarView.tsx
import { Hall } from "@/app/[language]/hall/type";
import AvatarDrawing from "@/components/AvatarDrawing";
import AvatarTitle from "@/components/AvatarTitle";
import Link from "next/link";
import { Placeholder } 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 }: Hall) {
  return (
    <Row as={Link} href={`/avatar/!${avatarID}`}>
      <Col xs="auto">
        <AvatarDrawing avatarID={avatarID} />
      </Col>
      <Col>
        <Stack gap={2}>
          <AvatarTitle avatarID={avatarID} avatarName={avatarName} textID />
          {text}
        </Stack>
      </Col>
    </Row>
  );
}

export function AvatarViewLoading() {
  return (
    <Stack gap={2}>
      <Placeholder xs={12} size="lg" bg="secondary" animation="wave" />
      <Placeholder xs={6} size="xs" bg="secondary" animation="wave" />
    </Stack>
  );
}