From e84d928a11ab72a282c28cfe6482e2bb99441b99 Mon Sep 17 00:00:00 2001
From: Maxime Heckel <heckelmaxime@gmail.com>
Date: Fri, 5 Jan 2024 13:24:58 -0500
Subject: [PATCH] fix: Fix sever/client mismatch due to time/date on Tweet
 component (#673)

---
 core/components/Tweet/Tweet.tsx | 1 +
 pages/design.tsx                | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/core/components/Tweet/Tweet.tsx b/core/components/Tweet/Tweet.tsx
index 6622a6da8..4e6c48a89 100644
--- a/core/components/Tweet/Tweet.tsx
+++ b/core/components/Tweet/Tweet.tsx
@@ -178,6 +178,7 @@ const Tweet = (props: Props) => {
           <time
             title={`Time Posted: ${createdAt.toUTCString()}`}
             dateTime={createdAt.toISOString()}
+            suppressHydrationWarning
           >
             {format(createdAt, 'h:mm a - MMM d, y')}
           </time>
diff --git a/pages/design.tsx b/pages/design.tsx
index e615f963e..f837a4d22 100644
--- a/pages/design.tsx
+++ b/pages/design.tsx
@@ -32,7 +32,7 @@ import Logo from '@core/components/Logo';
 import Glow from '@core/components/Glow';
 import CodeBlock from '@core/components/Code/CodeBlock';
 import Seo from '@core/components/Seo';
-// import Tweet from '@core/components/Tweet';
+import Tweet from '@core/components/Tweet';
 import Layout from '@core/layout';
 import { getTweets } from 'lib/tweets';
 import dynamic from 'next/dynamic';
@@ -144,7 +144,7 @@ const Label = styled('p', {
   marginBottom: '8px',
 });
 
-export default function Design(_props: { tweets: Record<string, NewTweet> }) {
+export default function Design(props: { tweets: Record<string, NewTweet> }) {
   const { dark } = useTheme();
   const [showSearch, setShowSearch] = React.useState(false);
   const [email, setEmail] = React.useState('');
@@ -1290,7 +1290,7 @@ function sayHi(name) {
             </Button>
             <Search onClose={() => setShowSearch(false)} open={showSearch} />
           </Flex>
-          {/* <Flex
+          <Flex
             alignItems="start"
             as="section"
             css={{ alignSelf: 'stretch' }}
@@ -1300,7 +1300,7 @@ function sayHi(name) {
           >
             <H2>Tweet</H2>
             <Tweet tweet={props.tweets['1386013361809281024']} />
-          </Flex> */}
+          </Flex>
           <Flex
             alignItems="start"
             as="section"