|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import { Suspense } from "react"; |
| 4 | +import { useState, useMemo, useEffect } from "react"; |
| 5 | +import { groupPromptsByCollection, filterPrompts } from "@/lib/promptData"; |
| 6 | +import { PromptModel } from "@/lib/types"; |
| 7 | +import { Header } from "@/components/Header"; |
| 8 | +import { Sidebar } from "@/components/Sidebar"; |
| 9 | +import { Layout } from "@/components/Layout"; |
| 10 | +import { PromptCollection } from "@/components/PromptCollection"; |
| 11 | +import { UseCasesShowcase } from "@/components/UseCasesShowcase"; |
| 12 | +import { PoweredByCarousel } from "@/components/PoweredByCarousel"; |
| 13 | +import { usePrompts } from "@/lib/hooks/usePrompts"; |
| 14 | +import { useAuth } from "@/components/AuthProvider"; |
| 15 | + |
| 16 | +function DashboardContent() { |
| 17 | + const { prompts: allPrompts, loading, error } = usePrompts(); |
| 18 | + const { loading: authLoading } = useAuth(); |
| 19 | + const [searchQuery, setSearchQuery] = useState(""); |
| 20 | + const [filters, setFilters] = useState<{ |
| 21 | + query: string; |
| 22 | + model: PromptModel | ""; |
| 23 | + }>({ query: "", model: "" }); |
| 24 | + const [activeCollection, setActiveCollection] = useState< |
| 25 | + string | undefined |
| 26 | + >(); |
| 27 | + |
| 28 | + useEffect(() => { |
| 29 | + if (typeof window !== "undefined") { |
| 30 | + const urlParams = new URLSearchParams(window.location.search); |
| 31 | + const collection = urlParams.get("collection"); |
| 32 | + if (collection) setActiveCollection(collection); |
| 33 | + } |
| 34 | + }, []); |
| 35 | + |
| 36 | + useEffect(() => { |
| 37 | + setFilters((prev) => ({ ...prev, query: searchQuery })); |
| 38 | + }, [searchQuery]); |
| 39 | + |
| 40 | + const filteredPrompts = useMemo(() => { |
| 41 | + return filterPrompts(allPrompts, { |
| 42 | + query: filters.query || undefined, |
| 43 | + model: filters.model || undefined, |
| 44 | + collection: activeCollection, |
| 45 | + }); |
| 46 | + }, [filters, allPrompts, activeCollection]); |
| 47 | + |
| 48 | + const promptsByCollection = useMemo(() => { |
| 49 | + return groupPromptsByCollection(filteredPrompts); |
| 50 | + }, [filteredPrompts]); |
| 51 | + |
| 52 | + const collections = Object.keys(promptsByCollection).sort(); |
| 53 | + |
| 54 | + return ( |
| 55 | + <Layout |
| 56 | + header={ |
| 57 | + <Header onSearch={setSearchQuery} promptCount={allPrompts.length} /> |
| 58 | + } |
| 59 | + sidebar={ |
| 60 | + allPrompts.length > 0 ? ( |
| 61 | + <Sidebar prompts={allPrompts} activeCollection={activeCollection} /> |
| 62 | + ) : null |
| 63 | + } |
| 64 | + > |
| 65 | + {error ? ( |
| 66 | + <div className="max-w-2xl mx-auto"> |
| 67 | + <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-400"> |
| 68 | + <p className="font-medium">Failed to load prompts</p> |
| 69 | + <p className="text-sm mt-1">{error}</p> |
| 70 | + </div> |
| 71 | + </div> |
| 72 | + ) : (authLoading || loading) ? ( |
| 73 | + <div className="max-w-5xl mx-auto w-full animate-pulse space-y-6"> |
| 74 | + {[1, 2, 3].map((i) => ( |
| 75 | + <div key={i}> |
| 76 | + <div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-20 mb-2 mx-3" /> |
| 77 | + {[1, 2, 3].map((j) => ( |
| 78 | + <div key={j} className="h-10 bg-neutral-100 dark:bg-neutral-900 rounded-md mb-1 mx-1" /> |
| 79 | + ))} |
| 80 | + </div> |
| 81 | + ))} |
| 82 | + </div> |
| 83 | + ) : allPrompts.length === 0 ? ( |
| 84 | + <div className="max-w-2xl mx-auto"> |
| 85 | + <div className="text-center mb-8"> |
| 86 | + <h1 className="font-serif-title text-4xl sm:text-5xl font-normal text-neutral-900 dark:text-neutral-100 mb-4"> |
| 87 | + closedNote |
| 88 | + </h1> |
| 89 | + <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-xl mx-auto"> |
| 90 | + Your personal prompt notebook. Create, organize, and refine AI |
| 91 | + prompts with speed and clarity. |
| 92 | + </p> |
| 93 | + </div> |
| 94 | + <div className="mb-8"> |
| 95 | + <div className="text-center mb-2 text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-400"> |
| 96 | + Powered by |
| 97 | + </div> |
| 98 | + <PoweredByCarousel /> |
| 99 | + </div> |
| 100 | + <UseCasesShowcase /> |
| 101 | + </div> |
| 102 | + ) : ( |
| 103 | + <div className="max-w-5xl mx-auto w-full"> |
| 104 | + <div> |
| 105 | + {collections.length === 0 ? ( |
| 106 | + <div className="text-center py-16"> |
| 107 | + <p className="text-neutral-500 dark:text-neutral-400"> |
| 108 | + No prompts found matching your filters. |
| 109 | + </p> |
| 110 | + </div> |
| 111 | + ) : ( |
| 112 | + <div className="border border-neutral-100 dark:border-neutral-800 rounded-lg overflow-hidden"> |
| 113 | + {collections.map((collection) => ( |
| 114 | + <PromptCollection |
| 115 | + key={collection} |
| 116 | + collection={collection} |
| 117 | + prompts={promptsByCollection[collection]} |
| 118 | + /> |
| 119 | + ))} |
| 120 | + </div> |
| 121 | + )} |
| 122 | + </div> |
| 123 | + </div> |
| 124 | + )} |
| 125 | + </Layout> |
| 126 | + ); |
| 127 | +} |
| 128 | + |
| 129 | +export default function Dashboard() { |
| 130 | + return ( |
| 131 | + <Suspense fallback={<div>Loading...</div>}> |
| 132 | + <DashboardContent /> |
| 133 | + </Suspense> |
| 134 | + ); |
| 135 | +} |
0 commit comments