feat: add navigation buttons to tutorial

apps/documentation/src/components/navigation-buttons/index.ts

@@ -0,0 +1,3 @@
+import NavigationButtons from './navigation-buttons'
+
+export default NavigationButtons

apps/documentation/src/components/navigation-buttons/navigation-buttons.tsx

@@ -0,0 +1,62 @@
+import { Box, Button, Text, Title, Flex } from '@mantine/core'
+import { Link } from 'tuono'
+import { IconArrowRight, IconArrowLeft } from '@tabler/icons-react'
+
+interface NavigationButton {
+	href: string
+	title: string
+}
+
+interface NavigationButtonsProps {
+	prev?: NavigationButton
+	next?: NavigationButton
+}
+
+export default function NavigationButtons({
+	prev,
+	next,
+}: NavigationButtonsProps): JSX.Element {
+	return (
+		<Flex mt={50} gap={10}>
+			{prev && <NavigationBtn type="prev" {...prev} />}
+			{next && <NavigationBtn type="next" {...next} />}
+		</Flex>
+	)
+}
+
+interface NavigationButtonProps extends NavigationButton {
+	type: 'next' | 'prev'
+}
+
+const NavigationBtn = ({
+	type,
+	title,
+	href,
+}: NavigationButtonProps): JSX.Element => {
+	const heading = type === 'next' ? 'Next' : 'Previous'
+	const textAlign = type === 'next' ? 'left' : 'right'
+	const variant = type === 'next' ? 'filled' : 'outline'
+
+	return (
+		<Button
+			component={Link}
+			fullWidth
+			variant={variant}
+			href={href}
+			justify="space-between"
+			h="auto"
+			rightSection={type === 'next' && <IconArrowRight />}
+			leftSection={type === 'prev' && <IconArrowLeft />}
+			p="20"
+		>
+			<Box>
+				<Title component="span" display="block" order={4} style={{ textAlign }}>
+					{heading}
+				</Title>
+				<Text component="span" display="block" style={{ textAlign }}>
+					{title}
+				</Text>
+			</Box>
+		</Button>
+	)
+}

apps/documentation/src/routes/documentation/tutorial/api-fetching.mdx

@@ -103,3 +103,10 @@ export default function IndexPage({
 ```
 
 Refresh the browser now! A bit ugly, but all the Pokémon are finally printed on screen!
+
+import NavigationButtons from '../../../components/navigation-buttons'
+
+<NavigationButtons 
+		prev={{title: 'Development setup', href:"/documentation/tutorial/development-setup"}}
+		next={{title: 'Components', href:"/documentation/tutorial/components"}}
+/>

apps/documentation/src/routes/documentation/tutorial/components.mdx

@@ -127,3 +127,10 @@ export default function PokemonLink({
   );
 }
 ```
+
+import NavigationButtons from '../../../components/navigation-buttons'
+
+<NavigationButtons 
+		prev={{title: 'API fetching', href:"/documentation/tutorial/api-fetching"}}
+		next={{title: 'Dynamic routes', href:"/documentation/tutorial/dynamic-routes"}}
+/>

apps/documentation/src/routes/documentation/tutorial/conclusion.mdx

@@ -22,3 +22,9 @@ As I mentioned in the introduction, I'd love to hear what you thought about the
 at [valerioageno@yahoo.it](mailto:valerioageno@yahoo.it) or in Twitter (X) DMs [@valerioageno](https://twitter.com/valerioageno).
 
 Ciao
+
+import NavigationButtons from '../../../components/navigation-buttons'
+
+<NavigationButtons 
+		prev={{title: 'Production build', href:"/documentation/tutorial/production"}}
+/>

apps/documentation/src/routes/documentation/tutorial/development-setup.mdx

@@ -64,3 +64,10 @@ The first time might take a little bit because it will install all the Rust’s
 > In case you face any error delete the cache `.tuono` folder and run it again!
 
 Then open [http://localhost:3000/](http://localhost:3000) on the browser.
+
+import NavigationButtons from '../../../components/navigation-buttons'
+
+<NavigationButtons 
+		prev={{title: 'Tutorial', href:"/documentation/tutorial"}}
+		next={{title: 'API fetching', href:"/documentation/tutorial/api-fetching"}}
+/>

apps/documentation/src/routes/documentation/tutorial/dynamic-routes.mdx

@@ -157,3 +157,10 @@ export default function PokemonView({
   font-weight: 700;
 }
 ```
+
+import NavigationButtons from '../../../components/navigation-buttons'
+
+<NavigationButtons 
+		prev={{title: 'Components', href:"/documentation/tutorial/components"}}
+		next={{title: 'Error handling', href:"/documentation/tutorial/error-handling"}}
+/>

apps/documentation/src/routes/documentation/tutorial/error-handling.mdx

@@ -100,3 +100,10 @@ async fn get_all_pokemons(_req: Request, fetch: Client) -> Response {
 
 If you now try to load a not-existing Pokémon (`http://localhost:3000/pokemons/tuono-pokemon`) you will
 correctly receive a 404 status code in the console.
+
+import NavigationButtons from '../../../components/navigation-buttons'
+
+<NavigationButtons 
+		prev={{title: 'Dynamic routes', href:"/documentation/tutorial/dynamic-routes"}}
+		next={{title: 'SEO and meta tags', href:"/documentation/tutorial/seo"}}
+/>

apps/documentation/src/routes/documentation/tutorial/index.mdx

@@ -26,3 +26,9 @@ $ tuono new tutorial --template tutorial
 
 > I'd love to hear your thoughts about the framework and the tutorial - feel free to reach me at [valerioageno@yahoo.it](mailto:valerioageno@ahoo.it)
 > or on Twitter (X) DM [@valerioageno](https://twitter.com/valerioageno)
+
+import NavigationButtons from '../../../components/navigation-buttons'
+
+<NavigationButtons 
+		next={{title: 'Development setup', href:"/documentation/tutorial/development-setup"}}
+/>

apps/documentation/src/routes/documentation/tutorial/production.mdx

@@ -31,3 +31,10 @@ Check again [`http://localhost:3000/`](http://localhost:3000/) This environment
 optimizations ready to unleash the power of a rust server that seamlessly renders a React application!🚀
 
 > Note: The `out` directory is not standalone. You can't rely just on it to run the production server.
+
+import NavigationButtons from '../../../components/navigation-buttons'
+
+<NavigationButtons 
+		prev={{title: 'Server redirection', href:"/documentation/tutorial/redirections"}}
+		next={{title: 'Conclusion', href:"/documentation/tutorial/conclusion"}}
+/>

apps/documentation/src/routes/documentation/tutorial/redirections.mdx

@@ -45,3 +45,10 @@ Now let's create the button in the home page to actually point to it!
 
 Now at [http://localhost:3000/](http:/localhost:3000/) You will find a new link at the beginning of the list.
 Click on it and see the application automatically redirecting you to your favourite pokemon's route!
+
+import NavigationButtons from '../../../components/navigation-buttons'
+
+<NavigationButtons 
+		prev={{title: 'SEO and meta tags', href:"/documentation/tutorial/seo"}}
+		next={{title: 'Production build', href:"/documentation/tutorial/production"}}
+/>

apps/documentation/src/routes/documentation/tutorial/seo.mdx

@@ -94,3 +94,10 @@ export default function Pokemon({ data }: TuonoProps): JSX.Element {
 ```
 
 The `Head` component takes as children any valid HTML meta tag.
+
+import NavigationButtons from '../../../components/navigation-buttons'
+
+<NavigationButtons 
+		prev={{title: 'Error handling', href:"/documentation/tutorial/error-handling"}}
+		next={{title: 'Server redirection', href:"/documentation/tutorial/redirections"}}
+/>