43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
|
|
import { HStack, Stack, Text } from 'soapbox/components/ui';
|
|
|
|
import { generateText, randomIntFromInterval } from '../utils';
|
|
|
|
export default () => {
|
|
const groupNameLength = randomIntFromInterval(12, 20);
|
|
|
|
return (
|
|
<HStack
|
|
alignItems='center'
|
|
justifyContent='between'
|
|
className='animate-pulse'
|
|
>
|
|
<HStack alignItems='center' space={2}>
|
|
{/* Group Avatar */}
|
|
<div className='h-11 w-11 rounded-full bg-gray-500 dark:bg-gray-700 dark:ring-primary-900' />
|
|
|
|
<Stack className='text-gray-500 dark:text-gray-700'>
|
|
<Text theme='inherit' weight='bold'>
|
|
{generateText(groupNameLength)}
|
|
</Text>
|
|
|
|
<HStack space={1} alignItems='center'>
|
|
<Text theme='inherit' tag='span' size='sm' weight='medium'>
|
|
{generateText(6)}
|
|
</Text>
|
|
|
|
<span>•</span>
|
|
|
|
<Text theme='inherit' tag='span' size='sm' weight='medium'>
|
|
{generateText(6)}
|
|
</Text>
|
|
</HStack>
|
|
</Stack>
|
|
</HStack>
|
|
|
|
{/* Join Group Button */}
|
|
<div className='h-10 w-36 rounded-full bg-gray-300 dark:bg-gray-800' />
|
|
</HStack>
|
|
);
|
|
};
|