feat: add icon setting for tree

src/lib/notion.ts

@@ -1,6 +1,6 @@
 import { Client } from '@notionhq/client';
 
-import { LinkResult, TreeResult } from '@/types/notion';
+import { LinkResult, PageIcon, TreeResult } from '@/types/notion';
 
 const NOTION_LINK_DATABASE_ID = process.env.NEXT_PUBLIC_NOTION_LINK_DATABASE_ID;
 const NOTION_TREE_DATABASE_ID = process.env.NEXT_PUBLIC_NOTION_TREE_DATABASE_ID;
@@ -133,6 +133,7 @@ export type Tree = {
   link: string;
   display: string;
   order: number;
+  icon: PageIcon;
 };
 
 export const getSocialTree = async () => {
@@ -149,9 +150,10 @@ export const getSocialTree = async () => {
   const tree: Tree[] = results
     .map((result) => ({
       id: result.id,
-      link: result.properties.link.title[0]?.plain_text,
-      display: result.properties.display.rich_text[0]?.plain_text ?? '',
+      display: result.properties.display.title[0]?.plain_text,
+      link: result.properties.link.rich_text[0]?.plain_text ?? '',
       order: result.properties.order.number,
+      icon: result.icon,
     }))
     .sort((a, b) => a.order - b.order);
 

src/pages/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import clsx from 'clsx';
 import { InferGetStaticPropsType } from 'next';
 import * as React from 'react';
@@ -23,7 +24,7 @@ export default function IndexPage({
               <Accent>Notiolink</Accent>
             </h1>
             <div className='grid gap-4 mx-auto mt-8 w-full max-w-sm text-center'>
-              {links.map(({ id, display, link }) => (
+              {links.map(({ id, display, link, icon }) => (
                 <div className='group relative' key={id}>
                   <div
                     className={clsx(
@@ -39,13 +40,32 @@ export default function IndexPage({
                     key={id}
                     href={link}
                     className={clsx(
-                      'block relative',
+                      'flex relative gap-2 justify-center items-center',
                       'px-4 py-4 font-medium transition-colors md:text-lg ',
                       'bg-dark',
                       'border border-gray-600',
                       'focus:outline-none focus-visible:ring focus-visible:ring-primary-500'
                     )}
                   >
+                    {icon ? (
+                      icon.type === 'emoji' ? (
+                        icon.emoji + ' '
+                      ) : icon.type === 'external' ? (
+                        <img
+                          src={icon.external.url}
+                          width={20}
+                          height={20}
+                          alt={`${display} Icon`}
+                        />
+                      ) : (
+                        <img
+                          src={icon.file.url}
+                          width={20}
+                          height={20}
+                          alt={`${display} Icon`}
+                        />
+                      )
+                    ) : null}
                     {display}
                   </UnstyledLink>
                 </div>

src/types/notion.ts

@@ -15,16 +15,33 @@ interface LinkProperties {
 export interface TreeResult {
   id: string;
   properties: TreeProperties;
+  icon: PageIcon;
 }
 
 interface TreeProperties {
-  link: TitleColumn;
-  display: TextColumn;
+  link: TextColumn;
+  display: TitleColumn;
   order: NumberColumn;
 }
 //#endregion  //*======== Social Tree ===========
 
 //#region  //*=========== Commons ===========
+interface ExternalIcon {
+  type: 'external';
+  external: {
+    url: string;
+  };
+}
+interface EmojiIcon {
+  type: 'emoji';
+  emoji: string;
+}
+interface FileIcon {
+  type: 'file';
+  file: { url: string };
+}
+export type PageIcon = ExternalIcon | EmojiIcon | FileIcon | null;
+
 interface TitleColumn {
   id: string;
   type: 'title';