fix: fix discord login page

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

@@ -1,7 +1,7 @@
 import { GetServerSideProps } from "next";
 import Head from "next/head";
 import fetchAPI from "../../../lib/fetch";
-import { User } from "../../../lib/types";
+import { Name, Pronoun, User, WordStatus } from "../../../lib/types";
 import FieldCard from "../../../components/FieldCard";
 import Card from "../../../components/Card";
 import ReactMarkdown from "react-markdown";
@@ -10,6 +10,8 @@ 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";
 
 interface Props {
   user: User;
@@ -46,23 +48,16 @@ export default function Index({ user }: Props) {
               urls={user.avatar_urls}
               alt={`@${user.username}'s avatar`}
             />
-            // eslint-disable-next-line @next/next/no-img-element
-            // <img
-            //   className="max-w-xs rounded-full"
-            //   src={user.avatar_url}
-            //   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"
-              }`}
+              className={`${user.display_name
+                ? "text-xl italic text-slate-600 dark:text-slate-400"
+                : "text-2xl font-bold"
+                }`}
             >
               @{user.username}
             </h3>
@@ -71,7 +66,7 @@ export default function Index({ user }: Props) {
                 {user.bio}
               </ReactMarkdown>
             )}
-            {user.links?.length && user.fields?.length && (
+            {user.links?.length && (
               <div className="flex flex-col mx-auto lg:ml-auto">
                 {user.links.map((link, index) => (
                   <a
@@ -87,30 +82,62 @@ export default function Index({ user }: Props) {
             )}
           </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>
           ))}
-          {user.links?.length && (
-            <Card title="Links">
-              {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>
-              ))}
-            </Card>
-          )}
         </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}`);