noham/gitprofile
1
0
Fork 0
mirror of https://github.com/NohamR/gitprofile.git synced 2026-05-26 04:17:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove context for state management

Browse Source
This commit is contained in:
Ariful Alam
2022-03-19 16:34:13 +06:00
parent b69ced8ce0
commit ab55fa68f1
13 changed files with 61 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/avatar-card/index.jsx
View File

@@ -1,16 +1,12 @@
import PropTypes from 'prop-types';
import { useContext } from 'react';
import { LoadingContext } from '../../contexts/LoadingContext';
import { skeleton } from '../../helpers/utils';
import LazyImage from '../lazy-image';
const AvatarCard = (props) => {
const { loading } = useContext(LoadingContext);
const AvatarCard = ({ profile, loading }) => {
return (
<div className="card shadow-lg compact bg-base-100">
<div className="grid place-items-center py-8">
{loading || !props.profile ? (
{loading || !profile ? (
<div className="avatar opacity-90">
<div className="mb-8 rounded-full w-32 h-32">
{skeleton({
@@ -25,10 +21,8 @@ const AvatarCard = (props) => {
<div className="mb-8 rounded-full w-32 h-32 ring ring-primary ring-offset-base-100 ring-offset-2">
{
<LazyImage
src={
props.profile.avatar ? props.profile.avatar : fallbackImage
}
alt={props.profile.name}
src={profile.avatar ? profile.avatar : fallbackImage}
alt={profile.name}
placeholder={skeleton({
width: 'w-full',
height: 'h-full',
@@ -41,16 +35,16 @@ const AvatarCard = (props) => {
)}
<div className="text-center mx-auto px-8">
<h5 className="font-bold text-2xl">
{loading || !props.profile ? (
{loading || !profile ? (
skeleton({ width: 'w-48', height: 'h-8' })
) : (
<span className="opacity-70">{props.profile.name}</span>
<span className="opacity-70">{profile.name}</span>
)}
</h5>
<div className="mt-3 text-base-content text-opacity-60">
{loading || !props.profile
{loading || !profile
? skeleton({ width: 'w-48', height: 'h-5' })
: props.profile.bio}
: profile.bio}
</div>
</div>
</div>