Extend PlaceholderAvatar component to support "withText" prop

sw-index-revalidate
Justin 2022-06-22 08:57:22 -04:00
rodzic 5884d02e9d
commit 8039772d05
1 zmienionych plików z 15 dodań i 6 usunięć

Wyświetl plik

@ -1,11 +1,14 @@
import * as React from 'react';
import { Stack } from 'soapbox/components/ui';
interface IPlaceholderAvatar {
size: number,
size: number
withText?: boolean
}
/** Fake avatar to display while data is loading. */
const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size }) => {
const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = false }) => {
const style = React.useMemo(() => {
if (!size) {
return {};
@ -18,10 +21,16 @@ const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size }) => {
}, [size]);
return (
<Stack space={3} className='animate-pulse text-center'>
<div
className='rounded-full bg-slate-200 dark:bg-slate-700'
className='block mx-auto rounded-full bg-slate-200 dark:bg-slate-700'
style={style}
/>
{withText && (
<div style={{ width: size, height: 20 }} className='rounded-full bg-slate-200 dark:bg-slate-700' />
)}
</Stack>
);
};