refactor(frontend): organize PlayerInfo

1 files changed, 25 insertions, 0 deletions

diff --git a/frontend/app/components/PlayerNameAndIcon.tsx b/frontend/app/components/PlayerNameAndIcon.tsx
new file mode 100644
index 0000000..e9536e3
--- /dev/null
+++ b/frontend/app/components/PlayerNameAndIcon.tsx
@@ -0,0 +1,25 @@
+import { PlayerProfile } from "../types/PlayerProfile";
+import UserIcon from "./UserIcon";
+
+type Props = {
+	label: string;
+	profile: PlayerProfile;
+};
+
+export default function PlayerNameAndIcon({ label, profile }: Props) {
+	return (
+		<div className="flex flex-col gap-6 my-auto">
+			<div className="flex flex-col gap-2">
+				<div className="text-4xl">{label}</div>
+				<div className="text-6xl">{profile.displayName}</div>
+			</div>
+			{profile.iconPath && (
+				<UserIcon
+					iconPath={profile.iconPath}
+					displayName={profile.displayName}
+					className="w-48 h-48"
+				/>
+			)}
+		</div>
+	);
+}