feat(core): Added page 404

.changeset/rude-bags-lick.md

@@ -0,0 +1,5 @@
+---
+'x-boilerplate': minor
+---
+
+Added page 404

@design-system/button-go-back/ButtonGoBack.module.css

@@ -19,6 +19,12 @@
   background-color: transparent;
 }
 
+.label {
+  text-decoration: none;
+  color: #000;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
 .wrapper {
   display: flex;
   justify-content: center;

@design-system/button-go-back/ButtonGoBack.tsx

@@ -1,17 +1,21 @@
+import Link from 'next/link';
+
 import ArrowLeftLine from '@design-system/icons/ArrowLeftLine';
 
 import styles from './ButtonGoBack.module.css';
 import { ButtonGoBackProps } from './ButtonGoBack.types';
 
-function ButtonGoBack({ label, ...props }: ButtonGoBackProps) {
+function ButtonGoBack({ label, to, ...props }: ButtonGoBackProps) {
+  const Component = to ? Link : 'button';
+
   return (
-    <button className={styles.root} {...props}>
+    <Component href={to ?? ''} className={styles.root} {...props}>
       <div className={styles.wrapper}>
         <ArrowLeftLine />
       </div>
 
-      {label}
-    </button>
+      <span className={styles.label}>{label}</span>
+    </Component>
   );
 }
 

@design-system/button-go-back/ButtonGoBack.types.ts

@@ -1,4 +1,5 @@
 export type ButtonGoBackProps = {
   label: string;
   onClick?: () => void;
+  to?: string;
 };

@design-system/typography/Typography.tsx

@@ -6,6 +6,9 @@ import { HeadingProps } from './Typography.types';
 const fontSizes = {
   s: '14px',
   m: '20px',
+  l: '24px',
+  xl: '32',
+  '2xl': '40px',
 };
 
 function Typography(props: HeadingProps) {

@design-system/typography/Typography.types.ts

@@ -2,5 +2,5 @@ import { ElementType, HTMLAttributes } from 'react';
 
 export interface HeadingProps extends HTMLAttributes<HTMLElement> {
   as?: ElementType<HTMLAttributes<HTMLElement>>;
-  size?: 's' | 'm';
+  size?: 's' | 'm' | 'l' | 'xl' | '2xl';
 }

README.md

@@ -29,7 +29,7 @@
 
 - 🦾 TypeScript, of course
 
-- 💄 Unstyled - The frontend contains minimal css styling just to show the demo.
+- 💄 Unstyled - The frontend contains minimal css styling just the demo.
 
 - ⚙️ Adjustable to your preferences - Designed to be modular so you can fine-tune it to your preferences
 
@@ -83,6 +83,7 @@ Many of this boilerplate features are based on the philosophy of being optional.
 - [x] Integrate https://chakra-ui.com/
 - [x] Dark mode
 - [x] Integrate graphql
+- [x] Do `cli` to configure all functions
 
 ### Dev tools
 

app/(i18next)/i18next/page.tsx

@@ -11,7 +11,7 @@ import Header from '@/components/header';
 
 function I18nextPage() {
   const router = useRouter();
-  const { t, i18n } = useTranslation(['common', 'i18next']);
+  const { t } = useTranslation(['common', 'i18next']);
 
   function handleGoBack() {
     router.push('/');

app/not-found.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+import * as React from 'react';
+
+import ButtonGoBack from '@design-system/button-go-back';
+import Typography from '@design-system/typography';
+
+function NotFoundPage(): JSX.Element {
+  return (
+    <div>
+      <Typography as="h1" size="2xl">
+        404 page
+      </Typography>
+      <ButtonGoBack to="/" label="Go back" />
+    </div>
+  );
+}
+
+export default NotFoundPage;