feat/refactor: reddit comments (#104)

components/Reddit/RedditComment.tsx

@@ -0,0 +1,40 @@
+import useDarkMode from '../../hooks/useDarkMode';
+import useScript from '../../hooks/useScript';
+
+interface RedditCommentEmbedProps {
+  commentUrl: string;
+  postAuthor: string;
+  discussionUrl: string;
+  subreddit: string;
+  height: number;
+}
+
+export default function RedditComment({
+  commentUrl,
+  postAuthor,
+  discussionUrl,
+  subreddit,
+  height,
+}: RedditCommentEmbedProps) {
+  const { isDark } = useDarkMode();
+  useScript('https://embed.reddit.com/widgets.js');
+
+  return (
+    <blockquote
+      className="reddit-embed-bq"
+      style={{ height: `${height.toString()}px` }}
+      data-embed-height={height.toString()}
+      data-embed-theme={isDark ? 'dark' : 'light'}
+    >
+      <a href={commentUrl}>Comment</a>
+      <br />
+      by
+      <a href={`https://www.reddit.com/user/${postAuthor}/`}>u/{postAuthor}</a>
+      from discussion
+      <a href={discussionUrl}>s</a>
+      <br />
+      in
+      <a href={`https://www.reddit.com/r/${subreddit}/`}>{subreddit}</a>
+    </blockquote>
+  );
+}

components/RedditPost.tsx → components/Reddit/RedditPost.tsx

@@ -1,27 +1,29 @@
-import useDarkMode from '../hooks/useDarkMode';
-import useScript from '../hooks/useScript';
+import useDarkMode from '../../hooks/useDarkMode';
+import useScript from '../../hooks/useScript';
 
-interface RedditEmbedProps {
+interface RedditPostEmbedProps {
   url: string;
   title: string;
   author: string;
   subreddit: string;
+  height: number;
 }
 
 export default function RedditPost({
   url,
   title,
   author,
   subreddit,
-}: RedditEmbedProps) {
+  height,
+}: RedditPostEmbedProps) {
   const { isDark } = useDarkMode();
   useScript('https://embed.reddit.com/widgets.js');
 
   return (
     <blockquote
       className="reddit-embed-bq"
-      style={{ height: '316px' }}
-      data-embed-height="316"
+      style={{ height: `${height.toString()}px` }}
+      data-embed-height={height.toString()}
       data-embed-theme={isDark ? 'dark' : 'light'}
     >
       <a href={url}>{title}</a>

components/Reddit/index.tsx

@@ -0,0 +1,9 @@
+import dynamic from 'next/dynamic';
+
+export const RedditPost = dynamic(() => import('./RedditPost'), {
+  ssr: false,
+});
+
+export const RedditComment = dynamic(() => import('./RedditComment'), {
+  ssr: false,
+});

pages/_app.tsx

@@ -2,14 +2,11 @@
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 import { MDXProvider } from '@mdx-js/react';
-import dynamic from 'next/dynamic';
 
 import Tweet from '../components/Tweet';
+import { RedditPost, RedditComment } from '../components/Reddit';
 
-const RedditPost = dynamic(() => import('../components/RedditPost'), {
-  ssr: false,
-});
-const components = { Tweet, RedditPost };
+const components = { Tweet, RedditPost, RedditComment };
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (