feat: files and components

src/renderer/src/components/sidebar/sidebar-profile.tsx

@@ -11,7 +11,7 @@ export function SidebarProfile() {
   const [isUserProfileLoading, setIsUserProfileLoading] = useState(true);
 
   const handleClickProfile = () => {
-    navigate(`/profile/${userProfile!.id}`);
+    navigate(`/user/${userProfile!.id}`);
   };
 
   const handleClickLogin = () => {

src/renderer/src/main.tsx

@@ -27,7 +27,7 @@ import {
 import { store } from "./store";
 
 import * as resources from "@locales";
-import { Profile } from "./pages/profile/profile";
+import { User } from "./pages/user/user";
 
 i18n
   .use(LanguageDetector)
@@ -55,7 +55,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
             <Route path="/game/:shop/:objectID" Component={GameDetails} />
             <Route path="/search" Component={SearchResults} />
             <Route path="/settings" Component={Settings} />
-            <Route path="profile/:username" Component={Profile} />
+            <Route path="/user/:username" Component={User} />
           </Route>
         </Routes>
       </HashRouter>

src/renderer/src/pages/user/user-content.tsx

@@ -1,6 +1,6 @@
 import { ProfileGame, UserProfile } from "@types";
 import cn from "classnames";
-import * as styles from "./profile.css";
+import * as styles from "./user.css";
 import { SPACING_UNIT, vars } from "@renderer/theme.css";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -16,7 +16,7 @@ export interface ProfileContentProps {
   userProfile: UserProfile;
 }
 
-export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
+export const UserContent = ({ userProfile }: ProfileContentProps) => {
   const { t, i18n } = useTranslation("user_profile");
 
   const navigate = useNavigate();

src/renderer/src/pages/user/user-skeleton.tsx

@@ -1,7 +1,7 @@
 import Skeleton from "react-loading-skeleton";
-import * as styles from "./profile.css";
+import * as styles from "./user.css";
 
-export const ProfileSkeleton = () => {
+export const UserSkeleton = () => {
   return (
     <>
       <Skeleton className={styles.profileHeaderSkeleton} />

src/renderer/src/pages/user/user.tsx

@@ -3,13 +3,13 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { setHeaderTitle } from "@renderer/features";
 import { useAppDispatch } from "@renderer/hooks";
-import { ProfileSkeleton } from "./profile-skeleton";
+import { UserSkeleton } from "./user-skeleton";
-import { ProfileContent } from "./profile-content";
+import { UserContent } from "./user-content";
 import { SkeletonTheme } from "react-loading-skeleton";
 import { vars } from "@renderer/theme.css";
-import * as styles from "./profile.css";
+import * as styles from "./user.css";
 
-export const Profile = () => {
+export const User = () => {
   const { username } = useParams();
   const [userProfile, setUserProfile] = useState<UserProfile>();
 
@@ -28,9 +28,9 @@ export const Profile = () => {
     <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
       <div className={styles.wrapper}>
         {userProfile ? (
-          <ProfileContent userProfile={userProfile} />
+          <UserContent userProfile={userProfile} />
         ) : (
-          <ProfileSkeleton />
+          <UserSkeleton />
         )}
       </div>
     </SkeletonTheme>