index.tsx (2075B)
1 import { Alert, Box, Paper, Stack, Typography } from '@mui/material'; 2 3 import Link from 'client/components/Link'; 4 import useIsPwa from 'client/hooks/useIsPwa'; 5 6 import MyClassForm from './components/MyClassForm'; 7 import MySubjectForm from './components/MySubjectForm'; 8 import ThemeSwitch from './components/ThemeSwitch'; 9 10 export default function SettingView() { 11 const isPwa = useIsPwa(); 12 13 return ( 14 <Stack width={1} spacing={4}> 15 <div> 16 <Typography variant='h2' fontWeight={400} gutterBottom> 17 表示設定 18 </Typography> 19 20 <Box component={Paper} p={2}> 21 <ThemeSwitch /> 22 </Box> 23 </div> 24 25 <div> 26 <Typography variant='h2' fontWeight={400} gutterBottom> 27 機能設定 28 </Typography> 29 30 <Stack component={Paper} p={2} spacing={3}> 31 <div> 32 <Typography 33 variant='h3' 34 fontSize={18} 35 fontWeight={400} 36 gutterBottom 37 > 38 マイクラス 39 </Typography> 40 <Typography 41 variant='body2' 42 sx={{ color: (theme) => theme.vars.palette.text.secondary }} 43 mb={1} 44 > 45 アプリをホーム画面から起動すると、設定したクラスの時間割ページを開きます。 46 </Typography> 47 {!isPwa && ( 48 <Alert severity='error' sx={{ mt: 1, mb: 2 }}> 49 インストールした状態でのみ利用できる機能です。インストール方法は 50 <Link href='/how-to-use'>使い方</Link>をご覧ください。 51 </Alert> 52 )} 53 <MyClassForm /> 54 </div> 55 56 <div> 57 <Typography 58 variant='h3' 59 fontSize={18} 60 fontWeight={400} 61 gutterBottom 62 > 63 マイ時間割 64 </Typography> 65 <Typography 66 variant='body2' 67 sx={{ color: (theme) => theme.vars.palette.text.secondary }} 68 mb={2} 69 > 70 自分の選択科目に合わせて、曜日時限ごとに表示する科目名を自分で設定できます。入力内容は自動で保存されます。 71 </Typography> 72 <MySubjectForm /> 73 </div> 74 </Stack> 75 </div> 76 </Stack> 77 ); 78 }