import Head from "next/head";
import React from "react";
import {
EmojiLaughing,
HandThumbsDown,
HandThumbsUp,
HeartFill,
People,
} from "react-bootstrap-icons";
import ReactMarkdown from "react-markdown";
import { useRecoilValue } from "recoil";
import { Field, Label, LabelStatus, Person, User } from "../lib/api";
import { userState } from "../lib/state";
import BlueLink from "./BlueLink";
import Card from "./Card";
import FallbackImage from "./FallbackImage";
export default function PersonPage({ person }: { person: Person }) {
return (
<>
{`${person.fullHandle()} - pronouns.cc`}
{person instanceof User ? (
) : (
{`< ${person.display()}`}
)}
);
}
function PersonHead({ person }: { person: Person }) {
const { displayName, avatarUrls, bio, names, pronouns } = person;
let description = "";
const favNames = names.filter((x) => x.status === LabelStatus.Favourite);
const favPronouns = pronouns.filter(
(x) => x.status === LabelStatus.Favourite
);
if (favNames.length || favPronouns.length) {
description = `${person.shortHandle()}${
favNames.length
? ` goes by ${favNames.map((x) => x.display()).join(", ")}`
: ""
}${favNames.length && favPronouns.length ? " and" : ""}${
favPronouns.length
? `uses ${favPronouns
.map((x) => x.shortDisplay())
.join(", ")} pronouns.`
: ""
}`;
} else if (bio && bio !== "") {
description = `${bio.slice(0, 500)}${bio.length > 500 ? "…" : ""}`;
}
return (
{avatarUrls && avatarUrls.length > 0 && (
)}
);
}
function IsOwnUserPageNotice({ person }: { person: Person }) {
return useRecoilValue(userState)?.id === person.id ? (
You are currently viewing your public user profile.
Edit your profile
) : (
<>
);
}
function MemberList({ user, className }: { user: User; className?: string }) {
const partialMembers = user.partialMembers;
return (
Members
{partialMembers.map((partialMember) => (
-
{partialMember.displayName ?? partialMember.name}
))}
);
}
function PersonAvatar({ person }: { person: Person }) {
const { displayName, name, avatarUrls } = person;
return avatarUrls && avatarUrls.length !== 0 ? (
) : (
<>
);
}
function PersonInfo({ person }: { person: Person }) {
const { displayName, name, bio, links } = person;
return (
{/* name */}
{displayName === null ? name : displayName}
{/* handle */}
{person.fullHandle()}
{/* bio */}
{bio && (
{bio}
)}
{/* links */}
{links.length > 0 && (
{links.map((link, index) => (
{link}
))}
)}
{content.map((label, index) => (
))}
) : (
<>
);
}
function LabelStatusIcon({ status }: { status: LabelStatus }) {
return React.createElement(
{
[LabelStatus.Favourite]: HeartFill,
[LabelStatus.Okay]: HandThumbsUp,
[LabelStatus.Jokingly]: EmojiLaughing,
[LabelStatus.FriendsOnly]: People,
[LabelStatus.Avoid]: HandThumbsDown,
}[status],
{ className: "inline" }
);
}
function LabelsLine({
status,
texts,
}: {
status: LabelStatus;
texts: string[];
}) {
return !texts.length ? (
<>
) : (
{texts.join(", ")}
);
}
function LabelLine({ label }: { label: Label }) {
return ;
}
function FieldCardGrid({ fields }: { fields: Field[] }) {
return (
{fields.map((field, index) => (
))}
);
}
const labelStatusOrder: LabelStatus[] = [
LabelStatus.Favourite,
LabelStatus.Okay,
LabelStatus.Jokingly,
LabelStatus.FriendsOnly,
LabelStatus.Avoid,
];
function FieldCard({
field,
draggable,
}: {
field: Field;
draggable?: boolean;
}) {
return (
{labelStatusOrder.map((status, i) => (
x.status === status)
.map((x) => x.display())}
/>
))}
);
}