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

Streak: display flame icon

This commit is contained in:
Alex Gleason 2025-02-06 22:55:34 -06:00
parent 5fa10f4e58
commit 3bf9239679
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
3 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -67,7 +67,7 @@
"@sentry/types": "^8.34.0", "@sentry/types": "^8.34.0",
"@soapbox/weblock": "npm:@jsr/soapbox__weblock", "@soapbox/weblock": "npm:@jsr/soapbox__weblock",
"@std/semver": "npm:@jsr/std__semver", "@std/semver": "npm:@jsr/std__semver",
"@tabler/icons": "^3.19.0", "@tabler/icons": "^3.29.0",
"@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.9", "@tailwindcss/forms": "^0.5.9",
"@tailwindcss/typography": "^0.5.15", "@tailwindcss/typography": "^0.5.15",

29
src/features/ui/components/profile-stats.tsx
View File

@ -1,8 +1,11 @@
import flameIcon from '@tabler/icons/filled/flame.svg';
import { useIntl, defineMessages } from 'react-intl'; import { useIntl, defineMessages } from 'react-intl';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import HStack from 'soapbox/components/ui/hstack.tsx'; import HStack from 'soapbox/components/ui/hstack.tsx';
import Icon from 'soapbox/components/ui/icon.tsx';
import Text from 'soapbox/components/ui/text.tsx'; import Text from 'soapbox/components/ui/text.tsx';
import Tooltip from 'soapbox/components/ui/tooltip.tsx';
import { shortNumberFormat } from 'soapbox/utils/numbers.tsx'; import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
import type { Account } from 'soapbox/schemas/index.ts'; import type { Account } from 'soapbox/schemas/index.ts';
@ -51,14 +54,24 @@ const ProfileStats: React.FC<IProfileStats> = ({ account, onClickHandler }) => {
</NavLink> </NavLink>
{account.ditto.streak.days > 0 && ( {account.ditto.streak.days > 0 && (
<HStack alignItems='center' space={1}> <Tooltip
<Text theme='primary' weight='bold' size='sm'> text={new Date(account.ditto.streak.start!).toLocaleDateString(undefined, {
{shortNumberFormat(account.ditto.streak.days)} year: 'numeric',
</Text> month: 'short',
<Text weight='bold' size='sm'> day: 'numeric',
{intl.formatMessage(messages.streak)} })}
</Text> >
</HStack> <HStack alignItems='center'>
<Text theme='primary' weight='bold' size='sm'>
<span role='img' aria-label={intl.formatMessage(messages.streak)}>
<Icon src={flameIcon} className='size-4' />
</span>
</Text>
<Text weight='bold' size='sm'>
<>{shortNumberFormat(account.ditto.streak.days)}</>
</Text>
</HStack>
</Tooltip>
)} )}
</HStack> </HStack>
); );

8
yarn.lock
View File

@ -2473,10 +2473,10 @@
dependencies: dependencies:
defer-to-connect "^2.0.0" defer-to-connect "^2.0.0"
"@tabler/icons@^3.19.0": "@tabler/icons@^3.29.0":
version "3.19.0" version "3.29.0"
resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-3.19.0.tgz#5998b0557ef34572e003f2d75ac95e7c04f88c81" resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-3.29.0.tgz#f78d0bb098641088ccfe3e727fc296502eb8a930"
integrity sha512-A4WEWqpdbTfnpFEtwXqwAe9qf9sp1yRPvzppqAuwcoF0q5YInqB+JkJtSFToCyBpPVeLxJUxxkapLvt2qQgnag== integrity sha512-VWNINymdmhay3MDvWVREmRwuWLSrX3YiInKvs5L4AHRF4bAfJabLlEReE0BW/XFsBt22ff8/C8Eam/LXlF97mA==
"@tailwindcss/aspect-ratio@^0.4.2": "@tailwindcss/aspect-ratio@^0.4.2":
version "0.4.2" version "0.4.2"