kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Refactor sidebar panels with Widget component
rodzic
999f518f10
commit
67c0c83b44
|
@ -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';
|
||||
|
|
|
@ -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;
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue