bigbuffet-rw/app/soapbox/features/placeholder/components/placeholder_display_name.tsx
Justin 20209c81ab Improve visuals with branding
Co-authored-by: Alex Gleason <alex@alexgleason.me>
2022-08-01 14:40:07 -04:00

23 lines
676 B
TypeScript

import React from 'react';
import { randomIntFromInterval, generateText } from '../utils';
interface IPlaceholderDisplayName {
maxLength: number,
minLength: number,
}
/** Fake display name to show when data is loading. */
const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength, maxLength }) => {
const length = randomIntFromInterval(maxLength, minLength);
const acctLength = randomIntFromInterval(maxLength, minLength);
return (
<div className='flex flex-col text-primary-50 dark:text-primary-800'>
<p>{generateText(length)}</p>
<p>{generateText(acctLength)}</p>
</div>
);
};
export default PlaceholderDisplayName;