sforkowany z mirror/soapbox
Extend PlaceholderAvatar component to support "withText" prop
rodzic
5884d02e9d
commit
8039772d05
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue