Update remote soul-content with local content

components/chapters-list.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { ChevronRight, Lock, Unlock, BookOpen } from "lucide-react"
+import { Part } from "@/lib/book-data"
+
+interface ChaptersListProps {
+  parts: Part[]
+  specialSections?: {
+    preface?: { title: string }
+    epilogue?: { title: string }
+  }
+}
+
+export function ChaptersList({ parts, specialSections }: ChaptersListProps) {
+  const [expandedPart, setExpandedPart] = useState<string | null>(parts.length > 0 ? parts[0].id : null)
+
+  return (
+    <div className="space-y-8">
+      {/* Special sections - Preface */}
+      {specialSections?.preface && (
+        <div className="space-y-3">
+          <Link href={`/read/preface`} className="block group">
+            <div className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-4 border border-transparent hover:border-[#38bdac]/30 transition-all flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <Unlock className="w-4 h-4 text-[#38bdac]" />
+                <span className="text-gray-300 group-hover:text-white transition-colors">
+                  {specialSections.preface.title}
+                </span>
+              </div>
+              <span className="text-[#38bdac] text-sm">免费</span>
+            </div>
+          </Link>
+        </div>
+      )}
+
+      {/* Parts */}
+      <div className="space-y-4">
+        {parts.map((part) => (
+          <div
+            key={part.id}
+            className="bg-[#0f2137]/40 backdrop-blur-md rounded-xl border border-gray-800/50 overflow-hidden"
+          >
+            {/* Part header */}
+            <button
+              onClick={() => setExpandedPart(expandedPart === part.id ? null : part.id)}
+              className="w-full p-5 flex items-center justify-between hover:bg-[#0f2137]/60 transition-colors"
+            >
+              <div className="flex items-center gap-4">
+                <span className="text-[#38bdac] font-mono text-lg">{part.number}</span>
+                <div className="text-left">
+                  <h2 className="text-white text-xl font-semibold">{part.title}</h2>
+                  <p className="text-gray-500 text-sm">{part.subtitle}</p>
+                </div>
+              </div>
+              <ChevronRight
+                className={`w-5 h-5 text-gray-500 transition-transform ${
+                  expandedPart === part.id ? "rotate-90" : ""
+                }`}
+              />
+            </button>
+
+            {/* Chapters and sections */}
+            {expandedPart === part.id && (
+              <div className="border-t border-gray-800/50">
+                {part.chapters.map((chapter) => (
+                  <div key={chapter.id} className="border-b border-gray-800/30 last:border-b-0">
+                    {/* Chapter title */}
+                    <div className="px-5 py-3 bg-[#0a1628]/50">
+                      <h3 className="text-gray-400 text-sm font-medium flex items-center gap-2">
+                        <BookOpen className="w-4 h-4" />
+                        {chapter.title}
+                      </h3>
+                    </div>
+
+                    {/* Sections */}
+                    <div className="divide-y divide-gray-800/30">
+                      {chapter.sections.map((section) => (
+                        <Link
+                          key={section.id}
+                          href={`/read/${section.id}`}
+                          className="block px-5 py-4 hover:bg-[#0f2137]/40 transition-colors group"
+                        >
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-3">
+                              {section.isFree ? (
+                                <Unlock className="w-4 h-4 text-[#38bdac]" />
+                              ) : (
+                                <Lock className="w-4 h-4 text-gray-500" />
+                              )}
+                              <span className="text-gray-400 font-mono text-sm">{section.id}</span>
+                              <span className="text-gray-300 group-hover:text-white transition-colors">
+                                {section.title}
+                              </span>
+                            </div>
+                            <div className="flex items-center gap-3">
+                              {section.isFree ? (
+                                <span className="text-[#38bdac] text-sm">免费</span>
+                              ) : (
+                                <span className="text-gray-500 text-sm">¥{section.price}</span>
+                              )}
+                              <ChevronRight className="w-4 h-4 text-gray-600 group-hover:text-gray-400" />
+                            </div>
+                          </div>
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Special sections - Epilogue */}
+      {specialSections?.epilogue && (
+        <div className="mt-8 space-y-3">
+          <Link href={`/read/epilogue`} className="block group">
+            <div className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-4 border border-transparent hover:border-[#38bdac]/30 transition-all flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <Unlock className="w-4 h-4 text-[#38bdac]" />
+                <span className="text-gray-300 group-hover:text-white transition-colors">
+                  {specialSections.epilogue.title}
+                </span>
+              </div>
+              <span className="text-[#38bdac] text-sm">免费</span>
+            </div>
+          </Link>
+        </div>
+      )}
+    </div>
+  )
+}