Migrate to app router (#2254)

components/TweetEmbed/TweetEmbed.module.css

@@ -0,0 +1,8 @@
+.tweet {
+  /* help with layout shift */
+  min-height: 300px;
+}
+
+.tweet :global(.react-tweet-theme) {
+  --tweet-container-margin: 1.5rem auto;
+}

components/TweetEmbed/TweetEmbed.tsx

@@ -1,39 +1,21 @@
-import { useEffect, useRef } from "react";
 import Image from "next/image";
 import { Tweet } from "react-tweet";
-import useTheme from "../../hooks/useTheme";
-import { styled } from "../../lib/styles/stitches.config";
-import type { ComponentPropsWithoutRef, ElementRef } from "react";
+import clsx from "clsx";
+import type { ComponentPropsWithoutRef } from "react";
 
-const Wrapper = styled("div", {
-  minHeight: "300px", // help with layout shift
-
-  "& .react-tweet-theme": {
-    "--tweet-container-margin": "1.5rem auto",
-  },
-});
+import styles from "./TweetEmbed.module.css";
 
 export type TweetEmbedProps = ComponentPropsWithoutRef<typeof Tweet> & {
+  id: string;
   className?: string;
 };
 
 const TweetEmbed = ({ id, className, ...rest }: TweetEmbedProps) => {
-  const containerRef = useRef<ElementRef<typeof Wrapper>>(null);
-  const { activeTheme } = useTheme();
-
-  useEffect(() => {
-    if (containerRef.current) {
-      // setting 'data-theme' attribute of parent div changes the tweet's theme (no re-render necessary)
-      containerRef.current.dataset.theme = activeTheme;
-    }
-  }, [activeTheme]);
-
   return (
-    <Wrapper ref={containerRef} className={className}>
+    <div className={clsx(styles.tweet, className)}>
       <Tweet
         key={`tweet-${id}`}
         id={id}
-        apiUrl={`/api/tweet/?id=${id}`} // edge function at pages/api/tweet.ts
         components={{
           // https://react-tweet.vercel.app/twitter-theme/api-reference#custom-tweet-components
           // eslint-disable-next-line jsx-a11y/alt-text
@@ -43,7 +25,7 @@ const TweetEmbed = ({ id, className, ...rest }: TweetEmbedProps) => {
         }}
         {...rest}
       />
-    </Wrapper>
+    </div>
   );
 };