index.tsx (1503B)
1 import { useIsomorphicEffect } from '@mantine/hooks'; 2 import { Alert, AlertTitle } from '@mui/material'; 3 import { css, styled, useColorScheme } from '@mui/material/styles'; 4 import { useState } from 'react'; 5 6 import type { AlertProps } from '@mui/material'; 7 8 const List = styled('ul')(css` 9 padding: 0; 10 margin: 0; 11 margin-left: 1.5em; 12 font-size: inherit; 13 `); 14 15 type Props = AlertProps; 16 17 export default function WarningOfUse(props: Props) { 18 const { colorScheme } = useColorScheme(); 19 const [variant, setVariant] = useState<AlertProps['variant']>('standard'); 20 useIsomorphicEffect(() => { 21 setVariant(colorScheme === 'dark' ? 'outlined' : 'standard'); 22 }, [colorScheme]); 23 24 return ( 25 <Alert severity='warning' variant={variant} {...props}> 26 <AlertTitle>利用上の注意・免責事項</AlertTitle> 27 <List> 28 <li>曜日変更はすべて対応しています。</li> 29 <li> 30 臨時変更には対応していません。教室掲示のプリントで確認してください。 31 </li> 32 <li> 33 時間割情報の正確性を保証することはできませんので、参考程度にお使いください。 34 </li> 35 <li>正確な最新の情報は教室掲示のプリントで確認してください。</li> 36 <li> 37 このアプリの利用により何らかの不利益が生じた場合、IT部や学校側は一切の責任を負いません。 38 </li> 39 <li>予告なくサービスを停止する可能性があります。</li> 40 </List> 41 </Alert> 42 ); 43 }