rebased

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,33 +1,25 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { Body1Bold, Body2 } from '@/styles/fonts';
 import BackButton from '../../components/BackButton/BackButton';
 
 import {
   arrayOfFavorites,
-  addOrRemoveProductFromFavorite,
 } from '../../api/supabase/queries/user_queries';
 
 import NavBar from '../../components/NavBarFolder/NavBar';
 
 import {
-  FavoriteDiv,
   OutterFavoriteDiv,
   OutterBox,
-  ProductNameDiv,
-  HeartIcon,
-  TransparentButton,
-  ViewItem,
   Fullscreen,
 } from './styles';
 
 import { Product } from '../../schema/schema';
+import IndividualItem from './individualItem';
 
 export default function FavoritesPage() {
   const [Favorites, setFavorites] = useState<Product[]>([]);
-  const router = useRouter();
 
   async function fetchProducts() {
     const data = (await arrayOfFavorites()) as Product[];
@@ -37,12 +29,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 />
@@ -51,27 +37,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 })}
-              >
-                <HeartIcon />
-              </TransparentButton>
-            </FavoriteDiv>
+            <IndividualItem
+            key={favorite.id}
+            favorite={favorite}
+            setFavorites={setFavorites}
+            Favorites={Favorites}
+          />
           ))}
         </OutterFavoriteDiv>
       </OutterBox>

src/app/favorites/styles.ts

@@ -93,3 +93,19 @@ export const Fullscreen = styled.div`
   flex-direction: column;
   align-items: center;
 `;
+
+export const Hover = styled.div<{ $ishovering?: boolean }>`
+  visibility: ${props => (props.$ishovering ? 'visible' : 'hidden')};
+  margin-bottom: 7px;
+  transform: translate(-10px, 0px);
+  color: black;
+  border: none;
+  width: 156px;
+  height: 26px;
+  border-radius: 8px;
+  background: var(--Light-Periwinkle, #f4f7ff);
+  box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.2);
+  padding-top: 6px;
+  position: relative;
+  text-align: center;
+`;

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>
+  );
+}