import Title from "@/components/Title"; import useGetTitle from "@/query/useGetTitle"; import { DetailedHTMLProps, HTMLAttributes } from "react"; export default function AvatarTitle({ avatarID, avatarName, textID = false, ...props }: { avatarID?: string; avatarName?: string; textID?: boolean; } & DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>) { const { data: { title, titleColor }, isFetched: isTitleLoaded, } = useGetTitle(avatarID); if (!avatarName) { return null; } return ( <span {...props}> {isTitleLoaded && ( <> <Title title={title} titleColor={titleColor} />{" "} </> )} {avatarName} {textID && avatarID && ` (${avatarID})`} </span> ); }