diff --git a/app/soapbox/components/ui/widget/widget.tsx b/app/soapbox/components/ui/widget/widget.tsx index e5cc6dfd1..d0f34b90b 100644 --- a/app/soapbox/components/ui/widget/widget.tsx +++ b/app/soapbox/components/ui/widget/widget.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import { Stack, Text } from 'soapbox/components/ui'; +import { Stack, HStack, Text, IconButton } from 'soapbox/components/ui'; interface IWidgetTitle { - title: string | React.ReactNode + title: string | React.ReactNode, } const WidgetTitle = ({ title }: IWidgetTitle): JSX.Element => ( @@ -16,12 +16,31 @@ const WidgetBody: React.FC = ({ children }): JSX.Element => ( interface IWidget { title: string | React.ReactNode, + onActionClick?: () => void, + actionIcon?: string, + actionTitle?: string, } -const Widget: React.FC = ({ title, children }): JSX.Element => { +const Widget: React.FC = ({ + title, + children, + onActionClick, + actionIcon = require('@tabler/icons/icons/arrow-right.svg'), + actionTitle, +}): JSX.Element => { return ( - + + + {onActionClick && ( + + )} + {children} ); diff --git a/app/soapbox/features/crypto_donate/components/crypto_donate_panel.tsx b/app/soapbox/features/crypto_donate/components/crypto_donate_panel.tsx index 073852a8b..581f53f03 100644 --- a/app/soapbox/features/crypto_donate/components/crypto_donate_panel.tsx +++ b/app/soapbox/features/crypto_donate/components/crypto_donate_panel.tsx @@ -1,17 +1,24 @@ import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Link } from 'react-router-dom'; +import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; +import { useHistory } from 'react-router-dom'; import { Text, Widget } from 'soapbox/components/ui'; import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks'; import SiteWallet from './site_wallet'; +const messages = defineMessages({ + actionTitle: { id: 'crypto_donate_panel.actions.view', defaultMessage: 'Click to see {count} {count, plural, one {wallet} other {wallets}}' }, +}); + interface ICryptoDonatePanel { limit: number, } const CryptoDonatePanel: React.FC = ({ limit = 3 }): JSX.Element | null => { + const intl = useIntl(); + const history = useHistory(); + const addresses = useSoapboxConfig().get('cryptoAddresses'); const siteTitle = useAppSelector((state) => state.instance.title); @@ -19,11 +26,16 @@ const CryptoDonatePanel: React.FC = ({ limit = 3 }): JSX.Ele return null; } - const more = addresses.size - limit; - const hasMore = more > 0; + const handleAction = () => { + history.push('/donate/crypto'); + }; return ( - }> + } + onActionClick={handleAction} + actionTitle={intl.formatMessage(messages.actionTitle, { count: addresses.size })} + > = ({ limit = 3 }): JSX.Ele - - {hasMore && ( - - - - - - )} ); }; diff --git a/app/soapbox/features/ui/components/who-to-follow-panel.tsx b/app/soapbox/features/ui/components/who-to-follow-panel.tsx index cea616407..25a730603 100644 --- a/app/soapbox/features/ui/components/who-to-follow-panel.tsx +++ b/app/soapbox/features/ui/components/who-to-follow-panel.tsx @@ -36,8 +36,16 @@ const WhoToFollowPanel = ({ limit }: IWhoToFollowPanel) => { return null; } + // FIXME: This page actually doesn't look good right now + // const handleAction = () => { + // history.push('/suggestions'); + // }; + return ( - }> + } + // onAction={handleAction} + > {suggestionsToRender.map((suggestion: ImmutableMap) => (