Base jobs history section

src/app/components/JobCard.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Card from 'react-bootstrap/Card';
+
+export type Props = {
+    heading?: string,
+    position: string,
+    timerange: string,
+    company: string, 
+    description: string
+};
+
+export default function JobCard(props: Props) {
+    return (
+        <Card className='job-card'>
+            {props.heading && (
+                <Card.Header>{props.heading}</Card.Header>
+            )}
+            <Card.Body>
+                <Card.Title>{props.position}</Card.Title>
+                <Card.Subtitle>
+                    <span className='company-name'>{props.company}</span>, <span className='timerange'>{props.timerange}</span>
+                    </Card.Subtitle>
+                <Card.Text>{props.description}</Card.Text>
+            </Card.Body>
+        </Card>
+    );
+}

src/app/components/JobsHistory.tsx

@@ -0,0 +1,37 @@
+
+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';
+
+export default function JobsHistory() {
+    return (
+    <Container>
+        <Row>
+          <Col >
+          <JobCard 
+            heading='Current position'
+            position='Senior Software Development Manager - UI Toolkit'
+            timerange='2022 - present'
+            company='Oracle | NetSuite'
+            description='Team leadership Lorem Ipsum'
+            /></Col>
+        </Row>
+        <Row lg={2}>
+          <Col><JobCard 
+            position='Software Development Manager - UI Toolkit'
+            timerange='2020 - 2022'
+            company='Oracle | NetSuite'
+            description='Team leadership Lorem Ipsum'
+            /></Col>
+          <Col><JobCard 
+            position='Software Development Manager - ERP Tax'
+            timerange='2015 - 2020'
+            company='Oracle | NetSuite'
+            description='Team leadership Lorem Ipsum'
+            /></Col>
+        </Row>
+      </Container>
+    )
+}

src/app/globals.css

@@ -1,2 +1,10 @@
 
 @import 'bootstrap/dist/css/bootstrap.min.css';
+
+.job-card {
+    margin-top: 1em;
+}
+
+.job-card .timerange {
+    font-style: italic;
+}

src/app/layout.tsx

@@ -1,7 +1,8 @@
-import './globals.css'
+import React from 'react'
-
 import { Inter } from 'next/font/google'
 
+import './globals.css'
+
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {

src/app/page.tsx

@@ -1,15 +1,12 @@
 'use client'
-import Button from 'react-bootstrap/Button';
+import React from 'react';
-import Alert from 'react-bootstrap/Alert';
+import Container from 'react-bootstrap/Container';
+import JobsHistory from './components/JobsHistory';
 
 export default function Home() {
   return (
-    <main>
+    <Container fluid='xxl'>
-      <Alert variant='info'>
+      <JobsHistory></JobsHistory>
-          This Bootstrap theme works.
+    </Container>
-        </Alert>
-      <Button>Yes!</Button>
-  
-    </main>
   )
 }