tailwind-nextjs-blog/components/comments/Cusdis.tsx

import React, { useMemo, useState } from 'react';

import siteMetadata from '@/data/siteMetadata';
import { PostFrontMatter } from 'types/PostFrontMatter';
import { ReactCusdis } from 'react-cusdis';
import { useTheme } from 'next-themes';

interface Props {
  frontMatter: PostFrontMatter;
}

const Cusdis = ({ frontMatter }: Props) => {
  const { resolvedTheme } = useTheme();
  const commentsTheme = useMemo(() => {
    switch (resolvedTheme) {
      case 'light':
      case 'dark':
        return resolvedTheme;
      default:
        return 'auto';
    }
  }, [resolvedTheme]);
  return (
    <div className="my-2">
      <ReactCusdis
        key={commentsTheme}
        lang={siteMetadata.language?.toLocaleLowerCase()}
        attrs={{
          appId: siteMetadata.comment.cusdisConfig.appId,
          host: siteMetadata.comment.cusdisConfig.host,
          pageId: frontMatter.slug,
          pageUrl: window.location.href,
          pageTitle: frontMatter.title,
          theme: commentsTheme,
        }}
      />
    </div>
  );
};

export default Cusdis;