From 132d8ebe8f285ade682fee9acb964e298fed6d78 Mon Sep 17 00:00:00 2001 From: Valerio Ageno Date: Sun, 3 Nov 2024 22:02:10 +0100 Subject: [PATCH] feat: add navigation buttons to tutorial --- .../components/navigation-buttons/index.ts | 3 + .../navigation-buttons/navigation-buttons.tsx | 62 +++++++++++++++++++ .../documentation/tutorial/api-fetching.mdx | 7 +++ .../documentation/tutorial/components.mdx | 7 +++ .../documentation/tutorial/conclusion.mdx | 6 ++ .../tutorial/development-setup.mdx | 7 +++ .../documentation/tutorial/dynamic-routes.mdx | 7 +++ .../documentation/tutorial/error-handling.mdx | 7 +++ .../routes/documentation/tutorial/index.mdx | 6 ++ .../documentation/tutorial/production.mdx | 7 +++ .../documentation/tutorial/redirections.mdx | 7 +++ .../src/routes/documentation/tutorial/seo.mdx | 7 +++ 12 files changed, 133 insertions(+) create mode 100644 apps/documentation/src/components/navigation-buttons/index.ts create mode 100644 apps/documentation/src/components/navigation-buttons/navigation-buttons.tsx diff --git a/apps/documentation/src/components/navigation-buttons/index.ts b/apps/documentation/src/components/navigation-buttons/index.ts new file mode 100644 index 00000000..279d4366 --- /dev/null +++ b/apps/documentation/src/components/navigation-buttons/index.ts @@ -0,0 +1,3 @@ +import NavigationButtons from './navigation-buttons' + +export default NavigationButtons diff --git a/apps/documentation/src/components/navigation-buttons/navigation-buttons.tsx b/apps/documentation/src/components/navigation-buttons/navigation-buttons.tsx new file mode 100644 index 00000000..58dc8305 --- /dev/null +++ b/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 ( + + {prev && } + {next && } + + ) +} + +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 ( + + ) +} diff --git a/apps/documentation/src/routes/documentation/tutorial/api-fetching.mdx b/apps/documentation/src/routes/documentation/tutorial/api-fetching.mdx index d1bf42c8..43c16dae 100644 --- a/apps/documentation/src/routes/documentation/tutorial/api-fetching.mdx +++ b/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' + + diff --git a/apps/documentation/src/routes/documentation/tutorial/components.mdx b/apps/documentation/src/routes/documentation/tutorial/components.mdx index 416c151c..d03b9bb8 100644 --- a/apps/documentation/src/routes/documentation/tutorial/components.mdx +++ b/apps/documentation/src/routes/documentation/tutorial/components.mdx @@ -127,3 +127,10 @@ export default function PokemonLink({ ); } ``` + +import NavigationButtons from '../../../components/navigation-buttons' + + diff --git a/apps/documentation/src/routes/documentation/tutorial/conclusion.mdx b/apps/documentation/src/routes/documentation/tutorial/conclusion.mdx index 36b6c5ad..ba911400 100644 --- a/apps/documentation/src/routes/documentation/tutorial/conclusion.mdx +++ b/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' + + diff --git a/apps/documentation/src/routes/documentation/tutorial/development-setup.mdx b/apps/documentation/src/routes/documentation/tutorial/development-setup.mdx index 2c753e7b..ec02b5a9 100644 --- a/apps/documentation/src/routes/documentation/tutorial/development-setup.mdx +++ b/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' + + diff --git a/apps/documentation/src/routes/documentation/tutorial/dynamic-routes.mdx b/apps/documentation/src/routes/documentation/tutorial/dynamic-routes.mdx index 9f78ae50..9c6f7d4d 100644 --- a/apps/documentation/src/routes/documentation/tutorial/dynamic-routes.mdx +++ b/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' + + diff --git a/apps/documentation/src/routes/documentation/tutorial/error-handling.mdx b/apps/documentation/src/routes/documentation/tutorial/error-handling.mdx index 4d1e205d..c4a240a1 100644 --- a/apps/documentation/src/routes/documentation/tutorial/error-handling.mdx +++ b/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' + + diff --git a/apps/documentation/src/routes/documentation/tutorial/index.mdx b/apps/documentation/src/routes/documentation/tutorial/index.mdx index 65d9cc88..36268767 100644 --- a/apps/documentation/src/routes/documentation/tutorial/index.mdx +++ b/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' + + diff --git a/apps/documentation/src/routes/documentation/tutorial/production.mdx b/apps/documentation/src/routes/documentation/tutorial/production.mdx index 18ed02e6..fa6b12e7 100644 --- a/apps/documentation/src/routes/documentation/tutorial/production.mdx +++ b/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' + + diff --git a/apps/documentation/src/routes/documentation/tutorial/redirections.mdx b/apps/documentation/src/routes/documentation/tutorial/redirections.mdx index d8eec77a..2c6bbccc 100644 --- a/apps/documentation/src/routes/documentation/tutorial/redirections.mdx +++ b/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' + + diff --git a/apps/documentation/src/routes/documentation/tutorial/seo.mdx b/apps/documentation/src/routes/documentation/tutorial/seo.mdx index 6e6dc8d8..b4c4d2a4 100644 --- a/apps/documentation/src/routes/documentation/tutorial/seo.mdx +++ b/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' + +