Merge pull request #241 from edenia/feat/homepage

feat(pages): changed tweets components
edenia · Dec 23, 2022 · 431d4fb · 431d4fb
2 parents b2de42f + c59da08
commit 431d4fb
Show file tree

Hide file tree

Showing 4 changed files with 491 additions and 441 deletions.
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "react-router-dom": "^6.4.2",
     "react-swipeable-views": "^0.14.0",
     "react-swipeable-views-utils": "^0.14.0",
-    "react-twitter-widgets": "^1.11.0",
+    "react-tweet-embed": "^2.0.0",
     "sharp": "^0.29.3",
     "subscriptions-transport-ws": "^0.11.0",
     "ual-anchor": "^1.3.0",

diff --git a/src/components/Home/Bottom/index.tsx b/src/components/Home/Bottom/index.tsx
@@ -1,23 +1,67 @@
-import { Tweet } from 'react-twitter-widgets'
+import TweetEmbed from 'react-tweet-embed'
+import { useRouter } from 'next/router'
 import clsx from 'clsx'
 
 import useStyles from './styles'
 
 const Bottom: React.FC = () => {
   const classes = useStyles()
+  const router = useRouter()
 
   return (
     <div className={classes.containerBottom}>
       <div className={clsx(classes.wrapperGrid, classes.twitter)}>
         <div className={classes.gridRow}>
           <div className={classes.gridItem}>
-            <Tweet tweetId='1606318293270372352' />
+            <TweetEmbed
+              tweetId='1606301335141220352'
+              placeholder={'loading'}
+              options={{
+                cards: 'hidden',
+                conversation: 'none',
+                lang: `${router?.locale !== 'cn' ? router?.locale : 'zh-cn'}`
+              }}
+            />
           </div>
           <div className={classes.gridItem}>
-            <Tweet tweetId='1606301335141220352' />
+            <TweetEmbed
+              tweetId='1606318293270372352'
+              options={{
+                cards: 'hidden',
+                conversation: 'none',
+                lang: `${router?.locale !== 'cn' ? router?.locale : 'zh-cn'}`
+              }}
+            />
+          </div>
+          <div className={classes.gridItem}>
+            <TweetEmbed
+              tweetId='1606091927300046850'
+              options={{
+                cards: 'hidden',
+                conversation: 'none',
+                lang: `${router?.locale !== 'cn' ? router?.locale : 'zh-cn'}`
+              }}
+            />
+          </div>
+          <div className={classes.gridItem}>
+            <TweetEmbed
+              tweetId='1578776363435032577'
+              options={{
+                cards: 'hidden',
+                conversation: 'none',
+                lang: `${router?.locale !== 'cn' ? router?.locale : 'zh-cn'}`
+              }}
+            />
           </div>
           <div className={classes.gridItem} id='cardBox1'>
-            <Tweet tweetId='1606324710446243846' />
+            <TweetEmbed
+              tweetId='1516036449698664452'
+              options={{
+                cards: 'hidden',
+                conversation: 'none',
+                lang: `${router?.locale !== 'cn' ? router?.locale : 'zh-cn'}`
+              }}
+            />
           </div>
         </div>
       </div>

diff --git a/src/components/Home/Bottom/styles.ts b/src/components/Home/Bottom/styles.ts
@@ -15,7 +15,7 @@ const Styles = makeStyles(theme => ({
       width: '90%'
     },
     [theme.breakpoints.up('md')]: {
-      width: '75%'
+      width: '95%'
     }
   },
   gridRow: {