Presivio

Since this package is in top of NextJS, you need to create the following folder structure:

• Create a folder called[slide]on your app directory.
• Inside the folder add alayout.tsxand page.tsx to the folder.

So the folder structure should be like this:

Your layout.tsx should look like this:

import { Presentation, SlidesPreview } from "presivio";
import { slides } from "../slides";

export default function SlidesLayout({
	children,
}: {
	children: React.ReactNode;
}) {
	return (
		<Presentation slides={slides}>
			<SlidesPreview />
			{children}
		</Presentation>
	);
}

As you can see, we are using the <Presentation /> component to wrap the slides. This component is the main component of the package. It receives the slides as a prop and it is the one that will handle the navigation between slides.

The <SlidesPreview /> component is optional. It is a component that shows a preview of the slides.

The slides array should have the following structure:

import type { Slide } from "presivio/types";
import { Slide1 } from "../slides/slide1";
import { Slide2 } from "../slides/slide2";
import { Slide3 } from "../slides/slide3";

export const slides: Slide[] = [
	{
		name: "slide-1",
		component: <Slide1 />,
	},
	{
		name: "slide-2",
		component: <Slide2 />,
	},
	{
		name: "slide-3",
		component: <Slide3 />,
	}
]

Here is an quick example of how you can build your slides:

import { Slide, ViewTransition } from "presivio";

export function SimpleSlide() {
	return (
		<Slide>
			<div className="grid place-content-center h-full">
				<h2 className="text-white text-4xl">
					What is <br />
					<ViewTransition name="slide-title">
						<strong className="font-mono text-6xl">Presivio</strong>
					</ViewTransition>
					?
				</h2>
			</div>
		</Slide>
	);
}

You can make an slide as complex or simple as you want. Just be creative!

And your page.tsx should look like this:

import { Screen } from "presivio";

export default function SlidePage() {
	return <Screen />;
}

And finally, you can use the <Screen /> component, here is where the slides will be rendered.