profile-plus
Version:
34 lines • 2.02 kB
JavaScript
import React from 'react';
import style from './ProfilePreview.module.scss';
import { linkedComponent } from '../package.js';
import { Person } from '../shapes/Person.js';
import { cl } from 'lincd/utils/ClassNames';
import { asset } from 'lincd/utils/LinkedFileStorage';
const DEFAULT_SRC = asset('/images/no-profile-picture.png');
const query = Person.query((person) => ({
profilePictureCropped: person.profilePicture.cropped.contentUrl,
profilePictureFull: person.profilePicture.image.contentUrl,
givenName: person.givenName,
age: person.age,
}));
export const ProfilePreview = linkedComponent(query, ({ profilePictureFull, profilePictureCropped, givenName, age, onClick, subText, className, badgeOption, showData, rightIcon, leftIcon, }) => {
//TODO: make it possible to add a top level className
// check: can we use this to style the image, or other nested elements? (without using !important)
let src = profilePictureCropped || profilePictureFull || DEFAULT_SRC;
return (React.createElement("div", { onClick: onClick, className: cl(style.profileCard, className) },
React.createElement("div", { className: style.profileCardImage },
badgeOption && badgeOption,
React.createElement("div", { className: style.profileCardImageWrap },
React.createElement("img", { src: src, className: `${style.profileImage}`, alt: "" }))),
(givenName || age) && showData !== false && (React.createElement("div", { className: style.profileDataContainer },
rightIcon && rightIcon,
React.createElement("div", null,
React.createElement("h1", { className: style.profileText },
givenName,
age ? ', ' + age : ''),
subText && React.createElement("h2", { className: style.profileSmallText }, subText)),
leftIcon && leftIcon))));
});
//register all components in this file
// registerPackageModule(module);
//# sourceMappingURL=ProfilePreview.js.map