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

Update style of right section

Browse Source
This commit is contained in:
Ariful Alam 2022-03-20 00:17:15 +06:00
parent b4c81095e8
commit b4d65da1a7
3 changed files with 66 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/details/index.jsx
View File

@ -47,6 +47,7 @@ const Details = ({ profile, loading }) => {
for (let index = 0; index < 4; index++) {
array.push(
<ListItem
key={index}
skeleton={true}
icon={skeleton({ width: 'w-4', height: 'h-4' })}
title={skeleton({ width: 'w-24', height: 'h-4' })}

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

@ -1,34 +1,38 @@
import { GoPrimitiveDot } from 'react-icons/go';
import { skeleton } from '../../helpers/utils';
import config from '../../ezprofile.config';
import { Fragment } from 'react';
const ListItem = ({ time, degree, institution }) => (
<li className="mb-5 ml-4">
<div
className="absolute w-2 h-2 bg-base-300 rounded-full border border-base-300 mt-1.5"
style={{ left: '-4.5px' }}
></div>
<div className="my-0.5 text-xs opacity-80">{time}</div>
<h3 className="font-semibold opacity-90">{degree}</h3>
<div className="mb-4 font-normal opacity-90">{institution}</div>
</li>
);
const Education = ({ loading }) => {
const renderSkeleton = () => {
let array = [];
for (let index = 0; index < 2; index++) {
array.push(
<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>
<ListItem
key={index}
time={skeleton({
width: 'w-5/12',
height: 'h-4',
})}
degree={skeleton({
width: 'w-6/12',
height: 'h-4',
className: 'my-1.5',
})}
institution={skeleton({ width: 'w-6/12', height: 'h-3' })}
/>
);
}
@ -51,27 +55,18 @@ const Education = ({ loading }) => {
</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">
<ol className="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>
<h3 class="font-semibold opacity-90">
{item.degree}
</h3>
<p class="mb-4 font-normal opacity-90">
{item.institution}
</p>
</li>
<ListItem
key={index}
time={`${item.from} - ${item.to}`}
degree={item.degree}
institution={item.institution}
/>
))}
</Fragment>
)}

70
src/components/experience/index.jsx
View File

@ -3,33 +3,36 @@ import { skeleton } from '../../helpers/utils';
import config from '../../ezprofile.config';
import { Fragment } from 'react';
const ListItem = ({ time, position, company }) => (
<li className="mb-5 ml-4">
<div
className="absolute w-2 h-2 bg-base-300 rounded-full border border-base-300 mt-1.5"
style={{ left: '-4.5px' }}
></div>
<div className="my-0.5 text-xs opacity-80">{time}</div>
<h3 className="font-semibold opacity-90">{position}</h3>
<div className="mb-4 font-normal opacity-90">{company}</div>
</li>
);
const Experience = ({ loading }) => {
const renderSkeleton = () => {
let array = [];
for (let index = 0; index < 2; index++) {
array.push(
<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>
<ListItem
key={index}
time={skeleton({
width: 'w-5/12',
height: 'h-4',
})}
position={skeleton({
width: 'w-6/12',
height: 'h-4',
className: 'my-1.5',
})}
company={skeleton({ width: 'w-6/12', height: 'h-3' })}
/>
);
}
@ -52,27 +55,18 @@ const Experience = ({ loading }) => {
</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">
<ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
{loading ? (
renderSkeleton()
) : (
<Fragment>
{config.experiences.map((experience, 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">
{experience.from} - {experience.to}
</div>
<h3 class="font-semibold opacity-90">
{experience.position}
</h3>
<p class="mb-4 font-normal opacity-90">
{experience.company}
</p>
</li>
<ListItem
key={index}
time={`${experience.from} - ${experience.to}`}
position={experience.position}
company={experience.company}
/>
))}
</Fragment>
)}