moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

StatusInteractionBar: break into InteractionCounter component

This commit is contained in:
Alex Gleason 2022-11-20 16:05:53 -06:00
parent 1dfd5244f0
commit b9a3f7ec13
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
3 changed files with 42 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/components/ui/text/text.tsx
View File

@ -51,7 +51,7 @@ const families = {
}; };
export type Sizes = keyof typeof sizes export type Sizes = keyof typeof sizes
type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'div'
type Directions = 'ltr' | 'rtl' type Directions = 'ltr' | 'rtl'
interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'dangerouslySetInnerHTML'> { interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'dangerouslySetInnerHTML'> {

72
app/soapbox/features/status/components/status-interaction-bar.tsx
View File

@ -73,19 +73,13 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
onClick={handleOpenReblogsModal} onClick={handleOpenReblogsModal}
className='text-gray-600 dark:text-gray-700 hover:underline' className='text-gray-600 dark:text-gray-700 hover:underline'
> >
<HStack space={1} alignItems='center'> <InteractionCounter count={status.reblogs_count}>
<Text theme='primary' size='sm' weight='bold'> <FormattedMessage
<FormattedNumber value={status.reblogs_count} /> id='status.interactions.reblogs'
</Text> defaultMessage='{count, plural, one {Repost} other {Reposts}}'
values={{ count: status.reblogs_count }}
<Text theme='muted' size='sm'> />
<FormattedMessage </InteractionCounter>
id='status.interactions.reblogs'
defaultMessage='{count, plural, one {Repost} other {Reposts}}'
values={{ count: status.reblogs_count }}
/>
</Text>
</HStack>
</button> </button>
); );
} }
@ -114,19 +108,13 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
}) })
} }
> >
<HStack space={1} alignItems='center'> <InteractionCounter count={status.favourites_count}>
<Text theme='primary' size='sm' weight='bold'> <FormattedMessage
<FormattedNumber value={status.favourites_count} /> id='status.interactions.favourites'
</Text> defaultMessage='{count, plural, one {Like} other {Likes}}'
values={{ count: status.favourites_count }}
<Text theme='muted' size='sm'> />
<FormattedMessage </InteractionCounter>
id='status.interactions.favourites'
defaultMessage='{count, plural, one {Like} other {Likes}}'
values={{ count: status.favourites_count }}
/>
</Text>
</HStack>
</button> </button>
); );
} }
@ -160,23 +148,19 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
}) })
} }
> >
<HStack space={1} alignItems='center'> <InteractionCounter count={count}>
<Text theme='primary' size='sm' weight='bold'>
<FormattedNumber value={count} />
</Text>
<HStack space={0.5} alignItems='center'> <HStack space={0.5} alignItems='center'>
{emojiReacts.map((e, i) => { {emojiReacts.take(3).map((e, i) => {
return ( return (
<Emoji <Emoji
key={i} key={i}
className={classNames('w-5 h-5 flex-none')} className='w-4.5 h-4.5 flex-none'
emoji={e.get('name')} emoji={e.get('name')}
/> />
); );
})} })}
</HStack> </HStack>
</HStack> </InteractionCounter>
</button> </button>
); );
}; };
@ -190,4 +174,24 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
); );
}; };
interface IInteractionCounter {
count: number,
children: React.ReactNode,
}
/** InteractionCounter component. */
const InteractionCounter: React.FC<IInteractionCounter> = ({ count, children }) => {
return (
<HStack space={1} alignItems='center'>
<Text theme='primary' weight='bold'>
<FormattedNumber value={count} />
</Text>
<Text tag='div' theme='muted'>
{children}
</Text>
</HStack>
);
};
export default StatusInteractionBar; export default StatusInteractionBar;

3
tailwind.config.js
View File

@ -42,6 +42,9 @@ module.exports = {
'mono', 'mono',
], ],
}, },
spacing: {
'4.5': '1.125rem',
},
colors: parseColorMatrix({ colors: parseColorMatrix({
// Define color matrix (of available colors) // Define color matrix (of available colors)
// Colors are configured at runtime with CSS variables in soapbox.json // Colors are configured at runtime with CSS variables in soapbox.json