react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
28 lines (27 loc) • 1.62 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { Image } from '../Image/Image';
import { Typography } from '../Typography/Typography';
import { cn } from '../../../utils';
export const ProfilePicture = ({ firstName, lastName, profilePicture, size = 'md', className = '', alt, }) => {
const sizeClasses = {
xs: 'w-6 h-6',
sm: 'w-8 h-8',
md: 'w-12 h-12',
lg: 'w-16 h-16',
xl: 'w-20 h-20',
};
const textSize = {
xs: 'xs',
sm: 'xs',
md: 'sm',
lg: 'md',
xl: 'lg',
};
const initials = `${firstName.charAt(0).toUpperCase()}${lastName.charAt(0).toUpperCase()}`;
const fallbackAlt = alt || `${firstName} ${lastName}`;
if (profilePicture) {
return (_jsx(Image, { src: profilePicture, alt: fallbackAlt, style: "circle", size: size, isRounded: true, className: cn('profile-picture comment-profile-picture', className), noBorder: true, fallback: _jsx("div", { className: cn(sizeClasses[size], 'bg-primary rounded-full flex items-center justify-center', 'text-white font-semibold', 'comment-profile-picture'), children: _jsx(Typography, { variant: "p", size: textSize[size], className: "text-white font-semibold", children: initials }) }) }));
}
return (_jsx("div", { className: cn(sizeClasses[size], 'bg-primary rounded-full flex items-center justify-center', 'text-white font-semibold', 'profile-picture comment-profile-picture', className), children: _jsx(Typography, { variant: "p", size: textSize[size], className: "text-white font-semibold", children: initials }) }));
};