42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
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;
|