feat(frontend): show user profile fields

Foxnouns.Frontend/app/components/ProfileField.tsx

@@ -0,0 +1,25 @@
+import { CustomPreference, FieldEntry, Pronoun } from "~/lib/api/user";
+import StatusLine from "~/components/StatusLine";
+
+export default function ProfileField({
+	name,
+	entries,
+	preferences,
+}: {
+	name: string;
+	entries: Array<FieldEntry | Pronoun>;
+	preferences: Record<string, CustomPreference>;
+}) {
+	return (
+		<div className="col">
+			<h3>{name}</h3>
+			<ul className="list-unstyled fs-5">
+				{entries.map((e, i) => (
+					<li key={i}>
+						<StatusLine entry={e} preferences={preferences} />
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+}

Foxnouns.Frontend/app/components/StatusLine.tsx

@@ -8,15 +8,14 @@ import {
 import classNames from "classnames";
 import { ReactNode } from "react";
 import StatusIcon from "~/components/StatusIcon";
+import PronounLink from "~/components/PronounLink";
 
 export default function StatusLine({
 	entry,
 	preferences,
-	children,
 }: {
 	entry: FieldEntry | Pronoun;
 	preferences: Record<string, CustomPreference>;
-	children: ReactNode;
 }) {
 	const mergedPrefs = Object.assign({}, defaultPreferences, preferences);
 	const currentPref =
@@ -28,9 +27,19 @@ export default function StatusLine({
 		"fs-6": currentPref.size == PreferenceSize.Small,
 	});
 
+	if ("display_text" in entry) {
+		const pronoun = entry as Pronoun;
+		return (
+			<span className={classes}>
+				<StatusIcon preferences={preferences} status={entry.status} />{" "}
+				<PronounLink pronoun={pronoun} />
+			</span>
+		);
+	}
+
 	return (
 		<span className={classes}>
-			<StatusIcon preferences={preferences} status={entry.status} /> {children}
+			<StatusIcon preferences={preferences} status={entry.status} /> {entry.value}
 		</span>
 	);
 }

Foxnouns.Frontend/app/components/nav/BaseNavbar.tsx

@@ -3,7 +3,7 @@ import { Nav, Navbar } from "react-bootstrap";
 import { Link } from "@remix-run/react";
 import Logo from "~/components/nav/Logo";
 
-export default function BaseNavbar({ children }: { children?: ReactNode; }) {
+export default function BaseNavbar({ children }: { children?: ReactNode }) {
 	return (
 		<Navbar expand="lg" className={`mb-4 mx-2`}>
 			<Navbar.Brand to="/" as={Link}>

Foxnouns.Frontend/app/components/nav/Navbar.tsx

@@ -6,12 +6,7 @@ import { Nav, NavDropdown } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import BaseNavbar from "~/components/nav/BaseNavbar";
 
-export default function MainNavbar({
-	user,
-}: {
-	meta: Meta;
-	user?: User;
-}) {
+export default function MainNavbar({ user }: { meta: Meta; user?: User }) {
 	const fetcher = useFetcher();
 	const { t } = useTranslation();
 
@@ -35,10 +30,6 @@ export default function MainNavbar({
 			{t("navbar.log-in")}
 		</Nav.Link>
 	);
-	
-	return (
-		<BaseNavbar>
-			{userMenu}
-		</BaseNavbar>
-	);
+
+	return <BaseNavbar>{userMenu}</BaseNavbar>;
 }