modified: src/components/TweetCarousael/index.jsx

solved issue #761 modified: tailwind.config.js added new breakpoint xsm @ 370px
WeMakeDevs · Aug 27, 2023 · 5d8e336 · 5d8e336
1 parent 75f37a0
commit 5d8e336
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 17 deletions.
diff --git a/src/components/TweetCarousael/index.jsx b/src/components/TweetCarousael/index.jsx
@@ -65,25 +65,39 @@ function TweetCarousael({ tweetId, setTweetId }) {
             }
             showDots
             loop
+            responsiveLayout={[
+              {
+                breakpoint: 1380,
+                cols: 2,
+                gap: 5,
+              },
+              {
+                breakpoint: 640,
+                cols: 1,
+                gap: 10,
+              },
+            ]}
           >
             {tweetId?.map((id) => (
-              <Carousel.Item
-                style={{
-                  width: '99%',
-                }}
-                key={id}
-              >
-                <Tweet
-                  tweetId={id}
-                  options={{ theme: 'dark', conversation: 'none' }}
-                  onLoad={() => {
-                    setHideTweetPost(false);
-                  }}
-                  renderError={() => {
-                    setHide(id);
-                    return <div style={{ display: 'none' }}></div>;
-                  }}
-                />
+              <Carousel.Item key={id}>
+                {/* normally width is set to 95% | for screens <= 640px width=90% | for screens <= 370px width=85% */}
+                <div className='w-[95%] max-sm:w-[90%] max-xsm:w-[85%]'>
+                  <Tweet
+                    tweetId={id}
+                    options={{
+                      theme: 'dark',
+                      conversation: 'none',
+                      align: 'center',
+                    }}
+                    onLoad={() => {
+                      setHideTweetPost(false);
+                    }}
+                    renderError={() => {
+                      setHide(id);
+                      return <div style={{ display: 'none' }}></div>;
+                    }}
+                  />
+                </div>
               </Carousel.Item>
             ))}
           </Carousel>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -19,6 +19,9 @@ module.exports = {
         'primary-hover': 'rgb(var(--primary-hover) , <alpha-value>)',
         'primary-disable': 'rgb(var(--primary-disable) , <alpha-value>)',
       },
+      screens: {
+        xsm: '370px',
+      },
       keyframes: {
         spin: {
           to: {