feat: created UserPage.tsx

modules/frontend/src/components/UserPage/UserPage.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from "react";
+import { DefaultService } from "../../api/services/DefaultService"; // adjust path
+import type { User } from "../../api/models/User";
+import styles from "./UserPage.module.css";
+
+const UserPage: React.FC = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const getUserInfo = async () => {
+      try {
+        const userInfo = await DefaultService.getUsers("1", "all");
+        setUser(userInfo);
+      } catch (err) {
+        console.error(err);
+        setError("Failed to fetch user info.");
+      } finally {
+        setLoading(false);
+      }
+    };
+    getUserInfo();
+  }, []);
+
+  if (loading) return <div className={styles.loader}>Loading...</div>;
+  if (error) return <div className={styles.error}>{error}</div>;
+  if (!user) return <div className={styles.error}>User not found.</div>;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <div className={styles.avatar}>
+          {user.avatar_id ? (
+            <img
+              src={`/images/${user.avatar_id}.png`}
+              alt="User Avatar"
+              className={styles.avatarImg}
+            />
+          ) : (
+            <div className={styles.avatarPlaceholder}>
+              {user.disp_name?.[0] || "U"}
+            </div>
+          )}
+        </div>
+
+        <div className={styles.info}>
+          <h1 className={styles.name}>{user.disp_name || user.nickname}</h1>
+          <p className={styles.nickname}>@{user.nickname}</p>
+          {user.user_desc && <p className={styles.desc}>{user.user_desc}</p>}
+          <p className={styles.created}>
+            Joined: {new Date(user.creation_date).toLocaleDateString()}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserPage;