diff --git a/src/components/profile-hover-card.tsx b/src/components/profile-hover-card.tsx index d5f6c1e58..a72abb5b3 100644 --- a/src/components/profile-hover-card.tsx +++ b/src/components/profile-hover-card.tsx @@ -1,8 +1,9 @@ import { useFloating } from '@floating-ui/react'; +import flameIcon from '@tabler/icons/filled/flame.svg'; import calendarIcon from '@tabler/icons/outline/calendar.svg'; import clsx from 'clsx'; import { useEffect, useState } from 'react'; -import { useIntl, FormattedMessage } from 'react-intl'; +import { useIntl, FormattedMessage, defineMessages } from 'react-intl'; import { Link, useHistory } from 'react-router-dom'; import { fetchRelationships } from 'soapbox/actions/accounts.ts'; @@ -34,6 +35,10 @@ import { dateFormatOptions } from './relative-timestamp.tsx'; import type { Account, PatronUser } from 'soapbox/schemas/index.ts'; import type { AppDispatch } from 'soapbox/store.ts'; +const messages = defineMessages({ + streak: { id: 'account.streak', defaultMessage: 'Day Streak' }, +}); + const getBadges = ( account?: Pick, patronUser?: Pick, @@ -123,7 +128,7 @@ export const ProfileHoverCard: React.FC = ({ visible = true } onMouseEnter={handleMouseEnter(dispatch)} onMouseLeave={handleMouseLeave(dispatch)} > - +
@@ -191,6 +196,19 @@ export const ProfileHoverCard: React.FC = ({ visible = true } )} + + {account.ditto?.streak?.days > 0 && ( + + + + + + + + {shortNumberFormat(account.ditto.streak.days)} + + + )} {account.local ? (