Init next.js port

components/title.tsx

@@ -0,0 +1,52 @@
+import style from '../styles/title.module.css';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+type propsObj = {
+    name: string,
+    title?: string,
+    ancestors?: Array<{ name: string, path: string }>
+};
+
+function Title(props: propsObj) {
+
+    const path = () => {
+        if (!props.ancestors)
+            return (<></>);
+
+        let currentPath = '';
+        return (<>
+            {
+                props.ancestors.map(ancestor => {
+                    currentPath += `/${ancestor.path}`
+                    return (
+                        <>
+                            <Link href={currentPath} key=''>
+                                <a>{ancestor.name}</a>
+                            </Link>
+                            <> / </>
+                        </>
+                    );
+                })
+            }
+        </>
+        );
+    };
+
+    return (
+        <>
+            <h1 className={style.container}>
+                {props.title || props.name}
+            </h1>
+            <div className={style.nav + ' h1'}>
+                {
+                    props.name === ''
+                        ? <>PaulW.XYZ / {props.name}</>
+                        : <><Link href='/'><a>PaulW.XYZ</a></Link> / {path()}{props.name}</>
+                }
+            </div>
+        </>
+    );
+}
+
+export default Title;