docs: use PascalCase for file name (#350)

apps/documentation/src/components/NavigationButtons/NavigationButtons.tsx

@@ -0,0 +1,63 @@
+import type { JSX } from 'react'
+import { Box, Button, Text, Title, Flex } from '@mantine/core'
+import { IconArrowRight, IconArrowLeft } from '@tabler/icons-react'
+import { Link } from 'tuono'
+
+interface NavigationButtonData {
+  href: string
+  title: string
+}
+
+interface NavigationButtonsProps {
+  prev?: NavigationButtonData
+  next?: NavigationButtonData
+}
+
+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 NavigationBtnProps extends NavigationButtonData {
+  type: 'next' | 'prev'
+}
+
+const NavigationBtn = ({
+  type,
+  title,
+  href,
+}: NavigationBtnProps): 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>
+  )
+}