import React from 'react'; import { HStack, Stack, Text } from 'soapbox/components/ui'; import { generateText, randomIntFromInterval } from '../utils'; export default ({ withJoinAction = true }: { withJoinAction?: boolean }) => { const groupNameLength = randomIntFromInterval(12, 20); return ( <HStack alignItems='center' justifyContent='between' className='animate-pulse' > <HStack alignItems='center' space={2} className='overflow-hidden'> {/* 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 */} {withJoinAction && ( <div className='h-10 w-36 rounded-full bg-gray-300 dark:bg-gray-800' /> )} </HStack> ); };