Initial commit

2026-03-05 16:46:38 +07:00
commit 112e8604e2
124 changed files with 14369 additions and 0 deletions
@@ -0,0 +1,45 @@
+import Link from "next/link"
+import { BookOpen, Sparkles, Flame, Heart, Swords, Building2, Rocket, Crown, Laugh, Search, Shield } from "lucide-react"
+import { genres, getNovelsByGenre } from "@/lib/data"
+
+const iconMap: Record<string, React.ReactNode> = {
+  Sparkles: <Sparkles className="h-6 w-6" />,
+  Flame: <Flame className="h-6 w-6" />,
+  Heart: <Heart className="h-6 w-6" />,
+  Sword: <Swords className="h-6 w-6" />,
+  Building: <Building2 className="h-6 w-6" />,
+  Rocket: <Rocket className="h-6 w-6" />,
+  Crown: <Crown className="h-6 w-6" />,
+  Laugh: <Laugh className="h-6 w-6" />,
+  Search: <Search className="h-6 w-6" />,
+  Shield: <Shield className="h-6 w-6" />,
+}
+
+export default function GenresPage() {
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-6">
+      <h1 className="mb-6 text-2xl font-bold text-foreground">Thể Loại Truyện</h1>
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {genres.map((genre) => {
+          const novelCount = getNovelsByGenre(genre.slug).length
+          return (
+            <Link
+              key={genre.id}
+              href={`/the-loai/${genre.slug}`}
+              className="group flex items-start gap-4 rounded-xl border border-border bg-card p-5 transition-all hover:border-primary/30 hover:shadow-md"
+            >
+              <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
+                {iconMap[genre.icon] || <BookOpen className="h-6 w-6" />}
+              </span>
+              <div>
+                <h2 className="text-base font-semibold text-foreground group-hover:text-primary transition-colors">{genre.name}</h2>
+                <p className="mt-1 text-sm leading-relaxed text-muted-foreground">{genre.description}</p>
+                <p className="mt-2 text-xs text-muted-foreground">{novelCount} truyện</p>
+              </div>
+            </Link>
+          )
+        })}
+      </div>
+    </div>
+  )
+}