feat(frontend): add /u/[user]

2022-08-17 03:04:06 +02:00 · 2022-08-17 03:04:06 +02:00 · 36b7d26723
commit 36b7d26723
parent eec01dc070
9 changed files with 222 additions and 19 deletions
--- a/frontend/pages/u/[user]/index.tsx
+++ b/frontend/pages/u/[user]/index.tsx
@ -0,0 +1,92 @@
+import { GetServerSideProps } from "next";
+import Head from "next/head";
+import fetchAPI from "../../../lib/fetch";
+import { User } from "../../../lib/types";
+import FieldCard from "../../../components/FieldCard";
+import Card from "../../../components/Card";
+import ReactMarkdown from "react-markdown";
+
+interface Props {
+  user: User;
+}
+
+export default function Index({ user }: Props) {
+  return (
+    <>
+      <Head>
+        <title key="title">@{user.username} - pronouns.cc</title>
+      </Head>
+      <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_url && (
+            <img className="max-w-xs rounded-full" src={user.avatar_url} />
+          )}
+          <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 && user.fields?.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>
+        <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>
+    </>
+  );
+}
+
+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 };
+  }
+};