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