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

Update style

Browse Source
This commit is contained in:
Ariful Alam 2022-03-19 22:12:38 +06:00
parent 7a935e9cb5
commit fdffd280b7
2 changed files with 61 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,11 +18,11 @@ import config from '../../ezprofile.config';
const ListItem = ({ icon, title, value, link, skeleton = false }) => { const ListItem = ({ icon, title, value, link, skeleton = false }) => {
return ( return (
<div class="flex justify-start py-2 px-1 items-center"> <div className="flex justify-start py-2 px-1 items-center">
<span class="w-2 m-2">{icon}</span> <span className="w-2 m-2">{icon}</span>
<div class="flex-grow font-medium px-2">{title}</div> <div className="flex-grow font-medium px-2">{title}</div>
<div <div
class={`${ className={`${
skeleton ? 'flex-grow' : '' skeleton ? 'flex-grow' : ''
} text-sm font-normal text-right mr-2 ml-3 ${link ? 'truncate' : ''}`} } text-sm font-normal text-right mr-2 ml-3 ${link ? 'truncate' : ''}`}
> >

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

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