import * as Sentry from '@sentry/nextjs';

const feedback = Sentry.feedbackIntegration({
  autoInject: false,
  colorScheme: 'light',
  buttonLabel: 'Give Feedback',
  messagePlaceholder: '',
  submitButtonLabel: 'Send Feedback',
  formTitle: 'Give Feedback',
  showBranding: false,
  isEmailRequired: false,
  submitBackground: 'rgba(72, 16, 193, 1)',
  submitBackgroundHover: 'rgb(172, 152, 254, 1)',
  submitBorder: 'rgb(172, 152, 254, 1)',
  fontFamily: 'Inter',
  showEmail: false,
  showName: false,
});

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  ignoreErrors: ['ResizeObserver loop completed with undelivered notifications'],
  integrations: [feedback],
});

### Steps to Reproduce

Create a custom component as per the documentation (doc is not up to date with latest change of interface from the SDK)

```jsx
import { BrowserClient, getClient } from '@sentry/react';

const SentryFeedbackButton = () => {
  const client = getClient<BrowserClient>();
  const feedback = client?.getIntegrationByName('Feedback');

  if (!feedback) {
    return null;
  }
 return(
    <button type="button" onClick={() => feedback.openDialog()}>
      Give me feedback
    </button>,
  );
};

export default SentryFeedbackButton;