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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x | // Types
import { BaseVariant } from '@/types';
// Utils
import { combineClasses } from '@shared/utils';
// Components
import { ImageFallback } from '@/components/common';
import { MessageIcon } from '@/components/icons/reacts';
// Constants
import { FALLBACK_SRC } from '@shared/constants';
// Styles
import './styles/feedback-comment-card.css';
const variantTheme = {
[BaseVariant.PRIMARY]: {
trigger: 'feedback-comment-card-trigger',
avatar: 'feedback-comment-card-avatar',
name: 'feedback-comment-card-name',
messageIcon: 'feedback-comment-card-message-icon',
},
};
export interface FeedbackCommentCardProps {
name: string;
avatar: string;
className?: string;
variant?: BaseVariant;
onClick?: () => void;
}
export const FeedbackCommentCard = ({
name,
avatar,
className = '',
variant = BaseVariant.PRIMARY,
onClick,
}: FeedbackCommentCardProps) => {
const theme = variantTheme[variant];
return (
<button
type="button"
data-variant={variant}
onClick={onClick}
className={combineClasses(theme.trigger, className)}
>
<ImageFallback
src={avatar}
alt={name}
width={30}
height={30}
className={theme.avatar}
fallbackSrc={FALLBACK_SRC.AVATAR}
/>
<span className={theme.name}>{name}</span>
<MessageIcon className={theme.messageIcon} />
</button>
);
};
|