69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
import Chip from "components/Chip";
|
|
import { RecorderChipFragment } from "graphql/generated";
|
|
import { AppStaticProps } from "queries/getAppStaticProps";
|
|
import Button from "./Button";
|
|
import Img, { ImageQuality } from "./Img";
|
|
import ToolTip from "./ToolTip";
|
|
|
|
interface Props {
|
|
className?: string;
|
|
recorder: RecorderChipFragment;
|
|
langui: AppStaticProps["langui"];
|
|
}
|
|
|
|
export default function RecorderChip(props: Props): JSX.Element {
|
|
const { recorder, langui } = props;
|
|
return (
|
|
<ToolTip
|
|
content={
|
|
<div className="text-left p-2 py-5 grid gap-8">
|
|
<div className="grid grid-flow-col gap-6 place-items-center place-content-start">
|
|
{recorder.avatar?.data?.attributes && (
|
|
<Img
|
|
className="w-20 rounded-full border-4 border-mid"
|
|
image={recorder.avatar?.data.attributes}
|
|
quality={ImageQuality.Small}
|
|
rawImg
|
|
/>
|
|
)}
|
|
<div className="grid gap-2">
|
|
<h3 className=" text-2xl">{recorder.username}</h3>
|
|
{recorder.languages?.data && recorder.languages.data.length > 0 && (
|
|
<div className="flex flex-row flex-wrap gap-1">
|
|
<p>{langui.languages}:</p>
|
|
{recorder.languages.data.map((language) => (
|
|
<>
|
|
{language.attributes && (
|
|
<Chip key={language.attributes.code}>
|
|
{language.attributes.code.toUpperCase()}
|
|
</Chip>
|
|
)}
|
|
</>
|
|
))}
|
|
</div>
|
|
)}
|
|
{recorder.pronouns && (
|
|
<div className="flex flex-row flex-wrap gap-1">
|
|
<p>{langui.pronouns}:</p>
|
|
<Chip>{recorder.pronouns}</Chip>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{recorder.bio?.[0] && <p>{recorder.bio[0].bio}</p>}
|
|
|
|
<Button className="cursor-not-allowed">View profile</Button>
|
|
</div>
|
|
}
|
|
placement="top"
|
|
>
|
|
<Chip key={recorder.anonymous_code}>
|
|
{recorder.anonymize
|
|
? `Recorder#${recorder.anonymous_code}`
|
|
: recorder.username}
|
|
</Chip>
|
|
</ToolTip>
|
|
);
|
|
}
|