import { PromptCard } from "@site/src/components/prompt-card"; import { useState, useEffect } from "react"; import { motion } from "framer-motion"; import Layout from "@theme/Layout"; import Admonition from '@theme/Admonition'; import type { Prompt, Category } from "@site/src/types/prompt"; import { searchPrompts } from "@site/src/utils/prompts"; import { Button } from "@site/src/components/ui/button"; import { PillFilter, type PillFilterOption } from "@site/src/components/ui/pill-filter"; import { SidebarFilter, type SidebarFilterGroup } from "@site/src/components/ui/sidebar-filter"; import { Menu, X } from 'lucide-react'; const categoryOptions: PillFilterOption[] = [ { label: "All", value: "all" }, { label: "Business", value: "business" }, { label: "Technical", value: "technical" }, { label: "Productivity", value: "productivity" }, ]; const sidebarFilterGroups: SidebarFilterGroup[] = [ { title: "Job", options: [ { label: "Engineering", value: "engineering" }, { label: "Design", value: "design" }, { label: "Project Management", value: "project-management" }, { label: "Marketing/Content", value: "marketing-content" }, { label: "Data Analytics", value: "data-analytics" }, { label: "Operations", value: "operations" } ], } ]; export default function HomePage() { const [prompts, setPrompts] = useState([]); const [searchQuery, setSearchQuery] = useState(""); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); const [currentPage, setCurrentPage] = useState(1); const [selectedCategory, setSelectedCategory] = useState("all"); const [selectedFilters, setSelectedFilters] = useState>({}); const [isMobileFilterOpen, setIsMobileFilterOpen] = useState(false); const promptsPerPage = 20; useEffect(() => { const loadPrompts = async () => { try { setIsLoading(true); setError(null); const results = await searchPrompts(searchQuery); // Filter results based on category let filteredResults = results; if (selectedCategory !== "all") { filteredResults = results.filter(prompt => prompt.category === selectedCategory ); } // Apply job filters Object.entries(selectedFilters).forEach(([group, values]) => { if (values.length > 0) { filteredResults = filteredResults.filter(prompt => { if (group === "Job") { return values.includes(prompt.job); } return true; }); } }); setPrompts(filteredResults); } catch (err) { const errorMessage = err instanceof Error ? err.message : "Unknown error"; setError(`Failed to load prompts: ${errorMessage}`); console.error("Error loading prompts:", err); } finally { setIsLoading(false); } }; const timeoutId = setTimeout(loadPrompts, 300); return () => clearTimeout(timeoutId); }, [searchQuery, selectedCategory, selectedFilters]); // Close mobile filter when screen size changes to desktop useEffect(() => { const handleResize = () => { if (window.innerWidth >= 768) { setIsMobileFilterOpen(false); } }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return (

Prompt Library

Your central directory for discovering and using effective prompts with Goose.

{ setSearchQuery(e.target.value); setCurrentPage(1); }} />

{ setSelectedCategory(category); setCurrentPage(1); }} />

{error && (

{error}

)} {/* Mobile Filter Toggle Button */}

{/* Mobile Sidebar Filter */}

{ setSelectedFilters(prev => ({ ...prev, [groupTitle]: values })); setCurrentPage(1); }} />

{searchQuery ? `${prompts.length} result${prompts.length > 1 ? "s" : "" } for "${searchQuery}"` : ""}

{isLoading ? (

Loading prompts...

) : prompts.length === 0 ? (

{searchQuery ? "No prompts found matching your search." : "No prompts available in the library yet."}

) : ( <>

{prompts .slice((currentPage - 1) * promptsPerPage, currentPage * promptsPerPage) .map((prompt) => ( ))}

{/* Pagination Controls */} {prompts.length > promptsPerPage && (

Page {currentPage} of {Math.ceil(prompts.length / promptsPerPage)}

)} )}

); }