Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Refactored and cleaned up avatar component

Browse source
This commit is contained in:
James Morris 2022-07-06 09:42:01 +02:00
parent 172bbc07c6
commit 73e6e053eb
3 changed files with 34 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
apps/comments-ui/src/components/Avatar.js Normal file
View file

@ -0,0 +1,30 @@
import React from 'react';
import AppContext from '../AppContext';
import {getInitials} from '../utils/helpers';
class Avatar extends React.Component {
static contextType = AppContext;
getInitials() {
if (!this.context.member || !this.context.member.name) {
return '';
}
return getInitials(this.context.member.name);
}
render() {
let dimensionClasses = (this.props.size === 'small' ? 'w-8 h-8' : 'w-10 h-10');
let initialsClasses = (this.props.size === 'small' ? 'text-sm' : 'text-base');
return (
<figure className={`relative ${dimensionClasses}`}>
<div className={`flex justify-center items-center rounded-full bg-black ${dimensionClasses}`}>
<p className={`text-white font-sans font-semibold ${initialsClasses}`}>{ this.getInitials() }</p>
</div>
<img className={`absolute top-0 left-0 rounded-full ${dimensionClasses}`} src={this.context.member.avatar_image} alt="Avatar"/>
</figure>
);
}
}
export default Avatar;

14
apps/comments-ui/src/components/Comment.js
View file

@ -2,8 +2,8 @@ import {formatRelativeTime} from '../utils/helpers';
import {ReactComponent as MoreIcon} from '../images/icons/more.svg';
import React from 'react';
import AppContext from '../AppContext';
import {getInitials} from '../utils/helpers';
import CommentContextMenu from './modals/CommentContextMenu';
import Avatar from './Avatar';
class Comment extends React.Component {
static contextType = AppContext;
@ -23,11 +23,6 @@ class Comment extends React.Component {
}));
}
getInitials() {
const comment = this.props.comment;
return getInitials(comment.member.name);
}
render() {
const comment = this.props.comment;
@ -37,12 +32,7 @@ class Comment extends React.Component {
<div className="flex mb-4">
<div>
<div className="flex mb-2 space-x-4 justify-start items-center">
<figure className="relative w-10 h-10">
<div className="flex justify-center items-center w-10 h-10 rounded-full bg-black">
<p className="text-white font-sans font-semibold">{ this.getInitials() }</p>
</div>
<img className="absolute top-0 left-0 w-10 h-10 rounded-full" src={comment.member.avatar_image} alt="Avatar"/>
</figure>
<Avatar />
<div>
<h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
<h6 className="text-xs text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>

16
apps/comments-ui/src/components/Form.js
View file

@ -1,6 +1,6 @@
import React from 'react';
import AppContext from '../AppContext';
import {getInitials} from '../utils/helpers';
import Avatar from './Avatar';
class Form extends React.Component {
static contextType = AppContext;
@ -51,23 +51,11 @@ class Form extends React.Component {
this.setState({message: event.target.value});
}
getInitials() {
if (!this.context.member || !this.context.member.name) {
return '';
}
return getInitials(this.context.member.name);
}
render() {
return (
<form onSubmit={this.submitForm} className="comment-form">
<div className="flex bg-neutral-50 p-3 space-x-3 rounded-md dark:bg-transparent">
<figure>
{this.context.member ?
<img className="w-8 h-8 rounded-full" src={this.context.member.avatar_image} alt="Avatar"/> :
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-black">{ this.getInitials() }</div>
}
</figure>
<Avatar size="small" />
<div className="w-full">
<textarea className="w-full resize-none rounded-md border h-24 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300" value={this.state.message} onChange={this.handleChange} placeholder="Join the conversation" />
<button type="submit" className="w-full rounded-md border p-3 py-3 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800">Add your comment</button>