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