24 lines
887 B
TypeScript
24 lines
887 B
TypeScript
import React, {ComponentProps} from 'react';
|
|
import {CheckBadgeIcon} from '@heroicons/react/24/outline';
|
|
import {getTagColor, getTagTitle, Tag} from '../Model/tag';
|
|
import {groupBy, map} from 'lodash';
|
|
|
|
function Skills(props: ComponentProps<any>) {
|
|
const tagsByCat = groupBy(props.tags, 'category')
|
|
return (<div className="prose">
|
|
<h3><CheckBadgeIcon className="icon"/> Compétences</h3>
|
|
<div className="flex flex-wrap justify-between">
|
|
{map(tagsByCat, (tags, cat) => {
|
|
return (<div key={cat}>
|
|
<h4 className="m-0 mb-1.5">{getTagTitle(cat)}</h4>
|
|
<div>
|
|
{tags.map((t: Tag) => <button key={t.name} className={"tag " + getTagColor(t)}>{t.name}</button>)}
|
|
</div>
|
|
</div>)
|
|
})}
|
|
</div>
|
|
</div>);
|
|
}
|
|
|
|
export default Skills;
|