Skip to content
This repository has been archived by the owner on Sep 7, 2024. It is now read-only.

Commit

Permalink
modified: src/components/TweetCarousael/index.jsx (#762)
Browse files Browse the repository at this point in the history
solved issue #761

modified:   tailwind.config.js
added new breakpoint xsm @ 370px
  • Loading branch information
theunhackable authored Aug 27, 2023
1 parent 85d44c3 commit d462132
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 17 deletions.
48 changes: 31 additions & 17 deletions src/components/TweetCarousael/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down

0 comments on commit d462132

Please sign in to comment.