Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 78x 78x 78x 78x 78x 78x 78x 78x 78x 78x 78x 78x 78x 78x 78x 4x 4x 4x 4x 74x 74x 74x 74x 74x 74x 74x 74x 74x 78x 78x 78x 78x 78x 78x 78x 78x 78x | // Types
import { BaseVariant, FeedbackAnonymousName } from '@/types';
// Utils
import { combineClasses } from '@shared/utils';
// Components
import { ImageFallback } from '@/components/common';
import { ProfileCircleIcon } from '@/components/icons/reacts';
// Constants
import { FALLBACK_SRC } from '@shared/constants';
// Styles
import './styles/feedback-header.css';
const variantTheme = {
[BaseVariant.PRIMARY]: {
root: 'feedback-header-root',
avatarContainer: 'feedback-header-avatar-container',
avatarFull: 'feedback-header-avatar-full',
avatarIcon: 'feedback-header-avatar-icon',
userInfo: 'feedback-header-user-info',
name: 'feedback-header-name',
date: 'feedback-header-date',
},
};
export interface FeedbackHeaderProps {
name: string;
avatar: string;
date: string;
isAnonymous?: boolean;
className?: string;
variant?: BaseVariant;
}
export const FeedbackHeader = ({
name,
avatar,
date,
isAnonymous = false,
className = '',
variant = BaseVariant.PRIMARY,
}: FeedbackHeaderProps) => {
const theme = variantTheme[variant];
const displayName = isAnonymous ? FeedbackAnonymousName.ANONYMOUS : name;
return (
<div
data-variant={variant}
className={combineClasses(theme.root, className)}
>
<div className={theme.avatarContainer} data-anonymous={isAnonymous}>
{isAnonymous ? (
<ProfileCircleIcon
key="icon"
className={combineClasses(theme.avatarIcon, 'avatar-enter')}
/>
) : (
<ImageFallback
key="image"
src={avatar}
alt={name}
width={50}
height={50}
className={combineClasses(theme.avatarFull, 'avatar-enter')}
fallbackSrc={FALLBACK_SRC.AVATAR}
/>
)}
</div>
<div className={theme.userInfo}>
<span className={combineClasses(theme.name, 'name-transition')}>
{displayName}
</span>
<span className={theme.date}>{date}</span>
</div>
</div>
);
};
|