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

Refactor section

Browse Source
This commit is contained in:
MD. Ariful Alam
2021-08-24 19:45:34 +06:00
parent 9bf4c1fd38
commit 1f14db6b83
4 changed files with 31 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/AvatarCard.js
View File

@@ -2,8 +2,6 @@ import { useSelector } from "react-redux";
import { fallbackImage, skeleton } from "../helpers/utils";
import LazyImage from "./LazyImage";
const imageHeight = 300;
const AvatarCard = () => {
const profile = useSelector(state => state.profile);
const loading = useSelector(state => state.loading);
@@ -11,7 +9,7 @@ const AvatarCard = () => {
return (
<div className="card shadow-lg compact bg-base-100">
<div className="grid place-items-center py-8">
<div className="avatar">
<div className="avatar opacity-90">
<div className={`mb-8 rounded-full w-32 h-32${!loading ? ' ring ring-primary ring-offset-base-100 ring-offset-2' : ''}`}>
{
loading ? (
@@ -22,10 +20,8 @@ const AvatarCard = () => {
})
) : (
<LazyImage
className="opacity-90"
src={profile.avatar ? profile.avatar : fallbackImage}
alt={profile.name}
height={imageHeight}
placeholder={
skeleton({
width: 'w-full',
@@ -39,19 +35,17 @@ const AvatarCard = () => {
</div>
</div>
<div className="text-center mx-8">
<span className="opacity-60">
<h5 className="card-title font-extrabold">
{
loading ? (
skeleton({ width: 'w-48', height: 'h-8' })
) : <span className="opacity-60">{profile.name}</span>
}
</h5>
</span>
<div className="mt-3 text-sm text-base-content text-opacity-60">
<h5 className="font-bold text-2xl">
{
loading ? (
skeleton({ width: 'w-48', height: 'h-4' })
skeleton({ width: 'w-48', height: 'h-8' })
) : <span className="opacity-70">{profile.name}</span>
}
</h5>
<div className="mt-3 text-base-content text-opacity-60">
{
loading ? (
skeleton({ width: 'w-48', height: 'h-5', className: 'mt-4' })
) : profile.bio
}
</div>