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