[render] Adjust underline of links

Xennis · Jun 2, 2024 · ed327c9 · ed327c9
1 parent bea174e
commit ed327c9
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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 }) => {