timetable-app

index.tsx (1807B)

---

 import { Box, Typography, Stack, Button } from '@mui/material';
 import Image from 'next/image';
 
 import Head from 'client/components/Head';
 import Layout from 'client/components/Layout';
 import Link from 'client/components/Link';
 import WarningOfUse from 'client/components/WarningOfUse';
 import { CLASSES, GRADES } from 'common/constant';
 
 import type { NextPage } from 'next';
 
 const Page: NextPage = () => {
 	return (
 		<>
 			<Head title='トップ' />
 			<Layout title='トップ'>
 				<Box p={2} height='fit-content'>
 					<Image
 						src='/main_visual.png'
 						width={1920}
 						height={1080}
 						style={{ width: '100%', height: 'auto', borderRadius: '3px' }}
 						alt='岸高時間割アプリ メインビジュアル'
 					/>
 
 					<p>
 						岸和田高校IT部が制作・運営している「岸高時間割アプリ」です。詳細は「
 						<Link href='/about'>このアプリについて</Link>
 						」をご覧ください。使い方や機能の説明については「
 						<Link href='/how-to-use'>使い方</Link>」をご覧ください。
 					</p>
 
 					<WarningOfUse />
 
 					<Typography variant='h2' fontSize={24} my={3}>
 						時間割ページ一覧
 					</Typography>
 
 					<Stack
 						direction='row'
 						spacing={{ xs: 2, md: 4 }}
 						alignItems='center'
 						width='100%'
 						px={2}
 					>
 						{GRADES.map((g) => (
 							<Stack spacing={2} width='100%' key={g}>
 								{CLASSES.map((c) => (
 									<Button
 										fullWidth
 										variant='outlined'
 										href={`/${g}-${c}`}
 										sx={{ fontSize: 15, fontWeight: 400 }}
 										LinkComponent={Link}
 										key={c}
 									>
 										{g}年{c}組
 									</Button>
 								))}
 							</Stack>
 						))}
 					</Stack>
 				</Box>
 			</Layout>
 		</>
 	);
 };
 
 export default Page;