diff --git a/components/Reddit/RedditComment.tsx b/components/Reddit/RedditComment.tsx new file mode 100644 index 0000000..0f9d472 --- /dev/null +++ b/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 ( +
+ Comment +
+ by + u/{postAuthor} + from discussion + s +
+ in + {subreddit} +
+ ); +} diff --git a/components/RedditPost.tsx b/components/Reddit/RedditPost.tsx similarity index 67% rename from components/RedditPost.tsx rename to components/Reddit/RedditPost.tsx index 872fd18..734839e 100644 --- a/components/RedditPost.tsx +++ b/components/Reddit/RedditPost.tsx @@ -1,11 +1,12 @@ -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({ @@ -13,15 +14,16 @@ export default function RedditPost({ title, author, subreddit, -}: RedditEmbedProps) { + height, +}: RedditPostEmbedProps) { const { isDark } = useDarkMode(); useScript('https://embed.reddit.com/widgets.js'); return (
{title} diff --git a/components/Reddit/index.tsx b/components/Reddit/index.tsx new file mode 100644 index 0000000..bde8d86 --- /dev/null +++ b/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, +}); diff --git a/pages/_app.tsx b/pages/_app.tsx index f48860c..8da9891 100644 --- a/pages/_app.tsx +++ b/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 (