system-praktyk-front/src/pages/user/profile.tsx
2020-10-18 13:48:05 +02:00

59 lines
2.0 KiB
TypeScript

import React from "react";
import { Page } from "@/pages/base";
import { useTranslation } from "react-i18next";
import { useCurrentStudent } from "@/hooks";
import { Box, Button, Container, Link, Paper, Typography } from "@material-ui/core";
import { Student } from "@/data";
import { Link as RouterLink } from "react-router-dom";
import { route } from "@/routing";
import { Actions } from "@/components";
import { useVerticalSpacing } from "@/styles";
type StudentPreviewProps = {
student: Student;
}
export const StudentPreview = ({ student }: StudentPreviewProps) => {
const { t } = useTranslation();
return <>
<Typography className="proposal__primary">{ student.name } { student.surname }</Typography>
<Typography className="proposal__secondary">
{ t('internship.intern.semester', { semester: student.semester }) }
{ ", " }
{ t('internship.intern.album', { album: student.albumNumber }) }
</Typography>
</>;
}
export const UserProfilePage = () => {
const { t } = useTranslation();
const student = useCurrentStudent() as Student;
const spacing = useVerticalSpacing(3);
return <Page>
<Page.Header>
<Page.Breadcrumbs>
<Link component={ RouterLink } to={ route("home") }>{ t("pages.my-internship.header") }</Link>
<Typography color="textPrimary">{ t("pages.user-profile.title") }</Typography>
</Page.Breadcrumbs>
<Page.Title>{ t('pages.user-profile.title') }</Page.Title>
</Page.Header>
<Container className={ spacing.root }>
<Paper>
<Box p={2}>
<StudentPreview student={ student } />
</Box>
</Paper>
<Actions>
<Button component={ RouterLink } to={ route("home") }>
{ t('go-back') }
</Button>
</Actions>
</Container>
</Page>
}
export default UserProfilePage;