sforkowany z mirror/soapbox
39 wiersze
1.3 KiB
TypeScript
39 wiersze
1.3 KiB
TypeScript
import React from 'react';
|
|
|
|
import { HStack, Stack, Text } from 'soapbox/components/ui';
|
|
|
|
import { generateText, randomIntFromInterval } from '../utils';
|
|
|
|
const PlaceholderGroupDiscover = () => {
|
|
const groupNameLength = randomIntFromInterval(12, 20);
|
|
|
|
return (
|
|
<Stack space={2} className='animate-pulse'>
|
|
<Stack className='aspect-w-10 aspect-h-7 h-full w-full overflow-hidden rounded-lg'>
|
|
{/* Group Cover Image */}
|
|
<div className='absolute inset-0 rounded-t-lg bg-gray-300 object-cover dark:bg-gray-800' />
|
|
|
|
<Stack justifyContent='end' className='z-10 p-4 text-white' space={3}>
|
|
{/* Group Avatar */}
|
|
<div className='h-11 w-11 rounded-full bg-gray-500 dark:bg-gray-700 dark:ring-primary-900' />
|
|
|
|
{/* Group Info */}
|
|
<Stack space={1} className='text-gray-500 dark:text-gray-700'>
|
|
<Text theme='inherit' weight='bold' truncate>{generateText(groupNameLength)}</Text>
|
|
|
|
<HStack space={3} wrap>
|
|
<Text tag='span' theme='inherit'>{generateText(6)}</Text>
|
|
<Text tag='span' theme='inherit'>{generateText(6)}</Text>
|
|
</HStack>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Join Group Button */}
|
|
<div className='h-10 w-full rounded-full bg-gray-300 dark:bg-gray-800' />
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default PlaceholderGroupDiscover;
|