bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'fork' into frontend-rw

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-07-02 19:03:11 +02:00
commit d01c3a1eea
4 changed files with 42 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/list.tsx
View file

@ -133,4 +133,4 @@ const ListItem: React.FC<IListItem> = ({ className, label, hint, children, to, h
); );
}; };
export { List as default, ListItem }; export { List as default, type IListItem, ListItem };

8
src/components/radio.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import List, { ListItem } from './list'; import List, { type IListItem, ListItem } from './list';
interface IRadioGroup { interface IRadioGroup {
onChange: React.ChangeEventHandler; onChange: React.ChangeEventHandler;
@ -15,7 +15,7 @@ const RadioGroup = ({ onChange, children }: IRadioGroup) => {
return <List>{childrenWithProps}</List>; return <List>{childrenWithProps}</List>;
}; };
interface IRadioItem { interface IRadioItem extends IListItem {
label: React.ReactNode; label: React.ReactNode;
hint?: React.ReactNode; hint?: React.ReactNode;
value: string; value: string;
@ -23,8 +23,8 @@ interface IRadioItem {
onChange?: React.ChangeEventHandler; onChange?: React.ChangeEventHandler;
} }
const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChange, value }) => ( const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChange, value, ...props }) => (
<ListItem label={label} hint={hint}> <ListItem label={label} hint={hint} {...props}>
<input <input
type='radio' type='radio'
checked={checked} checked={checked}

4
src/features/directory/components/account-card.tsx
View file

@ -50,12 +50,12 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
<HoverRefWrapper key={account.id} accountId={account.id} inline> <HoverRefWrapper key={account.id} accountId={account.id} inline>
<Link to={`/@${account.acct}`} title={account.acct}> <Link to={`/@${account.acct}`} title={account.acct}>
<Avatar src={account.avatar} className='!absolute bottom-0 left-3 translate-y-1/2 bg-white ring-2 ring-white dark:bg-primary-900 dark:ring-primary-900' size={42} /> <Avatar src={account.avatar} className='!absolute bottom-0 left-3 translate-y-1/2 bg-white ring-2 ring-white dark:bg-primary-900 dark:ring-primary-900' size={64} />
</Link> </Link>
</HoverRefWrapper> </HoverRefWrapper>
</div> </div>
<Stack space={4} className='p-3 pt-8'> <Stack space={4} className='p-3 pt-10'>
<Account <Account
account={account} account={account}
withAvatar={false} withAvatar={false}

65
src/features/directory/index.tsx
View file

@ -5,7 +5,8 @@ import { useLocation } from 'react-router-dom';
import { fetchDirectory, expandDirectory } from 'soapbox/actions/directory'; import { fetchDirectory, expandDirectory } from 'soapbox/actions/directory';
import LoadMore from 'soapbox/components/load-more'; import LoadMore from 'soapbox/components/load-more';
import { Column, RadioButton, Stack, Text } from 'soapbox/components/ui'; import { RadioGroup, RadioItem } from 'soapbox/components/radio';
import { CardTitle, Column, Stack } from 'soapbox/components/ui';
import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks'; import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
import AccountCard from './components/account-card'; import AccountCard from './components/account-card';
@ -51,37 +52,41 @@ const Directory = () => {
return ( return (
<Column label={intl.formatMessage(messages.title)}> <Column label={intl.formatMessage(messages.title)}>
<Stack space={4}> <Stack space={4}>
<div className='grid grid-cols-2 gap-2'> <div className='grid grid-cols-1 gap-2 md:grid-cols-2'>
<div> <Stack space={2}>
<Text weight='medium'> <CardTitle title={<FormattedMessage id='directory.display_filter' defaultMessage='Display filter' />} />
<FormattedMessage id='directory.display_filter' defaultMessage='Display filter' />
</Text> <RadioGroup onChange={handleChangeOrder}>
<fieldset className='mt-3'> <RadioItem
<legend className='sr-only'> label={intl.formatMessage(messages.recentlyActive)}
<FormattedMessage id='directory.display_filter' defaultMessage='Display filter' /> checked={order === 'active'}
</legend> value='active'
<div className='space-y-2'> />
<RadioButton name='order' value='active' label={intl.formatMessage(messages.recentlyActive)} checked={order === 'active'} onChange={handleChangeOrder} /> <RadioItem
<RadioButton name='order' value='new' label={intl.formatMessage(messages.newArrivals)} checked={order === 'new'} onChange={handleChangeOrder} /> label={intl.formatMessage(messages.newArrivals)}
</div> checked={order === 'new'}
</fieldset> value='new'
</div> />
</RadioGroup>
</Stack>
{features.federating && ( {features.federating && (
<div> <Stack space={2}>
<Text weight='medium'> <CardTitle title={<FormattedMessage id='directory.fediverse_filter' defaultMessage='Fediverse filter' />} />
<FormattedMessage id='directory.fediverse_filter' defaultMessage='Fediverse filter' />
</Text> <RadioGroup onChange={handleChangeLocal}>
<fieldset className='mt-3'> <RadioItem
<legend className='sr-only'> label={intl.formatMessage(messages.local, { domain: instance.title })}
<FormattedMessage id='directory.fediverse_filter' defaultMessage='Fediverse filter' /> checked={local}
</legend> value='1'
<div className='space-y-2'> />
<RadioButton name='local' value='1' label={intl.formatMessage(messages.local, { domain: instance.title })} checked={local} onChange={handleChangeLocal} /> <RadioItem
<RadioButton name='local' value='0' label={intl.formatMessage(messages.federated)} checked={!local} onChange={handleChangeLocal} /> label={intl.formatMessage(messages.federated)}
</div> checked={!local}
</fieldset> value='0'
</div> />
</RadioGroup>
</Stack>
)} )}
</div> </div>