86 lines
3.4 KiB
TypeScript
86 lines
3.4 KiB
TypeScript
import { Internship, internshipTypeLabels } from "@/data";
|
|
import React from "react";
|
|
import { Paper, PaperProps, Typography, TypographyProps } from "@material-ui/core";
|
|
import { useTranslation } from "react-i18next";
|
|
import { createStyles, makeStyles } from "@material-ui/core/styles";
|
|
import classNames from "classnames";
|
|
import { useVerticalSpacing } from "@/styles";
|
|
import moment from "moment";
|
|
|
|
export type ProposalPreviewProps = {
|
|
proposal: Internship;
|
|
}
|
|
|
|
const Label = ({ children }: TypographyProps) => {
|
|
return <Typography variant="subtitle2" className="proposal__header">{ children }</Typography>
|
|
}
|
|
|
|
const useSectionStyles = makeStyles(theme => createStyles({
|
|
root: {
|
|
padding: theme.spacing(2),
|
|
}
|
|
}))
|
|
|
|
const Section = ({ children, ...props }: PaperProps) => {
|
|
const classes = useSectionStyles();
|
|
|
|
return <Paper {...props} className={ classNames(classes.root, props.className ) }>
|
|
{ children }
|
|
</Paper>
|
|
}
|
|
|
|
export const ProposalPreview = ({ proposal }: ProposalPreviewProps) => {
|
|
const { t } = useTranslation();
|
|
|
|
const classes = useVerticalSpacing(3);
|
|
const duration = moment.duration(proposal.endDate.diff(proposal.startDate));
|
|
|
|
return <div className={ classNames("proposal", classes.root) }>
|
|
<div>
|
|
<Typography className="proposal__primary">{ proposal.intern.name } { proposal.intern.surname }</Typography>
|
|
<Typography className="proposal__secondary">
|
|
{ t('internship.intern.semester', { semester: proposal.intern.semester }) }
|
|
{ ", " }
|
|
{ t('internship.intern.album', { album: proposal.intern.albumNumber }) }
|
|
</Typography>
|
|
</div>
|
|
|
|
<Section>
|
|
<Label>{ t('internship.sections.place') }</Label>
|
|
<Typography className="proposal__primary">
|
|
{ proposal.company.name }
|
|
</Typography>
|
|
<Typography className="proposal__secondary">
|
|
NIP: { proposal.company.nip }
|
|
</Typography>
|
|
|
|
<Label>{ t('internship.office') }</Label>
|
|
<Typography className="proposal__primary">{ t('internship.address.city', proposal.office.address) }</Typography>
|
|
<Typography className="proposal__secondary">{ t('internship.address.street', proposal.office.address) }</Typography>
|
|
</Section>
|
|
|
|
<Section>
|
|
<Label>{ t('internship.sections.kind') }</Label>
|
|
<Typography className="proposal__primary">{ internshipTypeLabels[proposal.type].label }</Typography>
|
|
</Section>
|
|
|
|
<Section>
|
|
<Label>{ t('internship.sections.duration') }</Label>
|
|
<Typography className="proposal__primary">
|
|
{ t('internship.date-range', { start: proposal.startDate, end: proposal.endDate }) }
|
|
</Typography>
|
|
<Typography className="proposal__secondary">
|
|
{ t('internship.duration', { duration, count: Math.floor(duration.asWeeks()) }) }
|
|
{ ", " }
|
|
{ t('internship.hours', { hours: proposal.hours }) }
|
|
</Typography>
|
|
</Section>
|
|
|
|
<Section>
|
|
<Label>{ t('internship.sections.mentor') }</Label>
|
|
<Typography className="proposal__primary">{ proposal.mentor.name } { proposal.mentor.surname }</Typography>
|
|
<Typography className="proposal__secondary">{ proposal.mentor.email }, { proposal.mentor.phone }</Typography>
|
|
</Section>
|
|
</div>
|
|
}
|