Base jobs history section

This commit is contained in:
Dejvino 2023-05-24 08:43:30 +02:00
parent a610c23ead
commit 6b6a29714c
5 changed files with 81 additions and 11 deletions

View 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>
);
}

View 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>
)
}

View File

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

View File

@ -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 = {

View File

@ -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>
)
}