pronounsfu/frontend/pages/u/[user]/index.tsx

177 lines
5.1 KiB
TypeScript

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 (
<>
<Head>
<title key="title">@{user.username} - pronouns.cc</title>
</Head>
{isMeUser && (
<div className="lg:w-1/3 mx-auto bg-slate-100 dark:bg-slate-700 shadow rounded-md p-2">
<span>
You are currently viewing your{" "}
<span className="font-bold">public</span> profile.
</span>
<br />
<BlueLink to="/edit/profile">Edit your profile</BlueLink>
</div>
)}
<div className="container mx-auto">
<div className="flex flex-col m-2 p-2 lg:flex-row justify-center lg:justify-start items-center space-y-4 lg:space-y-0 lg:space-x-16 lg:items-start border-b border-slate-200 dark:border-slate-700">
{user.avatar_urls && user.avatar_urls.length !== 0 && (
<FallbackImage
className="max-w-xs rounded-full"
urls={user.avatar_urls}
alt={`@${user.username}'s avatar`}
/>
)}
<div className="flex flex-col">
{user.display_name && (
<h1 className="text-2xl font-bold">{user.display_name}</h1>
)}
<h3
className={`${
user.display_name
? "text-xl italic text-slate-600 dark:text-slate-400"
: "text-2xl font-bold"
}`}
>
@{user.username}
</h3>
{user.bio && (
<ReactMarkdown className="prose dark:prose-invert prose-slate">
{user.bio}
</ReactMarkdown>
)}
{user.links?.length && (
<div className="flex flex-col mx-auto lg:ml-auto">
{user.links.map((link, index) => (
<a
key={index}
href={link}
rel="nofollow noopener noreferrer me"
className="hover:underline text-sky-500 dark:text-sky-400"
>
{link}
</a>
))}
</div>
)}
</div>
</div>
{user.names?.length > 0 && (
<div className="border-b border-slate-200 dark:border-slate-700">
{user.names.map((name, index) => (
<NameEntry name={name} key={index} />
))}
</div>
)}
{user.pronouns?.length > 0 && (
<div className="border-b border-slate-200 dark:border-slate-700">
{user.pronouns.map((pronoun, index) => (
<PronounEntry pronoun={pronoun} key={index} />
))}
</div>
)}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 py-2">
{user.fields?.map((field, index) => (
<FieldCard key={index} field={field}></FieldCard>
))}
</div>
</div>
</>
);
}
const entryIcon = (status: WordStatus) => {
let icon: ReactNode;
switch (status) {
case WordStatus.Favourite:
icon = <HeartFill className="inline" />;
break;
case WordStatus.Okay:
icon = <HandThumbsUp className="inline" />;
break;
case WordStatus.Jokingly:
icon = <EmojiLaughing className="inline" />;
break;
case WordStatus.FriendsOnly:
icon = <People className="inline" />;
break;
case WordStatus.Avoid:
icon = <HandThumbsDown className="inline" />;
break;
}
return icon;
};
function NameEntry(props: { name: Name }) {
const { name } = props;
return (
<p
className={`text-lg ${
name.status === WordStatus.Favourite && "font-bold"
}`}
>
{entryIcon(name.status)} {name.name}
</p>
);
}
function PronounEntry(props: { pronoun: Pronoun }) {
const { pronoun } = props;
return (
<p
className={`text-lg ${
pronoun.status === WordStatus.Favourite && "font-bold"
}`}
>
{entryIcon(pronoun.status)}{" "}
{pronoun.display_text ??
pronoun.pronouns.split("/").slice(0, 2).join("/")}
</p>
);
}
export const getServerSideProps: GetServerSideProps = async (context) => {
try {
const user = await fetchAPI<User>(`/users/${context.params!.user}`);
return { props: { user } };
} catch (e) {
console.log(e);
return { notFound: true };
}
};