Add ad slide

README.md

@@ -6,21 +6,19 @@ Displays information about upcoming events as well as Unicafe menus.
 
 Production version is live at https://info.tko-aly.fi.
 
-## Install dependencies
+## Development
 
 ```bash
+git clone https://github.com/TKOaly/info-screen.git
+cd info-screen
 npm install
+npm run dev
 ```
 
-## Run in development mode
+## Project structure
 
-```bash
-npm run dev
-```
+Slides are defined as parallel routes in [`src/app/(infoscreen)/layout.tsx`](<src/app/(infoscreen)/layout.tsx>)
 
-## Run in production mode
+Slides refetch intervals are defined in [`src/app/RefetchIntervals.tsx`](src/app/RefetchIntervals.tsx)
 
-```bash
-npm run build      # Builds the production version
-npm start -p 3000  # Serves the production version on port 3000 (can be changed)
-```
+Server side functions for fetching slide data are defined in [`src/server`](src/server)

src/app/(infoscreen)/@ad/error.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { Slide } from '@/components/Carousel';
+
+const TemplateError = () => {
+	return (
+		<Slide className="bg-grey-500">
+			<div className="flex min-h-full min-w-full flex-col items-center gap-y-4">
+				<h3 className="text-2xl font-bold">
+					Error loading unskippable ads
+				</h3>
+			</div>
+		</Slide>
+	);
+};
+
+export default TemplateError;

src/app/(infoscreen)/@ad/loading.tsx

@@ -0,0 +1,13 @@
+import { Slide } from '@/components/Carousel';
+
+const TemplateLoading = async () => {
+	return (
+		<Slide className="bg-grey-500">
+			<div className="flex min-h-full min-w-full flex-col items-center gap-y-4">
+				<h1 className="text-4xl">Loading...</h1>
+			</div>
+		</Slide>
+	);
+};
+
+export default TemplateLoading;

src/app/(infoscreen)/@ad/page.tsx

@@ -0,0 +1,19 @@
+import { Slide } from '@/components/Carousel';
+import Image from 'next/image';
+
+const Ad = async () => {
+	return (
+		<Slide>
+			<div className="relative size-full">
+				<Image
+					fill
+					className="object-cover"
+					src={'/atkytp.png'}
+					alt={'Ad picture'}
+				/>
+			</div>
+		</Slide>
+	);
+};
+
+export default Ad;

src/app/(infoscreen)/layout.tsx

@@ -1,18 +1,12 @@
 import { Carousel, Slide, type SlideElement } from '@/components/Carousel';
 import Logo from '@/components/Logo';
 
-type CarouselLayoutProps = {
-	events: SlideElement;
-	restaurants: SlideElement;
-	transit: SlideElement; // TODO
-	lectures: SlideElement;
-	ilotalo: SlideElement;
-	children: SlideElement;
-};
+type CarouselLayoutProps = Record<string, SlideElement>;
 
 const CarouselLayout = ({
 	events,
 	restaurants,
+	ad,
 	lectures,
 	ilotalo,
 	children,
@@ -24,9 +18,9 @@ const CarouselLayout = ({
 				<Slide className="items-center justify-center bg-black text-yellow-400">
 					<Logo />
 				</Slide>
-				{/* <LofiGirl /> */}
-				{restaurants}
 				{/* transit */}
+				{restaurants}
+				{ad}
 				{lectures}
 				{ilotalo}
 				{children}

src/app/(infoscreen)/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 const CarouselPage = () => {
-	// This page is here make this route valid
+	// This page is here just to make this a valid route
 	// All content is in ./layout and parallel routes
 	return null;
 };

src/app/RefetchIntervals.tsx

@@ -7,6 +7,7 @@ import { revalidatePohinaFactor } from '@/server/pohinaFactor';
 import { revalidateRestaurants } from '@/server/restaurants';
 import { useEffect } from 'react';
 
+// This file contains intervals for updating all the slides
 export const RefetchIntervals = () => {
 	useEffect(() => {
 		// Intervals for revalidating slide data