import { GetServerSideProps } from "next"; import Head from "next/head"; import fetchAPI from "../../../lib/fetch"; import { Name, Pronoun, User, WordStatus } from "../../../lib/types"; import FieldCard from "../../../components/FieldCard"; import Card from "../../../components/Card"; import ReactMarkdown from "react-markdown"; import Image from "next/image"; import { userState } from "../../../lib/state"; import { useRecoilValue } from "recoil"; import Link from "next/link"; import FallbackImage from "../../../components/FallbackImage"; import { ReactNode } from "react"; import { EmojiLaughing, HandThumbsDown, HandThumbsUp, HeartFill, People, } from "react-bootstrap-icons"; import BlueLink from "../../../components/BlueLink"; interface Props { user: User; } export default function Index({ user }: Props) { const isMeUser = useRecoilValue(userState)?.id === user.id; return ( <> @{user.username} - pronouns.cc {isMeUser && (
You are currently viewing your{" "} public profile.
Edit your profile
)}
{user.avatar_urls && user.avatar_urls.length !== 0 && ( )}
{user.display_name && (

{user.display_name}

)}

@{user.username}

{user.bio && ( {user.bio} )} {user.links?.length && (
{user.links.map((link, index) => ( {link} ))}
)}
{user.names?.length > 0 && (
{user.names.map((name, index) => ( ))}
)} {user.pronouns?.length > 0 && (
{user.pronouns.map((pronoun, index) => ( ))}
)}
{user.fields?.map((field, index) => ( ))}
); } const entryIcon = (status: WordStatus) => { let icon: ReactNode; switch (status) { case WordStatus.Favourite: icon = ; break; case WordStatus.Okay: icon = ; break; case WordStatus.Jokingly: icon = ; break; case WordStatus.FriendsOnly: icon = ; break; case WordStatus.Avoid: icon = ; break; } return icon; }; function NameEntry(props: { name: Name }) { const { name } = props; return (

{entryIcon(name.status)} {name.name}

); } function PronounEntry(props: { pronoun: Pronoun }) { const { pronoun } = props; return (

{entryIcon(pronoun.status)}{" "} {pronoun.display_text ?? pronoun.pronouns.split("/").slice(0, 2).join("/")}

); } export const getServerSideProps: GetServerSideProps = async (context) => { try { const user = await fetchAPI(`/users/${context.params!.user}`); return { props: { user } }; } catch (e) { console.log(e); return { notFound: true }; } };