feat: handle notion text renderer

JeremyXXXuuu · Mar 25, 2024 · 23c30f3 · 23c30f3
1 parent ba55506
commit 23c30f3
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 9 deletions.
diff --git a/src/components/notion/text.tsx b/src/components/notion/text.tsx
@@ -1,4 +1,4 @@
-import styles from "@/styles/post.module.css";
+import { cn } from "@/lib/utils";
 
 export default function Text({ title }: { title: any }) {
   if (!title) {
@@ -11,14 +11,26 @@ export default function Text({ title }: { title: any }) {
     } = value;
     return (
       <span
-        className={[
-          bold ? styles.bold : "",
-          code ? styles.code : "",
-          italic ? styles.italic : "",
-          strikethrough ? styles.strikethrough : "",
-          underline ? styles.underline : "",
-        ].join(" ")}
-        style={color !== "default" ? { color } : {}}
+        className={cn(
+          "inline",
+          // color !== "default" && `text-${color}-500`,
+          color === "red" && "text-red-500",
+          color === "gray" && "text-gray-500",
+          color === "blue" && "text-blue-500",
+          color === "green" && "text-green-500",
+          color === "purple" && "text-purple-500",
+          color === "pink" && "text-pink-500",
+          color === "yellow" && "text-yellow-500",
+          color === "brown" && "text-brown-500",
+          color === "orange" && "text-orange-500",
+          color === "cyan" && "text-cyan-500",
+
+          bold && "font-bold",
+          code && "bg-input p-0.5 rounded-sm text-pink-600",
+          italic && "italic",
+          strikethrough && "line-through",
+          underline && "underline"
+        )}
         key={text.content}
       >
         {text.link ? <a href={text.link.url}>{text.content}</a> : text.content}

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -3,6 +3,8 @@ import { twMerge } from "tailwind-merge";
 import { RichText } from "../app/pages/[id]/types";
 
 export function cn(...inputs: ClassValue[]) {
+  console.log("clsx ", clsx(inputs));
+  console.log("merge", twMerge(clsx(inputs)));
   return twMerge(clsx(inputs));
 }
 

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -58,6 +58,18 @@
   body {
     @apply bg-background text-foreground;
   }
+  h1 {
+    @apply text-2xl;
+  }
+  h2 {
+    @apply text-xl;
+  }
+  h3 {
+    @apply text-lg;
+  }
+  a {
+    @apply text-secondary underline;
+  }
 }
 
 @media (hover: hover) {