46 lines
1.6 KiB
JavaScript
46 lines
1.6 KiB
JavaScript
import { useSelector } from "react-redux";
|
|
import config from "../config";
|
|
import { skeleton } from "../helpers/utils";
|
|
|
|
const Skill = () => {
|
|
const loading = useSelector(state => state.loading);
|
|
|
|
const renderSkeleton = () => {
|
|
let array = [];
|
|
for (let index = 0; index < 12; index++) {
|
|
array.push((
|
|
<div key={index}>
|
|
{skeleton({width: 'w-16', height: 'h-4'})}
|
|
</div>
|
|
))
|
|
}
|
|
|
|
return array;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{
|
|
(typeof config.skills !== 'undefined' && config.skills.length !== 0) && (
|
|
<div className="card shadow-lg compact bg-base-100">
|
|
<div className="card-body">
|
|
<div className="inline-flex gap-2 flex-wrap justify-center p-3">
|
|
{
|
|
loading ? renderSkeleton() : (
|
|
config.skills.map((skill, index) => (
|
|
<div key={index} className="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 badge-primary bg-opacity-75 rounded-full">
|
|
{skill}
|
|
</div>
|
|
))
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Skill; |