feat: add avatar/bio/links/names/pronouns to user page

Foxnouns.Frontend/app/components/StatusLine.tsx

@@ -0,0 +1,36 @@
+import {
+	CustomPreference,
+	defaultPreferences,
+	FieldEntry,
+	PreferenceSize,
+	Pronoun,
+} from "~/lib/api/user";
+import classNames from "classnames";
+import { ReactNode } from "react";
+import StatusIcon from "~/components/StatusIcon";
+
+export default function StatusLine({
+	entry,
+	preferences,
+	children,
+}: {
+	entry: FieldEntry | Pronoun;
+	preferences: Record<string, CustomPreference>;
+	children: ReactNode;
+}) {
+	const mergedPrefs = Object.assign({}, defaultPreferences, preferences);
+	const currentPref =
+		entry.status in mergedPrefs ? mergedPrefs[entry.status] : defaultPreferences.missing;
+
+	const classes = classNames({
+		"text-muted": currentPref.muted,
+		"fw-bold fs-5": currentPref.size == PreferenceSize.Large,
+		"fs-6": currentPref.size == PreferenceSize.Small,
+	});
+
+	return (
+		<span className={classes}>
+			<StatusIcon preferences={preferences} status={entry.status} /> {children}
+		</span>
+	);
+}