fresh <PageTitle> look

components/PageTitle/PageTitle.module.css

@@ -1,17 +1,21 @@
 .title {
   margin-top: 0;
   margin-bottom: 0.6em;
-  font-size: 1.7em;
+  font-size: 1.9em;
   font-weight: 600;
-  text-align: center;
+  text-transform: lowercase;
+  letter-spacing: 0.02em;
 }
 
-.link {
-  color: var(--colors-text) !important;
+.slug::before {
+  content: "\002E\002F"; /* "./" */
+  letter-spacing: 0.1em;
+  color: var(--colors-mediumLight) !important;
+  margin-right: -0.1em;
 }
 
 @media (max-width: 768px) {
   .title {
-    font-size: 1.8em;
+    font-size: 2em;
   }
 }

components/PageTitle/PageTitle.tsx

@@ -1,6 +1,3 @@
-"use client";
-
-import { usePathname } from "next/navigation";
 import clsx from "clsx";
 import Link from "../Link";
 import type { ComponentPropsWithoutRef } from "react";
@@ -8,14 +5,14 @@ import type { Route } from "next";
 
 import styles from "./PageTitle.module.css";
 
-export type PageTitleProps = ComponentPropsWithoutRef<"h1">;
-
-const PageTitle = ({ className, children, ...rest }: PageTitleProps) => {
-  const pathname = usePathname() || "";
+export type PageTitleProps = ComponentPropsWithoutRef<"h1"> & {
+  canonical: string;
+};
 
+const PageTitle = ({ canonical, className, children, ...rest }: PageTitleProps) => {
   return (
     <h1 className={clsx(styles.title, className)} {...rest}>
-      <Link href={pathname as Route} plain className={styles.link}>
+      <Link href={canonical as Route} plain className={styles.slug}>
         {children}
       </Link>
     </h1>