Add a knowledge base card on the overview page

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,13 +18,17 @@ import { VendorTeam } from '@lib/database/Types';
 export function OverviewPage() {
     const schedule = useContext(ScheduleContext);
 
+    const isMobile = useIsMobile();
+
     return (
         <>
             { /* TODO: Event status */ }
             { /* TODO: Current shift */ }
             { /* TODO: Upcoming shift */ }
             { /* TODO: Available back-up volunteers */ }
             { /* TODO: Available senior volunteers */ }
+            { (!!isMobile && !!schedule?.knowledge?.length) &&
+                <KnowledgeBaseCard slug={schedule.slug} /> }
             { !!schedule?.vendors[VendorTeam.FirstAid] &&
                 <OverviewVendorCard team={VendorTeam.FirstAid} /> }
             { !!schedule?.vendors[VendorTeam.Security] &&

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 <CalendarPopover> 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(() => {

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 <KnowledgeBaseCard> component.
+ */
+export interface KnowledgeBaseCardProps {
+    /**
+     * Slug of the event for which the card is being shown.
+     */
+    slug: string;
+}
+
+/**
+ * The <KnowledgeBaseCard> 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 (
+        <Card>
+            <CardActionArea LinkComponent={Link} href={`/schedule/${props.slug}/knowledge`}>
+                <Box sx={{
+                    backgroundImage: 'url(/images/knowledge-base.jpg)',
+                    backgroundPosition: 'center',
+                    backgroundSize: 'cover',
+                    width: '100%',
+                    aspectRatio: 4 }} />
+                <CardContent>
+                    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                        Check out the brand new <strong>Knowledge Base</strong>, where you can find
+                        answers to the most frequently asked questions by visitors!
+                    </Typography>
+                </CardContent>
+            </CardActionArea>
+        </Card>
+    );
+}

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'));
+}