fix: code block style conflict

Author: DismalMango

app/components/HoverCard.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+interface HoverCardProps {
+  children: React.ReactNode;
+  className?: string;
+  hoverType?: "darken" | "scale" | "lift" | "glow";
+}
+
+export default function HoverCard({
+  children,
+  className = "",
+  hoverType = "scale",
+}: HoverCardProps) {
+  const getHoverStyles = () => {
+    switch (hoverType) {
+      case "darken":
+        return "hover:brightness-90 transition-all duration-200 ease-in-out";
+      case "scale":
+        return "hover:scale-105 hover:shadow-lg transition-all duration-200 ease-in-out";
+      case "lift":
+        return "hover:-translate-y-1 hover:shadow-lg transition-all duration-200 ease-in-out";
+      case "glow":
+        return "hover:shadow-xl hover:shadow-primary/20 transition-all duration-200 ease-in-out";
+      default:
+        return "hover:scale-105 hover:shadow-lg transition-all duration-200 ease-in-out";
+    }
+  };
+
+  return <div className={`${getHoverStyles()} ${className}`}>{children}</div>;
+}

app/docs/[...slug]/page.tsx

@@ -23,10 +23,8 @@ export default async function DocPage({ params }: Param) {
   return (
     <DocsPage toc={page.data.toc}>
       <DocsBody>
-        <h1 className="hover-darken-text">{page.data.title}</h1>
-        <div className="hover-darken">
-          <Mdx components={getMDXComponents()} />
-        </div>
+        <h1>{page.data.title}</h1>
+        <Mdx components={getMDXComponents()} />
       </DocsBody>
     </DocsPage>
   );

app/globals.css

@@ -277,66 +277,3 @@
     @apply bg-background text-foreground;
   }
 }
-
-@layer utilities {
-  /* 通用 hover 变深效果 */
-  .hover-darken {
-    transition: filter 0.2s ease-in-out;
-  }
-
-  .hover-darken:hover {
-    filter: brightness(0.8);
-  }
-
-  /* 针对不同颜色类型的 hover 变深效果 */
-  .hover-darken-bg {
-    transition: all 0.2s ease-in-out;
-  }
-
-  .hover-darken-bg:hover {
-    background-color: #f0f0f0 !important;
-    transform: scale(1.02);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  }
-
-  .hover-darken-text {
-    transition: filter 0.2s ease-in-out;
-  }
-
-  .hover-darken-text:hover {
-    filter: brightness(0.8);
-  }
-
-  /* 使用 CSS 变量实现更精确的颜色控制 */
-  .hover-darken-custom {
-    transition:
-      background-color 0.2s ease-in-out,
-      color 0.2s ease-in-out;
-  }
-
-  .hover-darken-custom:hover {
-    background-color: color-mix(in srgb, currentColor 15%, transparent);
-  }
-
-  /* 针对链接的特殊 hover 效果 */
-  .hover-link {
-    transition: all 0.2s ease-in-out;
-    position: relative;
-  }
-
-  .hover-link:hover {
-    filter: brightness(0.8);
-    transform: translateY(-1px);
-  }
-
-  /* 针对按钮的 hover 效果 */
-  .hover-button {
-    transition: all 0.2s ease-in-out;
-  }
-
-  .hover-button:hover {
-    filter: brightness(0.9);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  }
-}

app/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { source } from "@/lib/source";
+import HoverCard from "@/app/components/HoverCard";
 
 export default function DocsIndex() {
   const pages = source
@@ -11,32 +12,28 @@ export default function DocsIndex() {
       <h1 style={{ fontSize: 28, fontWeight: 700, marginBottom: 16 }}>Docs</h1>
       <ul style={{ display: "grid", gap: 12 }}>
         {pages.map((d) => (
-          <li
-            key={d.slugs.join("/")}
-            className="hover-darken-bg"
-            style={{
-              border: "1px solid #eee",
-              borderRadius: 8,
-              padding: 16,
-              cursor: "pointer",
-            }}
-          >
-            <Link
-              href={`/docs/${d.slugs.join("/")}`}
-              className="hover-link block w-full h-full"
-              style={{
-                fontWeight: 600,
-                textDecoration: "none",
-                color: "inherit",
-              }}
+          <li key={d.slugs.join("/")}>
+            <HoverCard
+              hoverType="scale"
+              className="border border-gray-200 rounded-lg p-4 cursor-pointer bg-white dark:bg-gray-800 dark:border-gray-700"
             >
-              {d.data.title}
-              {d.data.description && (
-                <p style={{ opacity: 0.8, marginTop: 8 }}>
-                  {d.data.description}
-                </p>
-              )}
-            </Link>
+              <Link
+                href={`/docs/${d.slugs.join("/")}`}
+                className="block w-full h-full"
+                style={{
+                  fontWeight: 600,
+                  textDecoration: "none",
+                  color: "inherit",
+                }}
+              >
+                {d.data.title}
+                {d.data.description && (
+                  <p style={{ opacity: 0.8, marginTop: 8 }}>
+                    {d.data.description}
+                  </p>
+                )}
+              </Link>
+            </HoverCard>
           </li>
         ))}
       </ul>

mdx-components.tsx

@@ -4,56 +4,6 @@ import type { MDXComponents } from "mdx/types";
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
   return {
     ...defaultMdxComponents,
-    a: ({ children, ...props }) => (
-      <a className="hover-link" {...props}>
-        {children}
-      </a>
-    ),
-    code: ({ children, ...props }) => (
-      <code className="hover-darken-text" {...props}>
-        {children}
-      </code>
-    ),
-    pre: ({ children, ...props }) => (
-      <pre className="hover-darken-bg" {...props}>
-        {children}
-      </pre>
-    ),
-    blockquote: ({ children, ...props }) => (
-      <blockquote className="hover-darken-bg" {...props}>
-        {children}
-      </blockquote>
-    ),
-    h1: ({ children, ...props }) => (
-      <h1 className="hover-darken-text" {...props}>
-        {children}
-      </h1>
-    ),
-    h2: ({ children, ...props }) => (
-      <h2 className="hover-darken-text" {...props}>
-        {children}
-      </h2>
-    ),
-    h3: ({ children, ...props }) => (
-      <h3 className="hover-darken-text" {...props}>
-        {children}
-      </h3>
-    ),
-    h4: ({ children, ...props }) => (
-      <h4 className="hover-darken-text" {...props}>
-        {children}
-      </h4>
-    ),
-    h5: ({ children, ...props }) => (
-      <h5 className="hover-darken-text" {...props}>
-        {children}
-      </h5>
-    ),
-    h6: ({ children, ...props }) => (
-      <h6 className="hover-darken-text" {...props}>
-        {children}
-      </h6>
-    ),
     ...components,
   };
 }