1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00

made sample profile page

This commit is contained in:
Fedor Katurov 2021-10-01 12:01:11 +07:00
parent b43fb35b47
commit a808045a7d
17 changed files with 118 additions and 179 deletions

View file

@ -9,6 +9,9 @@ import classNames from 'classnames';
import styles from './styles.module.scss';
import markdown from '~/styles/common/markdown.module.scss';
import { ProfileAvatar } from '~/containers/profile/ProfileAvatar';
import { Avatar } from '~/components/common/Avatar';
import { Markdown } from '~/components/containers/Markdown';
interface IProps {
profile: IAuthState['profile'];
@ -16,49 +19,30 @@ interface IProps {
}
const ProfilePageLeft: FC<IProps> = ({ username, profile }) => {
const thumb = useMemo(() => {
if (!profile || !profile.user || !profile.user.photo) return '';
return getURL(profile.user.photo, PRESETS.small_hero);
}, [profile]);
return (
<div className={styles.wrap}>
<div className={styles.avatar} style={{ backgroundImage: `url('${thumb}')` }} />
<Avatar
username={username}
url={profile.user?.photo?.url}
className={styles.avatar}
preset={PRESETS['600']}
/>
<div className={styles.region_wrap}>
<div className={styles.region}>
<div className={styles.name}>
{profile.is_loading ? <Placeholder /> : profile?.user?.fullname}
</div>
<div className={styles.region}>
<div className={styles.name}>
{profile.is_loading ? <Placeholder /> : profile?.user?.fullname}
</div>
<div className={styles.username}>
{profile.is_loading ? <Placeholder /> : `~${profile?.user?.username}`}
</div>
<div className={styles.menu}>
<Link to={`${URLS.PROFILE_PAGE(username)}/`}>
<Icon icon="profile" size={20} />
Профиль
</Link>
<Link to={`${URLS.PROFILE_PAGE(username)}/settings`}>
<Icon icon="settings" size={20} />
Настройки
</Link>
<Link to={`${URLS.PROFILE_PAGE(username)}/messages`}>
<Icon icon="messages" size={20} />
Сообщения
</Link>
</div>
<div className={styles.username}>
{profile.is_loading ? <Placeholder /> : `~${profile?.user?.username}`}
</div>
</div>
{profile && profile.user && profile.user.description && false && (
<div className={classNames(styles.description, markdown.wrapper)}>
{formatText(profile?.user?.description || '')}
</div>
{profile && profile.user && profile.user.description && (
<Markdown
className={styles.description}
dangerouslySetInnerHTML={{ __html: formatText(profile.user.description) }}
/>
)}
</div>
);