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';
|
@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 { Inter } from 'next/font/google'
|
||||||
|
|
||||||
|
import './globals.css'
|
||||||
|
|
||||||
const inter = Inter({ subsets: ['latin'] })
|
const inter = Inter({ subsets: ['latin'] })
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
|
@ -1,15 +1,12 @@
|
|||||||
'use client'
|
'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() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<main>
|
<Container fluid='xxl'>
|
||||||
<Alert variant='info'>
|
<JobsHistory></JobsHistory>
|
||||||
This Bootstrap theme works.
|
</Container>
|
||||||
</Alert>
|
|
||||||
<Button>Yes!</Button>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user