FavoritesList

The FavoritesList component is used to display a list of the user’s favorite content in a clean, responsive, and scrollable layout. It also allows the user to remove items from their favorites list.

It is available from @zezosoft/zezo-ott-react-ui-kit.

✨ Features

Displays a list of favorite items with poster, title, and metadata
Supports loading state while data is fetched
Custom empty state message
Built-in onRemove handler to support removing a favorite
Responsive design

🔌 Props

Prop	Type	Required	Description
`items`	`IFavoriteContentItem[]`	✅ Yes	List of favorite items to display
`onRemove`	`(id: string) => void`	❌ No	Callback when the user removes a favorite item
`isLoading`	`boolean`	❌ No	Show loading placeholders when data is being fetched
`emptyMessage`	`string`	❌ No	Message shown when the list is empty

ℹ️ The Content type should match your backend schema. Typically, it includes id, title, poster, and other media metadata.

📦 Example


"use client";
import React from "react";
import { FavoritesList as ZezoOttFavorites } from "@zezosoft/zezo-ott-react-ui-kit";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import toast from "react-hot-toast";
import { zezoClient } from "@/lib/zezoClient";
 
const FavoriteUI = () => {
  const queryClient = useQueryClient();
 
  const { data: favorites, isLoading } = useQuery({
    queryKey: ["favorites"],
    queryFn: () => zezoClient().favorites.get(),
  });
 
  const deleteMutation = useMutation({
    mutationKey: ["removeFavorite"],
    mutationFn: (contentId: string) =>
      zezoClient().favorites.removeFromFavorites({ id: contentId }),
    onSuccess: (result) => {
      if (result.data === "success") {
        toast.success("Removed from Favorites");
        queryClient.invalidateQueries({ queryKey: ["favorites"] });
      } else {
        toast.error(result?.data || "Something went wrong");
      }
    },
    onError: (error) => {
      toast.error(error?.message || "Something went wrong");
    },
  });
 
  return (
    <div className="px-10 py-6 text-white">
      <ZezoOttFavorites
        items={favorites?.data || []}
        isLoading={isLoading}
        onRemove={(contentId: string) => deleteMutation.mutate(contentId)}
        emptyMessage="No favorites yet. Start adding some!"
      />
    </div>
  );
};
 
export default FavoriteUI;

🖼️ UI Preview

Here’s how the Favorite component looks in action:

Search UI

📁 Notes

Make sure React Query is properly initialized using QueryClientProvider at the root of your app (e.g., app/layout.tsx).
Add <Toaster /> from react-hot-toast inside your root layout or provider to enable toast notifications.
The items prop passed to FavoritesList must follow this shape: