33 lines
1.3 KiB
TypeScript
33 lines
1.3 KiB
TypeScript
import React, { ReactNode, useContext } from 'react';
|
|
import Container from 'react-bootstrap/Container';
|
|
import { PersonContext } from '../hooks/PersonContext';
|
|
import TagCloud from './TagCloud';
|
|
import { Col, Row } from 'react-bootstrap';
|
|
|
|
function SkillsCol(props: { children: ReactNode }) {
|
|
return <Col xs={12} sm={6} lg={12}>{props.children}</Col>
|
|
}
|
|
export default function Skills() {
|
|
const person = useContext(PersonContext)
|
|
return (
|
|
<Container className='skills' fluid>
|
|
<h2>Skills</h2>
|
|
<Row>
|
|
<SkillsCol><TagCloud title='Primary' icon='bookmark-star' style='primary' tags={person.skills.primary} /></SkillsCol>
|
|
{person.skills.secondary && (
|
|
<SkillsCol><TagCloud title='Secondary' icon='bookmark-plus' tags={person.skills.secondary} /></SkillsCol>
|
|
)}
|
|
{person.skills.languages && (
|
|
<SkillsCol><TagCloud title='Languages' icon='bookmarks' tags={person.skills.languages} /></SkillsCol>
|
|
)}
|
|
{person.skills.others && (
|
|
<SkillsCol><TagCloud title='Others' icon='bookmark' tags={person.skills.others} /></SkillsCol>
|
|
)}
|
|
{person.interests && (
|
|
<SkillsCol><TagCloud title='Interests' icon='bookmark-heart' style='light' tags={person.interests} /></SkillsCol>
|
|
)}
|
|
</Row>
|
|
</Container>
|
|
)
|
|
}
|