Base jobs history section
This commit is contained in:
parent
a610c23ead
commit
6b6a29714c
27
src/app/components/JobCard.tsx
Normal file
27
src/app/components/JobCard.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
37
src/app/components/JobsHistory.tsx
Normal file
37
src/app/components/JobsHistory.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
@ -1,2 +1,10 @@
|
||||
|
||||
@import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
.job-card {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.job-card .timerange {
|
||||
font-style: italic;
|
||||
}
|
@ -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 = {
|
||||
|
@ -1,15 +1,12 @@
|
||||
'use client'
|
||||
import Button from 'react-bootstrap/Button';
|
||||
import Alert from 'react-bootstrap/Alert';
|
||||
import React from 'react';
|
||||
import Container from 'react-bootstrap/Container';
|
||||
import JobsHistory from './components/JobsHistory';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main>
|
||||
<Alert variant='info'>
|
||||
This Bootstrap theme works.
|
||||
</Alert>
|
||||
<Button>Yes!</Button>
|
||||
|
||||
</main>
|
||||
<Container fluid='xxl'>
|
||||
<JobsHistory></JobsHistory>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user