refactoring done

frontend/src/components/UserProfile/Favorites.jsx

@@ -0,0 +1,103 @@
+import "../../styles/UserProfile.scoped.scss";
+import { Link } from "react-router-dom";
+
+import { favorites, anime_data, manga_data } from "../../data";
+
+const Favorites = ({user_id}) => {
+  return <>
+
+      {
+            // we go throught 'favorites' data, to check only for this user. 'user_id' which he have favorites
+
+            favorites.map((item) => {
+              if (item.user_id == user_id) {
+                {
+                  /*show and render anime and manga */
+                }
+
+                {
+                  /* if anime_id is not null then it's anime  */
+                }
+                if (item.anime_id) {
+                  console.log(item.anime_id);
+                  console.log(anime_data[item.anime_id - 1]);
+                  console.log(anime_data[item.anime_id - 1].title);
+
+                  return (
+                    <>
+                      {/*item */}
+                      <Link
+                        to="/detailspage"
+                        state={{ id: item.anime_id, anime: true }}
+                        key={item.anime_id}
+                      >
+                        <div
+                          className="flex border-pinky h-28 border-2 rounded-2xl justify-start items-center overflow-hidden mt-8"
+                          style={{
+                            backgroundImage: `url("${
+                              anime_data[item.anime_id - 1].background_image
+                            }")`,
+
+                            backgroundRepeat: "no-repeat",
+                          }}
+                        >
+                          <div>
+                            <h2 className="fav_header p-20 mr-32 ">
+                              {anime_data[item.anime_id - 1].title}
+                            </h2>
+                          </div>
+                        </div>
+                      </Link>
+
+                      {/*item */}
+                    </>
+                  );
+                } else if (item.manga_id) {
+                  console.log(item.manga_id);
+                  console.log(manga_data[item.manga_id - 1]);
+                  console.log(manga_data[item.manga_id - 1].title);
+
+                  return (
+                    <>
+                      {/*item */}
+
+                      <Link
+                        to="/detailspage"
+                        state={{ id: item.manga_id, anime: false }}
+                        key={item.manga_id}
+                      >
+                        <div
+                          className="flex border-pinky h-28 border-2 rounded-2xl justify-start items-center overflow-hidden mt-8"
+                          style={{
+                            backgroundImage: `url("${
+                              manga_data[item.manga_id - 1].background_image
+                            }")`,
+
+                            backgroundRepeat: "no-repeat",
+                          }}
+                        >
+                          <div>
+                            <h2 className="fav_header p-20 mr-32 ">
+                              {manga_data[item.manga_id - 1].title}
+                            </h2>
+                          </div>
+                        </div>
+                      </Link>
+
+                      {/*item */}
+                    </>
+                  );
+                } else {
+                  console.log("nothing");
+                }
+              }
+            })
+          }
+
+
+
+
+  </>;
+};
+
+export { Favorites };

frontend/src/components/UserProfile/UserProfileHeader.jsx

@@ -0,0 +1,24 @@
+import "../../styles/UserProfile.scoped.scss";
+
+const UserProfileHeader = ({username,bio,profile_image}) => {
+  return (
+    <>
+      <div className="img_profile_back flex ">
+        <div className="basis-1/2 flex justify-center items-center">
+          <div className="flex p-24">
+            <div className="basis-1/4">
+              <img className="img_profile" src={profile_image} />
+            </div>
+
+            <div className="grow flex flex-col gap-y-1">
+              <h2 className="username ml-4 ">{username}</h2>
+              <p className="bio ml-4">{bio}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export { UserProfileHeader };