diff --git a/app/schedule/[event]/OverviewPage.tsx b/app/schedule/[event]/OverviewPage.tsx index 69b14970..352b3f55 100644 --- a/app/schedule/[event]/OverviewPage.tsx +++ b/app/schedule/[event]/OverviewPage.tsx @@ -5,9 +5,11 @@ import { useContext } from 'react'; +import { KnowledgeBaseCard } from './components/KnowledgeBaseCard'; import { OverviewVendorCard } from './components/OverviewVendorCard'; import { ScheduleContext } from './ScheduleContext'; import { VendorTeam } from '@lib/database/Types'; +import { useIsMobile } from './lib/useIsMobile'; /** * Displays the portal's overview page, which contains a series of cards displaying key information @@ -16,6 +18,8 @@ import { VendorTeam } from '@lib/database/Types'; export function OverviewPage() { const schedule = useContext(ScheduleContext); + const isMobile = useIsMobile(); + return ( <> { /* TODO: Event status */ } @@ -23,6 +27,8 @@ export function OverviewPage() { { /* TODO: Upcoming shift */ } { /* TODO: Available back-up volunteers */ } { /* TODO: Available senior volunteers */ } + { (!!isMobile && !!schedule?.knowledge?.length) && + } { !!schedule?.vendors[VendorTeam.FirstAid] && } { !!schedule?.vendors[VendorTeam.Security] && diff --git a/app/schedule/[event]/components/CalendarPopover.tsx b/app/schedule/[event]/components/CalendarPopover.tsx index 1957ec9b..b4896a0d 100644 --- a/app/schedule/[event]/components/CalendarPopover.tsx +++ b/app/schedule/[event]/components/CalendarPopover.tsx @@ -12,13 +12,14 @@ import Dialog from '@mui/material/Dialog'; import DialogTitle from '@mui/material/DialogTitle'; import IconButton from '@mui/material/IconButton'; import Stack from '@mui/material/Stack'; -import useMediaQuery from '@mui/material/useMediaQuery'; -import type { PublicVendorSchedule } from '@app/api/event/schedule/getSchedule'; -import { Temporal } from '@lib/Temporal'; import { Calendar, type CalendarEvent } from '@beverloo/volunteer-manager-timeline'; import '@beverloo/volunteer-manager-timeline/dist/volunteer-manager-timeline.css'; +import type { PublicVendorSchedule } from '@app/api/event/schedule/getSchedule'; +import { Temporal } from '@lib/Temporal'; +import { useIsMobile } from '../lib/useIsMobile'; + /** * Props accepted by the component. */ @@ -55,7 +56,7 @@ export interface CalendarPopoverProps { export default function CalendarPopover(props: CalendarPopoverProps) { const { open, onClose, schedule, timezone, title } = props; - const isMobile = useMediaQuery((theme: any) => theme.breakpoints.down('md')); + const isMobile = useIsMobile(); const theme = useTheme(); const { events, min, max } = useMemo(() => { diff --git a/app/schedule/[event]/components/KnowledgeBaseCard.tsx b/app/schedule/[event]/components/KnowledgeBaseCard.tsx new file mode 100644 index 00000000..4daccd67 --- /dev/null +++ b/app/schedule/[event]/components/KnowledgeBaseCard.tsx @@ -0,0 +1,47 @@ +// Copyright 2024 Peter Beverloo & AnimeCon. All rights reserved. +// Use of this source code is governed by a MIT license that can be found in the LICENSE file. + +'use client'; + +import Link from 'next/link'; + +import Box from '@mui/material/Box'; +import Card from '@mui/material/Card'; +import CardActionArea from '@mui/material/CardActionArea'; +import CardContent from '@mui/material/CardContent'; +import Typography from '@mui/material/Typography'; + +/** + * Props accepted by the component. + */ +export interface KnowledgeBaseCardProps { + /** + * Slug of the event for which the card is being shown. + */ + slug: string; +} + +/** + * The displays a card allowing volunteers on mobile devices to enter the + * Knowledge Base. A card is used as there is no space for a menu option. + */ +export function KnowledgeBaseCard(props: KnowledgeBaseCardProps) { + return ( + + + + + + Check out the brand new Knowledge Base, where you can find + answers to the most frequently asked questions by visitors! + + + + + ); +} diff --git a/app/schedule/[event]/lib/useIsMobile.ts b/app/schedule/[event]/lib/useIsMobile.ts new file mode 100644 index 00000000..2fd709be --- /dev/null +++ b/app/schedule/[event]/lib/useIsMobile.ts @@ -0,0 +1,13 @@ +// Copyright 2024 Peter Beverloo & AnimeCon. All rights reserved. +// Use of this source code is governed by a MIT license that can be found in the LICENSE file. + +'use client'; + +import useMediaQuery from '@mui/material/useMediaQuery'; + +/** + * Returns whether the page is being shown on a mobile device. + */ +export function useIsMobile(): boolean { + return useMediaQuery((theme: any) => theme.breakpoints.down('md')); +} diff --git a/public/images/knowledge-base-full.png b/public/images/knowledge-base-full.png new file mode 100644 index 00000000..7855d19d Binary files /dev/null and b/public/images/knowledge-base-full.png differ diff --git a/public/images/knowledge-base.jpg b/public/images/knowledge-base.jpg new file mode 100644 index 00000000..565152db Binary files /dev/null and b/public/images/knowledge-base.jpg differ