FavoritesList

import FavoritesList from "@/components/zezo/users/FavoritesList/FavoritesList";
import type { IFavoriteContentItem } from "@zezosoft/zezo-ott-api-client";

// Fetch favorites from your API
const fetchFavorites = async () => {
  const response = await fetch("/api/favorites");
  const data = await response.json();
  return data.data; // IFavoriteContentItem[]
};

function FavoritesPage() {
  const [favorites, setFavorites] = React.useState<IFavoriteContentItem[]>([]);
  const [isRemoving, setIsRemoving] = React.useState(false);

  React.useEffect(() => {
    fetchFavorites().then(setFavorites);
  }, []);

  const handleRemove = async (contentId: string) => {
    setIsRemoving(true);
    try {
      await fetch(`/api/favorites/${contentId}`, {
        method: "DELETE",
      });
      setFavorites(prev => 
        prev.filter(item => item.content._id !== contentId)
      );
      toast.success("Removed from favorites");
    } catch (error) {
      toast.error("Failed to remove favorite");
    } finally {
      setIsRemoving(false);
    }
  };

  return (
    <FavoritesList
      items={favorites}
      onRemove={handleRemove}
      isLoading={isRemoving}
      emptyMessage="You haven&apos;t added any favorites yet"
    />
  );
}

import type { IFavoriteContentItem } from "@zezosoft/zezo-ott-api-client";

// IFavoriteContentItem structure:
interface IFavoriteContentItem {
  _id: string;                    // Favorite item ID
  content: {
    _id: string;                   // Content ID
    poster: string;                // Poster image URL
    // ... other content fields
  };
}

npm install @zezosoft/zezo-ott-api-client framer-motion lucide-react

# Or with pnpm
pnpm add @zezosoft/zezo-ott-api-client framer-motion lucide-react

# Or with yarn
yarn add @zezosoft/zezo-ott-api-client framer-motion lucide-react