timetable-app

index.tsx (4221B)

---

 /** @jsxImportSource @emotion/react */
 import { useIsomorphicEffect } from '@mantine/hooks';
 import { GlobalStyles, Link, Alert as MUIAlert } from '@mui/material';
 import { css, styled } from '@mui/material/styles';
 import shuffle from 'lodash/shuffle';
 import { useState } from 'react';
 import { Autoplay, Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/autoplay';
 import 'swiper/css/pagination';
 
 import { BUG_REPORT_FORM_URL, FEEDBACK_FORM_URL } from 'common/constant';
 
 import type { AlertProps } from '@mui/material/Alert';
 import type { ReactNode } from 'react';
 
 const Alert = styled(MUIAlert)({
 	height: '100%',
 	paddingBottom: '22px', // ページネーション用の余白
 	borderRadius: 0,
 	verticalAlign: 'center',
 });
 
 const globalStyles = (
 	<GlobalStyles
 		styles={(theme) => css`
 			.swiper .swiper-slide {
 				height: auto;
 			}
 			.swiper .swiper-pagination-bullet {
 				background-color: ${theme.vars.palette.text.primary};
 				opacity: 0.3;
 			}
 			.swiper .swiper-pagination-bullet-active {
 				background-color: ${theme.vars.palette.primary.main};
 				opacity: 1;
 			}
 		`}
 	/>
 );
 
 type SlideData = {
 	id: number;
 	content: ReactNode;
 	severity?: AlertProps['severity'];
 	variant?: AlertProps['variant'];
 	icon?: AlertProps['icon'];
 };
 
 const prioritySlideData: SlideData[] = [
 	{
 		id: 11,
 		content: (
 			<>
 				情報の正確性を保証することはできませんので、参考程度にお使いください。時間割が間違っていた場合、学校・IT部は一切の責任を負いません。
 			</>
 		),
 		severity: 'warning',
 	},
 	{
 		id: 12,
 		content: (
 			<>臨時変更には対応していません。教室掲示のプリントで確認してください。</>
 		),
 		severity: 'warning',
 	},
 	{
 		id: 13,
 		content: (
 			<>
 				臨時変更の情報を入力する機能を追加しました！登録した臨時変更情報は他の利用者に共有されません。ご要望ありがとうございました。
 			</>
 		),
 	},
 ];
 
 const extraSlideData: SlideData[] = [
 	{
 		id: 101,
 		content: (
 			<>
 				このアプリはIT部が制作・運営しています。人手不足なので助けてください。
 				プログラミング経験者や開発に興味がある人はIT部まで！
 			</>
 		),
 	},
 	{
 		id: 102,
 		content: (
 			<>
 				IT部
 				部員募集中！ボカロ楽曲制作、プログラミング、動画制作などやってます。
 				毎週木・金曜日にLAN教室までお気軽にお越しください！
 			</>
 		),
 	},
 	{
 		id: 103,
 		content: (
 			<>
 				<Link href={FEEDBACK_FORM_URL} target='_blank' rel='noopener'>
 					フィードバックアンケート
 				</Link>
 				で、このアプリの評価にご協力お願いします。ご意見・ご要望もお待ちしております。
 			</>
 		),
 	},
 	{
 		id: 104,
 		content: (
 			<>
 				アプリの不具合や時間割情報の誤りを見つけた場合は、
 				<Link href={BUG_REPORT_FORM_URL} target='_blank' rel='noopener'>
 					Googleフォーム
 				</Link>
 				で報告お願いします。
 			</>
 		),
 	},
 	// {
 	// 	id: 105,
 	// 	content: (
 	// 		<>
 	// 			広告募集中！ここに文字広告を載せられます。木・金曜日にLAN教室にお越しになるか、お近くのIT部員にお声がけください。
 	// 		</>
 	// 	),
 	// },
 	{
 		id: 106,
 		content: (
 			<>
 				各時限の時間割をタップすると、授業場所、臨時変更入力機能、メモ機能などが表示されます。
 			</>
 		),
 	},
 ];
 
 export default function SlideFooter() {
 	const [slideData, setSlideData] = useState([...prioritySlideData]);
 	useIsomorphicEffect(
 		() => setSlideData([...prioritySlideData, ...shuffle(extraSlideData)]),
 		[],
 	);
 
 	return (
 		<Swiper
 			modules={[Autoplay, Pagination]}
 			autoplay={{ delay: 5000 }}
 			pagination={{ clickable: true }}
 			allowTouchMove={false}
 			loop
 		>
 			{globalStyles}
 			{slideData.map((data) => (
 				<SwiperSlide key={data.id}>
 					<Alert
 						severity={data.severity ?? 'info'}
 						variant={data.variant ?? 'standard'}
 					>
 						{data.content}
 					</Alert>
 				</SwiperSlide>
 			))}
 		</Swiper>
 	);
 }