|
- 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='Main' icon='bookmark-star' style='primary' tags={person.skills.primary} /></SkillsCol>
- {person.skills.secondary && (
- <SkillsCol><TagCloud title='Support' 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>
- )
- }
|