feat: titles page

modules/frontend/src/pages/TitlePage/TitlePage.tsx

@@ -0,0 +1,64 @@
+// import React, { useEffect, useState } from "react";
+// import { useParams } from "react-router-dom";
+// import { DefaultService } from "../../api/services/DefaultService";
+// import type { User } from "../../api/models/User";
+// import styles from "./UserPage.module.css";
+
+// const UserPage: React.FC = () => {
+//   const { id } = useParams<{ id: string }>();
+//   const [user, setUser] = useState<User | null>(null);
+//   const [loading, setLoading] = useState(true);
+//   const [error, setError] = useState<string | null>(null);
+
+//   useEffect(() => {
+//     if (!id) return;
+
+//     const getTitleInfo = async () => {
+//       try {
+//         const userInfo = await DefaultService.getTitle(id, "all");
+//         setUser(userInfo);
+//       } catch (err) {
+//         console.error(err);
+//         setError("Failed to fetch user info.");
+//       } finally {
+//         setLoading(false);
+//       }
+//     };
+//     getTitleInfo();
+//   }, [id]);
+
+//   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;