Merge pull request #12 from DismalMango/feat/hover-highlight

Feat: Add hover highlight

Author: Crokily

README.md

@@ -97,4 +97,3 @@ pnpm start            # 启动生产服务器
 # 导出
 pnpm export           # 导出静态站点到 /out 目录
 ```
-

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/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
@@ -10,22 +11,31 @@ export default function DocsIndex() {
     <main style={{ maxWidth: 800, margin: "40px auto", padding: 16 }}>
       <h1 style={{ fontSize: 28, fontWeight: 700, marginBottom: 16 }}>Docs</h1>
       <ul style={{ display: "grid", gap: 12 }}>
-        {pages.map((p) => {
-          const href = `/docs/${p.slugs.join("/")}`;
-          return (
-            <li
-              key={href}
-              style={{ border: "1px solid #eee", borderRadius: 8, padding: 16 }}
+        {pages.map((d) => (
+          <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"
             >
-              <Link href={href} style={{ fontWeight: 600 }}>
-                {p.data.title}
+              <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>
-              {p.data.description && (
-                <p style={{ opacity: 0.8 }}>{p.data.description}</p>
-              )}
-            </li>
-          );
-        })}
+            </HoverCard>
+          </li>
+        ))}
       </ul>
     </main>
   );