Skip to content

Commit 7f2c1c0

Browse files
plzfdayplzfday
committed
✨ feat: Add link to landing page in Nav and Add CustomLink component
1 parent 9abc32b commit 7f2c1c0

File tree

4 files changed

+73
-44
lines changed

4 files changed

+73
-44
lines changed

‎src/app/layout.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import type { Metadata } from 'next';
22
import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
3-
import { ThemeProvider } from '@mui/material';
3+
import { Container, ThemeProvider } from '@mui/material';
44
import theme from '../theme';
55
import './globals.css';
6+
import Navigation from '@/components/Navigation';
67

78
export const metadata: Metadata = {
89
title: 'Bibimbap',
@@ -18,7 +19,12 @@ export default function RootLayout({
1819
<html lang='en'>
1920
<body>
2021
<AppRouterCacheProvider>
21-
<ThemeProvider theme={theme}>{children}</ThemeProvider>
22+
<ThemeProvider theme={theme}>
23+
<Container component='main'>
24+
<Navigation />
25+
{children}
26+
</Container>
27+
</ThemeProvider>
2228
</AppRouterCacheProvider>
2329
</body>
2430
</html>

‎src/app/page.tsx‎

Lines changed: 33 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import Navigation from '@/components/Navigation';
2-
import { Container, Paper, Stack, Typography } from '@mui/material';
1+
import { Paper, Stack, Typography } from '@mui/material';
32

43
export default function Home() {
54
const serviceSummary = {
@@ -17,45 +16,42 @@ export default function Home() {
1716
];
1817

1918
return (
20-
<Container component='main'>
21-
<Navigation />
22-
<Stack direction={{ sm: 'column', md: 'row' }} gap={2} mt={2}>
19+
<Stack direction={{ sm: 'column', md: 'row' }} gap={2} mt={2}>
20+
<Paper sx={{ p: 2 }} elevation={3}>
21+
<Typography variant='body1'>
22+
The mission of Polygon is to provide platform for creation of
23+
programming contest problems. Polygon supports the whole development
24+
cycle:
25+
</Typography>
26+
{/* The following has to have a list using Tailwind CSS */}
27+
<ul className='list-disc list-inside'>
28+
<li>problem statement writing</li>
29+
<li>test data preparing (generators supported)</li>
30+
<li>model solutions (including correct and wittingly incorrect)</li>
31+
<li>judging</li>
32+
<li>automatic validation</li>
33+
</ul>
34+
</Paper>
35+
<Stack direction='column' gap={2}>
2336
<Paper sx={{ p: 2 }} elevation={3}>
24-
<Typography variant='body1'>
25-
The mission of Polygon is to provide platform for creation of
26-
programming contest problems. Polygon supports the whole development
27-
cycle:
37+
<Typography variant='body2'>
38+
Registered users: {serviceSummary.numUsers}
39+
</Typography>
40+
<Typography variant='body2'>
41+
Problems total: {serviceSummary.numProblems}
42+
</Typography>
43+
<Typography variant='body2'>
44+
Invokers waiting: {serviceSummary.numInvokers}
2845
</Typography>
29-
{/* The following has to have a list using Tailwind CSS */}
30-
<ul className='list-disc list-inside'>
31-
<li>problem statement writing</li>
32-
<li>test data preparing (generators supported)</li>
33-
<li>model solutions (including correct and wittingly incorrect)</li>
34-
<li>judging</li>
35-
<li>automatic validation</li>
36-
</ul>
3746
</Paper>
38-
<Stack direction='column' gap={2}>
39-
<Paper sx={{ p: 2 }} elevation={3}>
40-
<Typography variant='body2'>
41-
Registered users: {serviceSummary.numUsers}
42-
</Typography>
43-
<Typography variant='body2'>
44-
Problems total: {serviceSummary.numProblems}
45-
</Typography>
46-
<Typography variant='body2'>
47-
Invokers waiting: {serviceSummary.numInvokers}
47+
<Paper sx={{ p: 2 }} elevation={3}>
48+
{changeLogs.map((log, index) => (
49+
<Typography key={index} variant='body2'>
50+
{log}
4851
</Typography>
49-
</Paper>
50-
<Paper sx={{ p: 2 }} elevation={3}>
51-
{changeLogs.map((log, index) => (
52-
<Typography key={index} variant='body2'>
53-
{log}
54-
</Typography>
55-
))}
56-
</Paper>
57-
</Stack>
52+
))}
53+
</Paper>
5854
</Stack>
59-
</Container>
55+
</Stack>
6056
);
6157
}

‎src/components/CustomLink.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import NextLink, { LinkProps as NextLinkProps } from 'next/link';
2+
import { Link as MUILink, LinkProps as MUILinkProps } from '@mui/material';
3+
4+
type CustomLinkProps = NextLinkProps & MUILinkProps;
5+
6+
export default function CustomLink(props: CustomLinkProps) {
7+
const { href, ...others } = props;
8+
9+
return (
10+
<MUILink
11+
color='inherit'
12+
underline='none'
13+
component={NextLink}
14+
href={href}
15+
{...others}
16+
/>
17+
);
18+
}

‎src/components/Navigation.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
} from '@mui/material';
1717
import Image from 'next/image';
1818
import { useState } from 'react';
19+
import CustomLink from './CustomLink';
1920

2021
interface Props {
2122
/**
@@ -49,7 +50,11 @@ export default function Navigation(props: Props) {
4950
<List>
5051
{navItems.map((item) => (
5152
<ListItem key={item.name} disablePadding>
52-
<ListItemButton sx={{ textAlign: 'center' }}>
53+
<ListItemButton
54+
component='a'
55+
href={item.link}
56+
sx={{ textAlign: 'center' }}
57+
>
5358
<ListItemText primary={item.name} />
5459
</ListItemButton>
5560
</ListItem>
@@ -74,14 +79,18 @@ export default function Navigation(props: Props) {
7479
>
7580
<Menu />
7681
</IconButton>
77-
<Image src='/logo.png' alt='logo' width={64} height={64} />
78-
<Typography
82+
83+
<CustomLink href='/'>
84+
{' '}
85+
<Image src='/logo.png' alt='logo' width={64} height={64} />
86+
</CustomLink>
87+
<CustomLink
88+
href='/'
7989
variant='h6'
80-
component='div'
8190
sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' }, ml: 2 }}
8291
>
8392
Bibimbap
84-
</Typography>
93+
</CustomLink>
8594
<Box sx={{ display: { xs: 'none', sm: 'block' } }}>
8695
{navItems.map((item) => (
8796
<Button key={item.name} sx={{ color: '#fff' }} href={item.link}>

0 commit comments

Comments
 (0)