How can I use Disqus in the app, help wanted

[Shaheer5]

'use client'

import { Comments as CommentsComponent } from 'pliny/comments'
import { useState } from 'react'
import siteMetadata from '@/data/siteMetadata'

export default function Comments({ slug }: { slug: string }) {
  const [loadComments, setLoadComments] = useState(false)

  if (!siteMetadata.comments?.provider) {
    return null
  }
  return (
    <>
      {loadComments ? (
        <CommentsComponent commentsConfig={siteMetadata.comments} slug={slug} />
      ) : (
        <button onClick={() => setLoadComments(true)}>Load Comments</button>
      )}
    </>
  )
}

=====================================================================

import * as react_jsx_runtime from 'react/jsx-runtime';
import { DisqusConfig } from './Disqus.js';
export { Disqus, DisqusProps } from './Disqus.js';
import { GiscusConfig } from './Giscus.js';
export { Giscus, GiscusProps } from './Giscus.js';
import { UtterancesConfig } from './Utterances.js';
export { Utterances, UtterancesProps } from './Utterances.js';
import '@giscus/react';

declare global {
    interface Window {
        disqus_config?: (...args: any[]) => void;
        DISQUS?: (...args: any[]) => void;
    }
}
type CommentsConfig = GiscusConfig | DisqusConfig | UtterancesConfig;
/**
 * @example
 * const comments: CommentsConfig = {
 *   provider: 'giscus', // supported providers: giscus, utterances, disqus
 *   giscusConfig: {
 *     // Visit the link below, and follow the steps in the 'configuration' section
 *     // https://giscus.app/
 *     repo: process.env.NEXT_PUBLIC_GISCUS_REPO,
 *     repositoryId: process.env.NEXT_PUBLIC_GISCUS_REPOSITORY_ID,
 *     category: process.env.NEXT_PUBLIC_GISCUS_CATEGORY,
 *     categoryId: process.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID,
 *     mapping: 'pathname', // supported options: pathname, url, title
 *     reactions: '1', // Emoji reactions: 1 = enable / 0 = disable
 *     // Send discussion metadata periodically to the parent window: 1 = enable / 0 = disable
 *     metadata: '0',
 *     // theme example: light, dark, dark_dimmed, dark_high_contrast
 *     // transparent_dark, preferred_color_scheme, custom
 *     theme: 'light',
 *     // theme when dark mode
 *     darkTheme: 'transparent_dark',
 *     // If the theme option above is set to 'custom`
 *     // please provide a link below to your custom theme css file.
 *     // example: https://giscus.app/themes/custom_example.css
 *     themeURL: '',
 *   },
 * }
 *
 */
interface CommentsProps {
    commentsConfig: CommentsConfig;
    slug?: string;
}
/**
 * Supports Giscus, Utterances or Disqus
 * If you want to use a comments provider you have to add it to the
 * content security policy in the `next.config.js` file.
 * slug is used in disqus to identify the page
 *
 * @param {CommentsProps} { comments, slug }
 * @return {*}
 */
declare const Comments: ({ commentsConfig, slug }: CommentsProps) => react_jsx_runtime.JSX.Element;

export { Comments, DisqusConfig, type CommentsConfig, type CommentsProps, GiscusConfig, UtterancesConfig };

[PxlSyl]

Hello, you must modify the sitemetadata.js file and add disqus as your comment provider, this is the only thing you have to do and it's not related to the files you provided here!

[Shaheer5]

Oh Thank you so much.