Improved accordion list style

src/app/components/job/JobsAccordion.tsx

@@ -1,13 +1,7 @@
 
 import React from 'react';
-import Container from 'react-bootstrap/Container';
-import Col from 'react-bootstrap/Col';
-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 { Job } from '@/PersonalDataTypes';
+import { Accordion, Row } from 'react-bootstrap';
 import { JobListProps } from './types';
 
 
@@ -20,42 +14,24 @@ const defaultProps = {
   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) {
   const {jobs} = props
   const config = {...defaultProps, ...props}
-  function jobTitle(job: Job) {
-    return `${job.position} at ${job.company}, ${job.timerange}`
+  function JobTitle(props: {job: Job, heading?: string}) {
+    const {job, heading} = props
+    return (
+      <div>
+        <div><strong>{job.position}</strong></div>
+        <div>{job.company}, {job.timerange}</div>
+        {heading && (<div>({heading})</div>)}
+      </div>
+    )
   }
   return (
-    <Accordion defaultActiveKey={jobs.current ? 'current' : 'previous-0'} alwaysOpen>
+    <Accordion defaultActiveKey={jobs.current ? 'current' : 'previous-0'}>
       {jobs.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>
           {jobs.current.position}
         </Accordion.Body>
@@ -63,7 +39,7 @@ export default function JobsAccordion(props: JobListProps) {
       )}
       {jobs.previous?.map((job, index) => (
       <Accordion.Item eventKey={`previous-${index}`} key={index}>
-        <Accordion.Header>{jobTitle(job)}</Accordion.Header>
+        <Accordion.Header><JobTitle job={job} /></Accordion.Header>
         <Accordion.Body>
         {job.description}
         </Accordion.Body>