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 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 4x 4x 4x 4x 56x 56x 56x 56x 56x 56x 56x 56x 56x 60x 60x 60x 60x 60x 60x 60x 60x 60x | // 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>
);
};
|