ilia/profile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update style of education history

Browse Source
This commit is contained in:
Ariful Alam 2022-03-19 22:18:34 +06:00
parent fdffd280b7
commit 86ad16ee31
1 changed files with 57 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
src/components/education/index.jsx
View File

@ -1,35 +1,33 @@
import { GoPrimitiveDot } from 'react-icons/go';
import { skeleton } from '../../helpers/utils';
import config from '../../ezprofile.config';
import { Fragment } from 'react';
const Education = ({ loading }) => {
const renderSkeleton = () => {
let array = [];
for (let index = 0; index < 2; index++) {
array.push(
<li key={index}>
<span>
{skeleton({ width: 'w-2', height: 'h-2', className: 'mr-2' })}
<div className="w-full">
<div className="block justify-between">
<div>
{skeleton({
width: 'w-9/12',
height: 'h-4',
className: 'mb-2',
})}
</div>
<div>
{skeleton({
width: 'w-6/12',
height: 'h-4',
className: 'mb-2',
})}
</div>
</div>
<div>{skeleton({ width: 'w-6/12', height: 'h-3' })}</div>
</div>
</span>
<li class="mb-5 ml-4">
<div
class="absolute w-2 h-2 bg-base-300 rounded-full border border-base-300 mt-1.5"
style={{ left: '-4.5px' }}
></div>
<div class="my-0.5 text-xs opacity-80">
{skeleton({
width: 'w-5/12',
height: 'h-4',
})}
</div>
<h3 class="font-semibold opacity-90">
{skeleton({
width: 'w-6/12',
height: 'h-4',
className: 'my-1.5',
})}
</h3>
<p class="mb-4 font-normal opacity-90">
{skeleton({ width: 'w-6/12', height: 'h-3' })}
</p>
</li>
);
}
@ -43,41 +41,42 @@ const Education = ({ loading }) => {
config.education.length !== 0 && (
<div className="card shadow-lg compact bg-base-100">
<div className="card-body">
<ul className="menu row-span-3 bg-base-100 text-base-content">
<li>
<div className="pb-0-important mx-3">
<h5 className="card-title">
{loading ? (
skeleton({ width: 'w-32', height: 'h-8' })
) : (
<span className="opacity-70">Education</span>
)}
</h5>
</div>
</li>
{loading
? renderSkeleton()
: config.education.map((item, index) => (
<li key={index}>
<span>
<div>
<GoPrimitiveDot className="mr-2 opacity-40" />
<div className="mx-3">
<h5 className="card-title">
{loading ? (
skeleton({ width: 'w-32', height: 'h-8' })
) : (
<span className="opacity-70">Education</span>
)}
</h5>
</div>
<div className="text-base-content text-opacity-60">
<ol class="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
{loading ? (
renderSkeleton()
) : (
<Fragment>
{config.education.map((item, index) => (
<li class="mb-5 ml-4">
<div
class="absolute w-2 h-2 bg-base-300 rounded-full border border-base-300 mt-1.5"
style={{ left: '-4.5px' }}
></div>
<div class="my-0.5 text-xs opacity-80">
{item.from} - {item.to}
</div>
<div>
<div className="block justify-between">
<div className="font-medium opacity-70">
{item.institution}
</div>
<div className="opacity-50">
{item.from} - {item.to}
</div>
</div>
<div className="opacity-70">{item.degree}</div>
</div>
</span>
</li>
))}
</ul>
<h3 class="font-semibold opacity-90">
{item.degree}
</h3>
<p class="mb-4 font-normal opacity-90">
{item.institution}
</p>
</li>
))}
</Fragment>
)}
</ol>
</div>
</div>
</div>
)}