Improved accordion list style
This commit is contained in:
parent
a051db8746
commit
3b66ecfbdd
@ -14,17 +14,30 @@ export const personalData: PersonalData = {
|
|||||||
],
|
],
|
||||||
jobs: {
|
jobs: {
|
||||||
current: {
|
current: {
|
||||||
position: 'Janitor',
|
position: 'Senior Software Development Manager',
|
||||||
company: 'Cleaners Limited',
|
company: 'Oracle|NetSuite',
|
||||||
timerange: '2022 - present',
|
timerange: '2022 - present',
|
||||||
description: 'Cleanup duty 24/7.',
|
description: 'Lead role in the development of internal UI frameworks, components and tools.',
|
||||||
|
tags: ['TypeScript', 'Preact', 'NodeJs/NPM']
|
||||||
},
|
},
|
||||||
previous: [
|
previous: [
|
||||||
{
|
{
|
||||||
position: 'CEO',
|
position: 'Software Development Manager',
|
||||||
company: 'CryptoDancers',
|
company: 'Oracle|NetSuite',
|
||||||
timerange: '2019 - 2022',
|
timerange: '2017 - 2022',
|
||||||
description: 'Revolutionizing the crypto world.',
|
description: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
position: 'Senior Software Engineer',
|
||||||
|
company: 'Oracle|NetSuite',
|
||||||
|
timerange: '2013 - 2017',
|
||||||
|
description: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
position: 'Software Engineer',
|
||||||
|
company: 'Q2 Interactive',
|
||||||
|
timerange: '2009 - 2013',
|
||||||
|
description: '',
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
@ -7,7 +7,8 @@ export type Job = {
|
|||||||
position: string,
|
position: string,
|
||||||
company: string,
|
company: string,
|
||||||
timerange: string,
|
timerange: string,
|
||||||
description: string
|
description: string,
|
||||||
|
tags?: string[],
|
||||||
}
|
}
|
||||||
|
|
||||||
export type Jobs = {
|
export type Jobs = {
|
||||||
|
@ -1,13 +1,7 @@
|
|||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Container from 'react-bootstrap/Container';
|
import { Job } from '@/PersonalDataTypes';
|
||||||
import Col from 'react-bootstrap/Col';
|
import { Accordion, Row } from 'react-bootstrap';
|
||||||
import Row from 'react-bootstrap/Row';
|
|
||||||
import JobCard from './JobCard';
|
|
||||||
import { partition } from '../../utils';
|
|
||||||
import { Job, Jobs } from '@/PersonalDataTypes';
|
|
||||||
import useSize from '../../hooks/Size';
|
|
||||||
import { Accordion } from 'react-bootstrap';
|
|
||||||
import { JobListProps } from './types';
|
import { JobListProps } from './types';
|
||||||
|
|
||||||
|
|
||||||
@ -20,42 +14,24 @@ const defaultProps = {
|
|||||||
currentHeading: 'Currently',
|
currentHeading: 'Currently',
|
||||||
}
|
}
|
||||||
|
|
||||||
function FullList(props: JobListProps) {
|
|
||||||
const {jobs} = props
|
|
||||||
const config = {...defaultProps, ...props}
|
|
||||||
return (
|
|
||||||
<Container>
|
|
||||||
{jobs.current && (
|
|
||||||
<Row>
|
|
||||||
<Col>
|
|
||||||
<JobCard heading={config.currentHeading} {...jobs.current} />
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
)}
|
|
||||||
{partition(jobs.previous, config.entriesPerRow).map((jobs, index) => (
|
|
||||||
<Row key={index}>
|
|
||||||
{(jobs.map((job, subindex) => (
|
|
||||||
<Col key={index + '_' + subindex}>
|
|
||||||
<JobCard {...job} />
|
|
||||||
</Col>
|
|
||||||
)))}
|
|
||||||
</Row>
|
|
||||||
))}
|
|
||||||
</Container>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function JobsAccordion(props: JobListProps) {
|
export default function JobsAccordion(props: JobListProps) {
|
||||||
const {jobs} = props
|
const {jobs} = props
|
||||||
const config = {...defaultProps, ...props}
|
const config = {...defaultProps, ...props}
|
||||||
function jobTitle(job: Job) {
|
function JobTitle(props: {job: Job, heading?: string}) {
|
||||||
return `${job.position} at ${job.company}, ${job.timerange}`
|
const {job, heading} = props
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div><strong>{job.position}</strong></div>
|
||||||
|
<div>{job.company}, {job.timerange}</div>
|
||||||
|
{heading && (<div>({heading})</div>)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<Accordion defaultActiveKey={jobs.current ? 'current' : 'previous-0'} alwaysOpen>
|
<Accordion defaultActiveKey={jobs.current ? 'current' : 'previous-0'}>
|
||||||
{jobs.current && (
|
{jobs.current && (
|
||||||
<Accordion.Item eventKey="current">
|
<Accordion.Item eventKey="current">
|
||||||
<Accordion.Header>{config.currentHeading}:<br />{jobTitle(jobs.current)} </Accordion.Header>
|
<Accordion.Header><JobTitle heading={config.currentHeading} job={jobs.current} /> </Accordion.Header>
|
||||||
<Accordion.Body>
|
<Accordion.Body>
|
||||||
{jobs.current.position}
|
{jobs.current.position}
|
||||||
</Accordion.Body>
|
</Accordion.Body>
|
||||||
@ -63,7 +39,7 @@ export default function JobsAccordion(props: JobListProps) {
|
|||||||
)}
|
)}
|
||||||
{jobs.previous?.map((job, index) => (
|
{jobs.previous?.map((job, index) => (
|
||||||
<Accordion.Item eventKey={`previous-${index}`} key={index}>
|
<Accordion.Item eventKey={`previous-${index}`} key={index}>
|
||||||
<Accordion.Header>{jobTitle(job)}</Accordion.Header>
|
<Accordion.Header><JobTitle job={job} /></Accordion.Header>
|
||||||
<Accordion.Body>
|
<Accordion.Body>
|
||||||
{job.description}
|
{job.description}
|
||||||
</Accordion.Body>
|
</Accordion.Body>
|
||||||
|
Loading…
Reference in New Issue
Block a user