chore: created a global mark as favorite component

[aaryan610]

What's new?

This PR creates a global mark as/remove from favorites component which can be reused everywhere.

Why was this needed?

1. To enhance reusability.
2. To maintain consistency, currently to depict whether something is favorite or not different colors are used in different places, cycles and modules use Amber, pages use Yellow, views use Orange.

Implementation

type Props = {
  buttonClassName?: string;
  iconClassName?: string;
  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
  selected: boolean;
};

Props used-

1. buttonClassName- To update the class name of the button containing the icon.
2. iconClassName- To update the class name of the icon itself.
3. onClick- Callback triggered on button click event.
4. selected- Boolean to check whether the item is favorite or not.

<button type="button" className={cn("h-4 w-4 grid place-items-center", buttonClassName)} onClick={onClick}>
  <Star
    className={cn(
      "h-4 w-4 text-custom-text-300 transition-all",
      {
        "fill-yellow-500 stroke-yellow-500": selected,
      },
      iconClassName
    )}
  />
</button>