-

2026-05-19 21:09:56 +08:00
commit f3e6b95be9
78 changed files with 10099 additions and 0 deletions
@@ -0,0 +1,50 @@
+'use client';
+
+import { useState } from 'react';
+
+interface DemoProps {
+  title: string;
+  description?: string;
+  code?: string;
+  children: React.ReactNode;
+}
+
+export function Demo({ title, description, code, children }: DemoProps) {
+  const [showCode, setShowCode] = useState(false);
+
+  return (
+    <div className="my-8 border border-gray-200 rounded-lg overflow-hidden">
+      <div className="bg-gray-50 px-4 py-3 border-b border-gray-200">
+        <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
+        {description && (
+          <p className="mt-1 text-sm text-gray-600">{description}</p>
+        )}
+      </div>
+
+      <div className="p-6 bg-white">
+        {children}
+      </div>
+
+      {code && (
+        <>
+          <div className="border-t border-gray-200 px-4 py-2 bg-gray-50">
+            <button
+              onClick={() => setShowCode(!showCode)}
+              className="text-sm font-medium text-gray-700 hover:text-gray-900"
+            >
+              {showCode ? '隐藏代码' : '查看代码'}
+            </button>
+          </div>
+
+          {showCode && (
+            <div className="border-t border-gray-200">
+              <pre className="p-4 bg-gray-900 text-gray-100 overflow-x-auto text-sm">
+                <code>{code}</code>
+              </pre>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}