CSS modules ➡️ Stitches 🧵 (#799)

components/Comments/Comments.tsx

@@ -1,21 +1,29 @@
 import { memo } from "react";
 import { useTheme } from "next-themes";
-import classNames from "classnames";
 import { Giscus } from "@giscus/react";
+import { styled } from "../../lib/styles/stitches.config";
 import { giscusConfig } from "../../lib/config";
+import type { ComponentProps } from "react";
 import type { GiscusProps } from "@giscus/react";
 
-import styles from "./Comments.module.css";
+const Wrapper = styled("div", {
+  ".giscus": {
+    marginTop: "2em",
+    paddingTop: "2em",
+    borderTop: "2px solid $light",
+    minHeight: "350px",
+  },
+});
 
-export type CommentsProps = JSX.IntrinsicElements["div"] & {
+export type CommentsProps = ComponentProps<typeof Wrapper> & {
   title: string;
 };
 
-const Comments = ({ title, className, ...rest }: CommentsProps) => {
+const Comments = ({ title, ...rest }: CommentsProps) => {
   const { resolvedTheme } = useTheme();
 
   return (
-    <div className={classNames(styles.wrapper, className)} {...rest}>
+    <Wrapper {...rest}>
       <Giscus
         {...(giscusConfig as GiscusProps)}
         term={title}
@@ -24,7 +32,7 @@ const Comments = ({ title, className, ...rest }: CommentsProps) => {
         emitMetadata="0"
         theme={resolvedTheme === "dark" ? "dark" : "light"}
       />
-    </div>
+    </Wrapper>
   );
 };