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

frontend/components/BlueLink.tsx

@@ -0,0 +1,14 @@
+import Link from "next/link";
+
+export type Props = {
+  to: string;
+  children?: React.ReactNode;
+};
+
+export default function BlueLink({ to, children }: Props) {
+  return (
+    <Link href={to} className="hover:underline text-sky-500 dark:text-sky-400">
+      {children}
+    </Link>
+  );
+}

frontend/components/Card.tsx

@@ -0,0 +1,28 @@
+import React, { ReactNode } from "react";
+
+export type Props = {
+  children?: ReactNode | undefined;
+  title: string;
+  draggable?: boolean;
+  footer?: ReactNode | undefined;
+};
+
+export default function Card({ title, draggable, children, footer }: Props) {
+  return (
+    <div className="bg-slate-100 dark:bg-slate-700 rounded-md shadow">
+      <h1
+        className={`text-2xl p-2 border-b border-zinc-200 dark:border-slate-800${
+          draggable && " handle hover:cursor-grab"
+        }`}
+      >
+        {title}
+      </h1>
+      <div className="flex flex-col p-2">{children}</div>
+      {footer && (
+        <div className="p-2 border-t border-zinc-200 dark:border-slate-800">
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/components/FieldCard.tsx

@@ -0,0 +1,64 @@
+import {
+  HeartFill,
+  HandThumbsUp,
+  HandThumbsDown,
+  People,
+  EmojiLaughing,
+} from "react-bootstrap-icons";
+import BlueLink from "./BlueLink";
+
+import Card from "./Card";
+import type { Field } from "../lib/types";
+
+function linkPronoun(input: string) {
+  if (input.includes(" ") || input.split("/").length !== 5)
+    return <span>{input}</span>;
+
+  const [sub, obj, possDet, possPro, reflexive] = input.split("/");
+
+  return (
+    <BlueLink to={`/pronouns/${sub}/${obj}/${possDet}/${possPro}/${reflexive}`}>
+      <span>
+        {sub}/{obj}/{possDet}
+      </span>
+    </BlueLink>
+  );
+}
+
+export default function FieldCard({
+  field,
+  draggable,
+}: {
+  field: Field;
+  draggable?: boolean;
+}) {
+  return (
+    <Card title={field.name} draggable={draggable}>
+      {field.favourite?.map((entry) => (
+        <p className="text-lg font-bold" key={entry}>
+          <HeartFill className="inline" /> {linkPronoun(entry)}
+        </p>
+      ))}
+      {field.okay?.length !== 0 && (
+        <p>
+          <HandThumbsUp className="inline" /> {field.okay!.join(", ")}
+        </p>
+      )}
+      {field.jokingly?.length !== 0 && (
+        <p>
+          <EmojiLaughing className="inline" /> {field.jokingly!.join(", ")}
+        </p>
+      )}
+      {field.friends_only?.length !== 0 && (
+        <p>
+          <People className="inline" /> {field.friends_only!.join(", ")}
+        </p>
+      )}
+      {field.avoid?.length !== 0 && (
+        <p className="text-slate-600 dark:text-slate-400">
+          <HandThumbsDown className="inline" /> {field.avoid!.join(", ")}
+        </p>
+      )}
+    </Card>
+  );
+}

frontend/components/Navigation.tsx

@@ -72,8 +72,10 @@ export default function Navigation() {
         <div className="max-w-8xl mx-auto">
           <div className="py-4 mx-4">
             <div className="flex items-center">
-              <Link href="/">
-                <Logo />
+              <Link href="/" passHref>
+                <a>
+                  <Logo />
+                </a>
               </Link>
               <div className="ml-auto flex items-center">
                 <nav className="hidden lg:flex">