so it doesnt appear on all hearts

src/app/favorites/individualItem.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Body1Bold, Body2, Body3 } from '@/styles/fonts';
+
+import {
+  HeartIcon,
+  Hover,
+  FavoriteDiv,
+  ProductNameDiv,
+  ViewItem,
+  TransparentButton,
+} from './styles';
+
+import { addOrRemoveProductFromFavorite } from '../../api/supabase/queries/user_queries';
+
+import { Product } from '../../schema/schema';
+
+export default function IndividualItem(props: {
+  favorite: Product;
+  setFavorites: (category: Product[]) => void;
+  Favorites: Product[];
+}) {
+  const { favorite, Favorites, setFavorites } = props;
+  const router = useRouter();
+  const [hovering, setHovering] = useState(false);
+
+  async function clickFunctions(props2: { fav: Product }) {
+    const { fav } = props2;
+    addOrRemoveProductFromFavorite(fav, false);
+    setFavorites(Favorites.filter(Prod => Prod.id !== fav.id));
+  }
+
+  return (
+    <FavoriteDiv key={favorite.id}>
+      <img
+        src={favorite.photo}
+        alt={favorite.name}
+        style={{ width: '150px', height: '150px' }}
+      />
+
+      <ProductNameDiv>
+        <Body1Bold>{favorite.name}</Body1Bold>
+        <Body2>Category: {favorite.category}</Body2>
+        <ViewItem onClick={() => router.push(`/${favorite.id}`)}>
+          <Body2>View Item</Body2>
+        </ViewItem>
+      </ProductNameDiv>
+
+      <TransparentButton
+        onClick={() => clickFunctions({ fav: favorite })}
+        onMouseEnter={() => setHovering(true)}
+        onMouseLeave={() => setHovering(false)}
+      >
+        <Hover $ishovering={hovering}>
+          <Body3>Remove from favorites</Body3>
+        </Hover>
+        <HeartIcon />
+      </TransparentButton>
+    </FavoriteDiv>
+  );
+}

src/app/favorites/page.tsx

@@ -1,35 +1,19 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { Body1Bold, Body2, Body3 } from '@/styles/fonts';
 import BackButton from '../../components/BackButton/BackButton';
+import IndividualItem from './individualItem';
 
-import {
-  arrayOfFavorites,
-  addOrRemoveProductFromFavorite,
-} from '../../api/supabase/queries/user_queries';
+import { arrayOfFavorites } from '../../api/supabase/queries/user_queries';
 
 import NavBar from '../../components/NavBarFolder/NavBar';
 
-import {
-  FavoriteDiv,
-  OutterFavoriteDiv,
-  OutterBox,
-  ProductNameDiv,
-  HeartIcon,
-  TransparentButton,
-  ViewItem,
-  Fullscreen,
-  Hover,
-} from './styles';
+import { OutterFavoriteDiv, OutterBox, Fullscreen } from './styles';
 
 import { Product } from '../../schema/schema';
 
 export default function FavoritesPage() {
   const [Favorites, setFavorites] = useState<Product[]>([]);
-  const router = useRouter();
-  const [hovering, setHovering] = useState(false);
 
   async function fetchProducts() {
     const data = (await arrayOfFavorites()) as Product[];
@@ -39,12 +23,6 @@ export default function FavoritesPage() {
     fetchProducts();
   }, []);
 
-  async function clickFunctions(props: { fav: Product }) {
-    const { fav } = props;
-    addOrRemoveProductFromFavorite(fav, false);
-    setFavorites(Favorites.filter(Prod => Prod.id !== fav.id));
-  }
-
   return (
     <Fullscreen>
       <NavBar />
@@ -53,32 +31,12 @@ export default function FavoritesPage() {
         <h1>Favorites</h1>
         <OutterFavoriteDiv>
           {Favorites.map(favorite => (
-            <FavoriteDiv key={favorite.id}>
-              <img
-                src={favorite.photo}
-                alt={favorite.name}
-                style={{ width: '150px', height: '150px' }}
-              />
-
-              <ProductNameDiv>
-                <Body1Bold>{favorite.name}</Body1Bold>
-                <Body2>Category: {favorite.category}</Body2>
-                <ViewItem onClick={() => router.push(`/${favorite.id}`)}>
-                  <Body2>View Item</Body2>
-                </ViewItem>
-              </ProductNameDiv>
-
-              <TransparentButton
-                onClick={() => clickFunctions({ fav: favorite })}
-                onMouseEnter={() => setHovering(true)}
-                onMouseLeave={() => setHovering(false)}
-              >
-                <Hover $ishovering={hovering}>
-                  <Body3>Remove from favorites</Body3>
-                </Hover>
-                <HeartIcon />
-              </TransparentButton>
-            </FavoriteDiv>
+            <IndividualItem
+              key={favorite.id}
+              favorite={favorite}
+              setFavorites={setFavorites}
+              Favorites={Favorites}
+            />
           ))}
         </OutterFavoriteDiv>
       </OutterBox>

src/app/profileScreen/individualItem.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+import { Body1Bold, Body2, Body3 } from '@/styles/fonts';
+
+import { HeartIcon, Hover, FavoriteDiv, ProductNameDiv } from './styles';
+
+import { addOrRemoveProductFromFavorite } from '../../api/supabase/queries/user_queries';
+
+import { Product } from '../../schema/schema';
+import { TransparentButton } from '../favorites/styles';
+
+export default function IndividualItem(props: {
+  favorite: Product;
+  setFavorites: (category: Product[]) => void;
+  Favorites: Product[];
+}) {
+  const { favorite, Favorites, setFavorites } = props;
+  const [hovering, setHovering] = useState(false);
+
+  async function clickFunctions(props2: { fav: Product }) {
+    const { fav } = props2;
+    addOrRemoveProductFromFavorite(fav, false);
+    setFavorites(Favorites.filter(Prod => Prod.id !== fav.id));
+  }
+
+  return (
+    <FavoriteDiv key={favorite.id}>
+      <img
+        src={favorite.photo}
+        alt={favorite.name}
+        style={{ width: '75px', height: '75px' }}
+      />
+      <ProductNameDiv>
+        <Body1Bold>{favorite.name}</Body1Bold>
+        <Body2>Category: {favorite.category}</Body2>
+      </ProductNameDiv>
+      <TransparentButton
+        onClick={() => clickFunctions({ fav: favorite })}
+        onMouseEnter={() => setHovering(true)}
+        onMouseLeave={() => setHovering(false)}
+      >
+        <Hover $ishovering={hovering}>
+          <Body3>Remove from favorites</Body3>
+        </Hover>
+        <HeartIcon />
+      </TransparentButton>
+    </FavoriteDiv>
+  );
+}

src/app/profileScreen/page.tsx

@@ -13,7 +13,6 @@ import {
   Body2,
 } from '@/styles/fonts';
 import {
-  addOrRemoveProductFromFavorite,
   arrayOfFavorites,
   fetchUser,
   fetchUserAddress,
@@ -30,31 +29,21 @@ import {
   TextSpacing,
   OrderHistory,
   FavoritesContainer,
-  ProductNameDiv,
-  FavoriteDiv,
-  HeartIcon,
   BackButtonDiv,
   BlankSpace,
   HeaderDiv,
   Fullscreen,
-  Hover,
 } from './styles';
+import IndividualItem from './individualItem';
 import { signOut } from '../../api/supabase/auth/auth';
 import 'react-toastify/dist/ReactToastify.css';
-import { TransparentButton } from '../favorites/styles';
 
 function FavoriteSection(props: {
   Favorites: Product[];
   setFavorites: (category: Product[]) => void;
 }) {
   const { Favorites, setFavorites } = props;
-  const [hovering, setHovering] = useState(false);
 
-  async function clickFunctions(props2: { fav: Product }) {
-    const { fav } = props2;
-    addOrRemoveProductFromFavorite(fav, false);
-    setFavorites(Favorites.filter(Prod => Prod.id !== fav.id));
-  }
   return (
     <main>
       <FavoritesContainer>
@@ -63,27 +52,12 @@ function FavoriteSection(props: {
           <ViewAllButton destination="./favorites" />
         </HeaderDiv>
         {Favorites.slice(0, 2).map(favorite => (
-          <FavoriteDiv key={favorite.id}>
-            <img
-              src={favorite.photo}
-              alt={favorite.name}
-              style={{ width: '75px', height: '75px' }}
-            />
-            <ProductNameDiv>
-              <Body1Bold>{favorite.name}</Body1Bold>
-              <Body2>Category: {favorite.category}</Body2>
-            </ProductNameDiv>
-            <TransparentButton
-              onClick={() => clickFunctions({ fav: favorite })}
-              onMouseEnter={() => setHovering(true)}
-              onMouseLeave={() => setHovering(false)}
-            >
-              <Hover $ishovering={hovering}>
-                <Body3>Remove from favorites</Body3>
-              </Hover>
-              <HeartIcon />
-            </TransparentButton>
-          </FavoriteDiv>
+          <IndividualItem
+            key={favorite.id}
+            favorite={favorite}
+            setFavorites={setFavorites}
+            Favorites={Favorites}
+          />
         ))}
       </FavoritesContainer>
     </main>