"use client"; import { BookOpen, Heart, Loader2, MoreVertical, Plus, Search, Sparkles, Star, Trash2, } from "lucide-react"; import { useState } from "react"; import { cn } from "@/lib/utils"; import { Avatar, AvatarFallback, AvatarImage, } from "@/registry/new-york/ui/avatar"; import { Badge } from "@/registry/new-york/ui/badge"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/registry/new-york/ui/dialog"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/registry/new-york/ui/dropdown-menu"; import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, } from "@/registry/new-york/ui/empty"; import { Field, FieldContent, FieldLabel } from "@/registry/new-york/ui/field"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/registry/new-york/ui/input-group"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/registry/new-york/ui/select"; import { Separator } from "@/registry/new-york/ui/separator"; import { Textarea } from "@/registry/new-york/ui/textarea"; export interface TeamPrompt { id: string; title: string; prompt: string; description?: string; category?: string; tags?: string[]; author: { id: string; name: string; avatar?: string; }; isFavorite?: boolean; rating?: number; usageCount?: number; bestModel?: string; tone?: string; createdAt: Date; updatedAt: Date; } export interface TeamPromptLibraryProps { prompts?: TeamPrompt[]; currentUserId?: string; onCreate?: (data: { title: string; prompt: string; description?: string; category?: string; tags?: string[]; bestModel?: string; tone?: string; }) => Promise; onUpdate?: (promptId: string, data: Partial) => Promise; onDelete?: (promptId: string) => Promise; onFavorite?: (promptId: string, isFavorite: boolean) => Promise; onUse?: (prompt: TeamPrompt) => void; className?: string; showSearch?: boolean; showCategories?: boolean; } const defaultCategories = [ "All", "Writing", "Code", "Analysis", "Creative", "Research", "Business", ]; function formatDate(date: Date): string { return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", }).format(date); } function getInitials(name: string): string { return name .split(" ") .map((n) => n[0]) .join("") .toUpperCase() .slice(0, 2); } export default function TeamPromptLibrary({ prompts = [], currentUserId, onCreate, onUpdate, onDelete, onFavorite, onUse, className, showSearch = true, showCategories = true, }: TeamPromptLibraryProps) { const [searchQuery, setSearchQuery] = useState(""); const [selectedCategory, setSelectedCategory] = useState("All"); const [createDialogOpen, setCreateDialogOpen] = useState(false); const [isCreating, setIsCreating] = useState(false); const [actionLoading, setActionLoading] = useState(null); const [promptData, setPromptData] = useState({ title: "", prompt: "", description: "", category: "", tags: [] as string[], bestModel: "", tone: "", }); const filteredPrompts = prompts.filter((prompt) => { const matchesCategory = selectedCategory === "All" || prompt.category === selectedCategory; const matchesSearch = !searchQuery.trim() || prompt.title.toLowerCase().includes(searchQuery.toLowerCase()) || prompt.prompt.toLowerCase().includes(searchQuery.toLowerCase()) || prompt.description?.toLowerCase().includes(searchQuery.toLowerCase()) || prompt.tags?.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()) ); return matchesCategory && matchesSearch; }); const handleCreate = async () => { if (!(promptData.title.trim() && promptData.prompt.trim() && onCreate)) return; setIsCreating(true); try { await onCreate(promptData); setPromptData({ title: "", prompt: "", description: "", category: "", tags: [], bestModel: "", tone: "", }); setCreateDialogOpen(false); } finally { setIsCreating(false); } }; const handleAction = async ( action: () => Promise, promptId: string ) => { setActionLoading(promptId); try { await action(); } finally { setActionLoading(null); } }; return (

Prompt Library {prompts.length} prompt{prompts.length !== 1 ? "s" : ""} shared with your team

{onCreate && (

Code Review Assistant

Blog Post Writer

Code Review Assistant

Blog Post Writer