From ed327c9b8949b6b9cf3f5ce4f717238e36485a07 Mon Sep 17 00:00:00 2001
From: Xennis <code@xennis.org>
Date: Sun, 2 Jun 2024 21:31:07 +0200
Subject: [PATCH] [render] Adjust underline of links

---
 examples/nextjs/src/app/[slug]/page.tsx       | 6 ++----
 packages/render/src/components/page-title.tsx | 6 ++----
 packages/render/src/components/text.tsx       | 1 -
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/examples/nextjs/src/app/[slug]/page.tsx b/examples/nextjs/src/app/[slug]/page.tsx
index ffa9a45..a70c993 100644
--- a/examples/nextjs/src/app/[slug]/page.tsx
+++ b/examples/nextjs/src/app/[slug]/page.tsx
@@ -38,13 +38,11 @@ export default async function SlugPage({ params }: { params: { slug: string } })
           }
         },
         // Example customization: Render links in a different style
+        // Note that instead of an underline a border bottom is used because a link can contain more than just text (e.g. an icon).
         htmlComponents: {
           a: (props: React.ComponentPropsWithoutRef<"a">) => {
             return (
-              <a
-                className="font-semibold underline decoration-teal-500 decoration-2 underline-offset-2 hover:no-underline"
-                {...props}
-              >
+              <a className="border-b-2 border-teal-500 font-semibold hover:border-b-0" {...props}>
                 {props.children}
               </a>
             )
diff --git a/packages/render/src/components/page-title.tsx b/packages/render/src/components/page-title.tsx
index ed3f180..448d7a1 100644
--- a/packages/render/src/components/page-title.tsx
+++ b/packages/render/src/components/page-title.tsx
@@ -9,10 +9,8 @@ export const PageTitle = ({ icon, children }: { icon: IconResponse; children: Re
       {/* note: plus ref .notion-page-icon-inline for margins */}
       <Icon icon={icon} width={20} className="me-1.5 ms-0.5 flex shrink-0 items-center justify-center rounded-[3px]" />
       {/* ref: .notion-page-title-text */}
-      {/* note: Consider how to use the border-buttom here in combination with a link. See also `.notion-link .notion-page-title-text` */}
-      <span className="relative top-px overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-b-[color:var(--fg-color-1)] font-medium leading-[1.3]">
-        {children}
-      </span>
+      {/* note: In case of links no border is applied, but otherwise it is. See ref above and `.notion-link .notion-page-title-text` */}
+      <span className="relative top-px overflow-hidden text-ellipsis whitespace-nowrap leading-[1.3]">{children}</span>
     </span>
   )
 }
diff --git a/packages/render/src/components/text.tsx b/packages/render/src/components/text.tsx
index 4fd56d2..e9e78f3 100644
--- a/packages/render/src/components/text.tsx
+++ b/packages/render/src/components/text.tsx
@@ -6,7 +6,6 @@ import type {
 
 import { cn, idToUuid, notionColor, notionUrl } from "../util"
 import { RenderOptions } from "../types"
-import { A } from "./html/a"
 import { PageTitle } from "./page-title"
 
 export const RichTexts = ({ value, options }: { value: Array<RichTextItemResponse>; options: RenderOptions }) => {