Prompt

import { PromptButton, PromptPanel } from "@/registry/wuhan/composed/prompt";
import { Sparkles } from "lucide-react";

export function Example() {
  const prompts = [
    { text: "解释一下 React Hooks", icon: Sparkles },
    { text: "如何优化性能？", icon: Sparkles },
    { text: "什么是虚拟 DOM？", icon: Sparkles },
  ];
  
  return (
    <PromptPanel 
      items={prompts}
      variant="vertical"
      onPromptClick={(text) => console.log(text)}
    />
  );
}

import { PromptButton } from "@/registry/wuhan/composed/prompt";
import { Lightbulb } from "lucide-react";

function PromptButtons() {
  return (
    <div className="space-y-2">
      {/* 水平布局 */}
      <PromptButton 
        variant="horizontal"
        onClick={() => console.log("clicked")}
      >
        快速提问
      </PromptButton>
      
      {/* 垂直布局，默认 Sparkles 图标 */}
      <PromptButton variant="vertical">
        帮我写一段代码
      </PromptButton>
      
      {/* 自定义图标 */}
      <PromptButton 
        variant="vertical"
        icon={Lightbulb}
      >
        给我一些建议
      </PromptButton>
    </div>
  );
}

import { PromptGroup, PromptButton } from "@/registry/wuhan/composed/prompt";

function PromptList() {
  return (
    <PromptGroup variant="horizontal">
      <PromptButton>提示 1</PromptButton>
      <PromptButton>提示 2</PromptButton>
      <PromptButton>提示 3</PromptButton>
    </PromptGroup>
  );
}

interface PromptItem {
  text: string;        // 提示文本
  icon?: LucideIcon;   // 可选图标（仅 vertical 模式）
}

import { PromptPanel } from "@/registry/wuhan/composed/prompt";
import { MessageSquare, Code, Lightbulb } from "lucide-react";

function ChatPrompts() {
  const prompts = [
    { text: "解释 React Hooks 的工作原理" },
    { text: "如何优化 React 性能？" },
    { text: "什么是虚拟 DOM？" },
  ];
  
  const verticalPrompts = [
    { text: "帮我写一段代码", icon: Code },
    { text: "给我一些建议", icon: Lightbulb },
    { text: "开始聊天", icon: MessageSquare },
  ];
  
  return (
    <div className="space-y-4">
      {/* 水平布局 */}
      <PromptPanel 
        items={prompts}
        variant="horizontal"
        onPromptClick={(text) => console.log("Clicked:", text)}
      />
      
      {/* 垂直布局，带图标 */}
      <PromptPanel 
        items={verticalPrompts}
        variant="vertical"
        onPromptClick={(text) => console.log("Clicked:", text)}
      />
    </div>
  );
}

type PromptVariant = "horizontal" | "vertical";

// 自定义按钮样式
<PromptButton 
  variant="horizontal"
  className="bg-primary text-primary-foreground hover:bg-primary/90"
>
  自定义样式
</PromptButton>

// 自定义容器样式
<PromptGroup 
  variant="vertical"
  className="gap-4 grid grid-cols-2"
>
  {/* ... */}
</PromptGroup>

// 自定义面板样式
<PromptPanel
  items={items}
  className="p-4 border rounded-lg"
/>

import { PromptPanel } from "@/registry/wuhan/composed/prompt";
import { Code, FileText, MessageSquare } from "lucide-react";

function CategorizedPrompts() {
  const categories = [
    {
      title: "编程相关",
      prompts: [
        { text: "如何学习 React？", icon: Code },
        { text: "TypeScript 最佳实践", icon: Code },
      ],
    },
    {
      title: "文档编写",
      prompts: [
        { text: "写一篇技术博客", icon: FileText },
        { text: "API 文档模板", icon: FileText },
      ],
    },
  ];
  
  return (
    <div className="space-y-6">
      {categories.map((category) => (
        <div key={category.title}>
          <h3 className="mb-2 text-sm font-medium text-muted-foreground">
            {category.title}
          </h3>
          <PromptPanel 
            items={category.prompts}
            variant="vertical"
            onPromptClick={(text) => console.log(text)}
          />
        </div>
      ))}
    </div>
  );
}

import { PromptButton } from "@/registry/wuhan/composed/prompt";
import { useState } from "react";
import { Search } from "lucide-react";

function SearchWithPrompts() {
  const [query, setQuery] = useState("");
  const suggestions = [
    "React 性能优化",
    "TypeScript 类型体操",
    "Next.js 最佳实践",
  ];
  
  const handlePromptClick = (text: string) => {
    setQuery(text);
    // 执行搜索
  };
  
  return (
    <div className="space-y-2">
      <div className="relative">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="搜索..."
          className="w-full pl-10 pr-4 py-2 border rounded-lg"
        />
      </div>
      
      {!query && (
        <div className="flex flex-wrap gap-2">
          {suggestions.map((suggestion) => (
            <PromptButton
              key={suggestion}
              variant="horizontal"
              onClick={() => handlePromptClick(suggestion)}
            >
              {suggestion}
            </PromptButton>
          ))}
        </div>
      )}
    </div>
  );
}

import { PromptPanel } from "@/registry/wuhan/composed/prompt";
import { useState, useEffect } from "react";

function DynamicPrompts() {
  const [prompts, setPrompts] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    // 模拟 API 调用
    setTimeout(() => {
      setPrompts([
        { text: "今天天气怎么样？" },
        { text: "推荐一部电影" },
        { text: "讲个笑话" },
      ]);
      setLoading(false);
    }, 1000);
  }, []);
  
  if (loading) {
    return <div>加载中...</div>;
  }
  
  return (
    <PromptPanel
      items={prompts}
      variant="horizontal"
      onPromptClick={(text) => console.log(text)}
    />
  );
}

import { PromptPanel } from "@/registry/wuhan/composed/prompt";
import { useState } from "react";
import { Send } from "lucide-react";

function ChatInterface() {
  const [input, setInput] = useState("");
  const [messages, setMessages] = useState([]);
  
  const prompts = [
    { text: "解释一下 React Hooks" },
    { text: "如何优化性能？" },
    { text: "什么是虚拟 DOM？" },
  ];
  
  const handlePromptClick = (text: string) => {
    setInput(text);
  };
  
  const handleSend = () => {
    if (!input.trim()) return;
    setMessages([...messages, { role: "user", content: input }]);
    setInput("");
  };
  
  return (
    <div className="flex flex-col h-screen">
      {/* 消息列表 */}
      <div className="flex-1 overflow-y-auto p-4">
        {messages.length === 0 && (
          <div className="flex items-center justify-center h-full">
            <div className="text-center space-y-4">
              <h2 className="text-2xl font-bold">开始对话</h2>
              <PromptPanel
                items={prompts}
                variant="vertical"
                onPromptClick={handlePromptClick}
              />
            </div>
          </div>
        )}
        {/* 渲染消息... */}
      </div>
      
      {/* 输入框 */}
      <div className="border-t p-4">
        <div className="flex gap-2">
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyPress={(e) => e.key === "Enter" && handleSend()}
            placeholder="输入消息..."
            className="flex-1 px-4 py-2 border rounded-lg"
          />
          <button 
            onClick={handleSend}
            className="px-4 py-2 bg-primary text-primary-foreground rounded-lg"
          >
            <Send className="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  );
}