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

Update style

Browse Source
This commit is contained in:
MD. Ariful Alam
2021-08-24 00:56:35 +06:00
parent 3dc02f91c1
commit 154d1ebf99
9 changed files with 59 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/AvatarCard.js
View File

@@ -10,52 +10,49 @@ const AvatarCard = () => {
return (
<div className="card shadow-lg compact bg-base-100">
<figure>
{
loading ? (
skeleton({
width: 'w-full',
shape: '',
style: {
height: imageHeight
}
})
) : (
<LazyImage
className="object-cover w-full opacity-90"
src={profile.avatar ? profile.avatar : fallbackImage}
alt={profile.name}
style={{height: imageHeight}}
height={imageHeight}
placeholder={skeleton({
width: 'w-full',
shape: '',
style: {
height: imageHeight
}
})}
/>
)
}
</figure>
<div className="flex-row items-center space-x-4 card-body">
<div>
<div className="section-title">
<h5 className="card-title">
{
loading ? (
skeleton({width: 'w-3/6', height: 'h-8'})
) : profile.name
}
</h5>
</div>
<span className="text-base-content text-opacity-40 text-justify">
<div className="grid place-items-center py-8">
<div class="avatar">
<div class={`mb-8 rounded-full w-32 h-32${!loading ? ' ring ring-primary ring-offset-base-100 ring-offset-2' : ''}`}>
{
loading ? (
skeleton({width: 'w-48', height: 'h-4'})
skeleton({
width: 'w-full',
height: 'h-full',
shape: '',
})
) : (
<LazyImage
className="opacity-90"
src={profile.avatar ? profile.avatar : fallbackImage}
alt={profile.name}
height={imageHeight}
placeholder={
skeleton({
width: 'w-full',
height: 'h-full',
shape: '',
})
}
/>
)
}
</div>
</div>
<div className="text-center mx-8">
<div className="text-lg font-extrabold">
{
loading ? (
skeleton({ width: 'w-48', height: 'h-8' })
) : profile.name
}
</div>
<div className="mt-3 text-sm text-base-content text-opacity-60">
{
loading ? (
skeleton({ width: 'w-48', height: 'h-4' })
) : profile.bio
}
</span>
</div>
</div>
</div>
</div>