parent
a60d6770af
commit
6240ea5a23
@ -1,16 +1,42 @@
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { Button, Stack, Text } from 'soapbox/components/ui';
|
||||
|
||||
const Blankslate = () => (
|
||||
<Stack justifyContent='center' alignItems='center' space={4} className='px-4 h-full'>
|
||||
<Stack space={2}>
|
||||
<Text weight='semibold' size='xl' align='center'>No messages yet</Text>
|
||||
<Text theme='muted' align='center'>You can start a conversation with anyone that follows you.</Text>
|
||||
</Stack>
|
||||
const messages = defineMessages({
|
||||
title: { id: 'chat_search.empty_results_blankslate.title', defaultMessage: 'No messages yet' },
|
||||
body: { id: 'chat_search.empty_results_blankslate.body', defaultMessage: 'You can start a conversation with anyone that follows you.' },
|
||||
action: { id: 'chat_search.empty_results_blankslate.action', defaultMessage: 'Message someone' },
|
||||
});
|
||||
|
||||
interface IBlankslate {
|
||||
onSearch(): void
|
||||
}
|
||||
|
||||
const Blankslate = ({ onSearch }: IBlankslate) => {
|
||||
const intl = useIntl();
|
||||
|
||||
{/* <Button theme='primary'>Message someone</Button> */}
|
||||
</Stack>
|
||||
);
|
||||
return (
|
||||
<Stack alignItems='center' justifyContent='center' className='h-full flex-grow'>
|
||||
<Stack space={4}>
|
||||
<Stack space={1} className='max-w-[85%] mx-auto'>
|
||||
<Text size='lg' weight='bold' align='center'>
|
||||
{intl.formatMessage(messages.title)}
|
||||
</Text>
|
||||
|
||||
<Text theme='muted' align='center'>
|
||||
{intl.formatMessage(messages.body)}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<div className='mx-auto'>
|
||||
<Button theme='primary' onClick={onSearch}>
|
||||
{intl.formatMessage(messages.action)}
|
||||
</Button>
|
||||
</div>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default Blankslate;
|
||||
|
@ -1,14 +1,26 @@
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { Stack, Text } from 'soapbox/components/ui';
|
||||
|
||||
const Blankslate = () => (
|
||||
<Stack justifyContent='center' alignItems='center' space={2} className='h-full w-2/3 mx-auto'>
|
||||
<Text weight='bold' size='lg' align='center'>Search followers</Text>
|
||||
<Text theme='muted' align='center'>
|
||||
You can start a conversation with anyone that follows you.
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
const messages = defineMessages({
|
||||
title: { id: 'chat_search.blankslate.title', defaultMessage: 'Search followers' },
|
||||
body: { id: 'chat_search.blankslate.body', defaultMessage: 'You can start a conversation with anyone that follows you.' },
|
||||
});
|
||||
|
||||
const Blankslate = () => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Stack justifyContent='center' alignItems='center' space={2} className='h-full w-2/3 mx-auto'>
|
||||
<Text weight='bold' size='lg' align='center'>
|
||||
{intl.formatMessage(messages.title)}
|
||||
</Text>
|
||||
<Text theme='muted' align='center'>
|
||||
{intl.formatMessage(messages.body)}
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default Blankslate;
|
@ -1,14 +1,27 @@
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { Stack, Text } from 'soapbox/components/ui';
|
||||
|
||||
const EmptyResultsBlankslate = () => (
|
||||
<Stack justifyContent='center' alignItems='center' space={2} className='h-full w-2/3 mx-auto'>
|
||||
<Text weight='bold' size='lg' align='center'>No matches found</Text>
|
||||
<Text theme='muted' align='center'>
|
||||
Try searching for another name.
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
const messages = defineMessages({
|
||||
title: { id: 'chat_search.empty_results_blankslate.title', defaultMessage: 'No matches found' },
|
||||
body: { id: 'chat_search.empty_results_blankslate.body', defaultMessage: 'Try searching for another name.' },
|
||||
});
|
||||
|
||||
const EmptyResultsBlankslate = () => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Stack justifyContent='center' alignItems='center' space={2} className='h-full w-2/3 mx-auto'>
|
||||
<Text weight='bold' size='lg' align='center'>
|
||||
{intl.formatMessage(messages.title)}
|
||||
</Text>
|
||||
|
||||
<Text theme='muted' align='center'>
|
||||
{intl.formatMessage(messages.body)}
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmptyResultsBlankslate;
|
Loading…
Reference in new issue