Refactor sidebar panels with Widget component

app/soapbox/components/ui/index.ts

@@ -27,3 +27,4 @@ export { default as Tabs } from './tabs/tabs';
 export { default as Text } from './text/text';
 export { default as Textarea } from './textarea/textarea';
 export { default as Tooltip } from './tooltip/tooltip';
+export { default as Widget } from './widget/widget';

app/soapbox/components/ui/widget/widget.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { Stack, Text } from 'soapbox/components/ui';
+
+interface IWidgetTitle {
+  title: string | React.ReactNode
+}
+
+const WidgetTitle = ({ title }: IWidgetTitle): JSX.Element => (
+  <Text size='xl' weight='bold' tag='h1'>{title}</Text>
+);
+
+const WidgetBody: React.FC = ({ children }): JSX.Element => (
+  <Stack space={3}>{children}</Stack>
+);
+
+interface IWidget {
+  title: string | React.ReactNode,
+}
+
+const Widget: React.FC<IWidget> = ({ title, children }): JSX.Element => {
+  return (
+    <Stack space={2}>
+      <WidgetTitle title={title} />
+      <WidgetBody>{children}</WidgetBody>
+    </Stack>
+  );
+};
+
+export default Widget;

app/soapbox/features/crypto_donate/components/crypto_donate_panel.tsx

@@ -1,9 +1,8 @@
-import classNames from 'classnames';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import Icon from 'soapbox/components/icon';
+import { Widget } from 'soapbox/components/ui';
 import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
 
 import SiteWallet from './site_wallet';
@@ -24,13 +23,7 @@ const CryptoDonatePanel: React.FC<ICryptoDonatePanel> = ({ limit = 3 }): JSX.Ele
   const hasMore = more > 0;
 
   return (
-    <div className={classNames('wtf-panel funding-panel crypto-donate-panel', { 'crypto-donate-panel--has-more': hasMore })}>
-      <div className='wtf-panel-header'>
-        <Icon src={require('@tabler/icons/icons/currency-bitcoin.svg')} className='wtf-panel-header__icon' />
-        <span className='wtf-panel-header__label'>
-          <span><FormattedMessage id='crypto_donate_panel.heading' defaultMessage='Donate Cryptocurrency' /></span>
-        </span>
-      </div>
+    <Widget title={<FormattedMessage id='crypto_donate_panel.heading' defaultMessage='Donate Cryptocurrency' />}>
       <div className='wtf-panel__content'>
         <div className='crypto-donate-panel__message'>
           <FormattedMessage
@@ -48,7 +41,7 @@ const CryptoDonatePanel: React.FC<ICryptoDonatePanel> = ({ limit = 3 }): JSX.Ele
           values={{ count: more }}
         />
       </Link>}
-    </div>
+    </Widget>
   );
 };
 

app/soapbox/features/ui/components/trends-panel.tsx

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
+import { Widget } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
 import { fetchTrends } from '../../../actions/trends';
 import Hashtag from '../../../components/hashtag';
-import { Stack, Text } from '../../../components/ui';
 
 interface ITrendsPanel {
   limit: number
@@ -35,17 +35,11 @@ const TrendsPanel = ({ limit }: ITrendsPanel) => {
   }
 
   return (
-    <Stack space={2}>
-      <Text size='xl' weight='bold'>
-        <FormattedMessage id='trends.title' defaultMessage='Trends' />
-      </Text>
-
-      <Stack space={3}>
-        {sortedTrends.map((hashtag: ImmutableMap<string, any>) => (
-          <Hashtag key={hashtag.get('name')} hashtag={hashtag} />
-        ))}
-      </Stack>
-    </Stack>
+    <Widget title={<FormattedMessage id='trends.title' defaultMessage='Trends' />}>
+      {sortedTrends.map((hashtag: ImmutableMap<string, any>) => (
+        <Hashtag key={hashtag.get('name')} hashtag={hashtag} />
+      ))}
+    </Widget>
   );
 };
 

app/soapbox/features/ui/components/who-to-follow-panel.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
-import { Stack, Text } from 'soapbox/components/ui';
+import { Widget } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
 import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestions';
@@ -37,24 +37,18 @@ const WhoToFollowPanel = ({ limit }: IWhoToFollowPanel) => {
   }
 
   return (
-    <Stack space={2}>
-      <Text size='xl' weight='bold'>
-        <FormattedMessage id='who_to_follow.title' defaultMessage='People To Follow' />
-      </Text>
-
-      <Stack space={3}>
-        {suggestionsToRender.map((suggestion: ImmutableMap<string, any>) => (
-          <AccountContainer
-            key={suggestion.get('account')}
-            // @ts-ignore: TS thinks `id` is passed to <Account>, but it isn't
-            id={suggestion.get('account')}
-            actionIcon={require('@tabler/icons/icons/x.svg')}
-            actionTitle={intl.formatMessage(messages.dismissSuggestion)}
-            onActionClick={handleDismiss}
-          />
-        ))}
-      </Stack>
-    </Stack>
+    <Widget title={<FormattedMessage id='who_to_follow.title' defaultMessage='People To Follow' />}>
+      {suggestionsToRender.map((suggestion: ImmutableMap<string, any>) => (
+        <AccountContainer
+          key={suggestion.get('account')}
+          // @ts-ignore: TS thinks `id` is passed to <Account>, but it isn't
+          id={suggestion.get('account')}
+          actionIcon={require('@tabler/icons/icons/x.svg')}
+          actionTitle={intl.formatMessage(messages.dismissSuggestion)}
+          onActionClick={handleDismiss}
+        />
+      ))}
+    </Widget>
   );
 };