Permission notification

import {
  OwnCapability,
  PermissionNotification,
  Restricted,
  useRequestPermission,
  useCallStateHooks,
} from "@stream-io/video-react-sdk";
import MyIcon from "../Icon";

export type ToggleAudioPublishingButtonProps = {
  // props ...
};

export const ToggleAudioPublishingButton = (
  props: ToggleAudioPublishingButtonProps,
) => {
  const { hasPermission, requestPermission, isAwaitingPermission } =
    useRequestPermission(OwnCapability.SEND_AUDIO);

  const { useMicrophoneState } = useCallStateHooks();
  const { microphone } = useMicrophoneState();

  return (
    <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
      <PermissionNotification
        permission={OwnCapability.SEND_AUDIO}
        isAwaitingApproval={isAwaitingPermission}
        messageApproved="You can now speak."
        messageAwaitingApproval="Awaiting for an approval to speak."
        messageRevoked="You can no longer speak."
      >
        <MyButton
          onClick={async () => {
            if (!hasPermission) {
              await requestPermission();
            } else {
              await microphone.toggle();
            }
          }}
        >
          <MyIcon />
        </MyButton>
      </PermissionNotification>
    </Restricted>
  );
};