feat: restore prompts page to public site
This commit is contained in:
AyrisAI
@@ -1,6 +1,178 @@
|
||||
import { redirect } from 'next/navigation';
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, use } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { getPrompts } from '@/lib/actions/promptActions';
|
||||
import { Search, Sparkles, Copy, Check, Terminal, ArrowRight, Tag } from 'lucide-react';
|
||||
|
||||
export default function PromptsPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
// Prompts are admin-only – redirect public visitors to lessons
|
||||
redirect('/lessons');
|
||||
const { locale } = use(params);
|
||||
const [search, setSearch] = useState('');
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||
const [prompts, setPrompts] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [copiedId, setCopiedId] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
async function loadData() {
|
||||
setLoading(true);
|
||||
const res = await getPrompts({ query: search, category: selectedCategory || undefined });
|
||||
setPrompts(res);
|
||||
setLoading(false);
|
||||
}
|
||||
loadData();
|
||||
}, [search, selectedCategory]);
|
||||
|
||||
const handleCopy = async (id: string, content: string) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(content);
|
||||
setCopiedId(id);
|
||||
setTimeout(() => setCopiedId(null), 2000);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy prompt:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const categories = Array.from(new Set(prompts.map((p) => p.category)));
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-10 flex-1 w-full">
|
||||
|
||||
{/* Page Header */}
|
||||
<div className="space-y-3">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 text-red-400 text-xs font-bold border border-red-500/20">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
<span>Curated AI System Prompts & Templates</span>
|
||||
</div>
|
||||
<h1 className="text-3xl sm:text-5xl font-black text-white tracking-tight">
|
||||
AI Prompts & Agent Templates Library
|
||||
</h1>
|
||||
<p className="text-sm text-slate-400 max-w-2xl">
|
||||
Battle-tested system prompts, coding instructions, and LLM templates for ChatGPT, Claude, and Gemini agents.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Search & Filter Bar */}
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4 bg-slate-900/80 p-4 rounded-2xl border border-slate-800">
|
||||
|
||||
{/* Search Input */}
|
||||
<div className="relative w-full md:w-96">
|
||||
<Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search AI prompts, keywords, or system roles..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl pl-10 pr-4 py-2 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-red-500/50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Category Filter Pills */}
|
||||
<div className="flex items-center gap-2 overflow-x-auto w-full md:w-auto py-1 scrollbar-none">
|
||||
<button
|
||||
onClick={() => setSelectedCategory(null)}
|
||||
className={`px-3 py-1.5 rounded-xl text-xs font-bold whitespace-nowrap transition-all ${
|
||||
selectedCategory === null
|
||||
? 'bg-red-600 text-white shadow-md shadow-red-600/30'
|
||||
: 'bg-slate-950 text-slate-400 hover:text-white border border-slate-800'
|
||||
}`}
|
||||
>
|
||||
All Prompts
|
||||
</button>
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat}
|
||||
onClick={() => setSelectedCategory(selectedCategory === cat ? null : cat)}
|
||||
className={`px-3 py-1.5 rounded-xl text-xs font-bold whitespace-nowrap transition-all ${
|
||||
selectedCategory === cat
|
||||
? 'bg-red-600 text-white shadow-md shadow-red-600/30'
|
||||
: 'bg-slate-950 text-slate-400 hover:text-white border border-slate-800'
|
||||
}`}
|
||||
>
|
||||
{cat}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Prompts Grid */}
|
||||
{loading ? (
|
||||
<div className="p-12 text-center text-slate-400 flex items-center justify-center gap-2">
|
||||
<Terminal className="w-5 h-5 animate-pulse text-red-500" />
|
||||
<span>Loading data...</span>
|
||||
</div>
|
||||
) : prompts.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{prompts.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="p-6 rounded-3xl bg-slate-900/60 border border-slate-800 hover:border-slate-700 transition-all flex flex-col justify-between space-y-4 shadow-xl group"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] font-bold text-red-400 bg-red-500/10 px-2.5 py-0.5 rounded-full border border-red-500/20">
|
||||
{item.category}
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5 text-[10px] text-slate-500 font-mono">
|
||||
<Tag className="w-3 h-3 text-slate-400" />
|
||||
<span>{item.tags?.join(', ')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="font-bold text-lg text-white group-hover:text-red-400 transition-colors">
|
||||
<Link href={`/${locale}/prompts/${item.slug}`}>
|
||||
{item.title}
|
||||
</Link>
|
||||
</h3>
|
||||
|
||||
<p className="text-xs text-slate-400 line-clamp-2 leading-relaxed">
|
||||
{item.description}
|
||||
</p>
|
||||
|
||||
{/* Prompt Code Preview Box */}
|
||||
<div className="p-4 bg-slate-950 rounded-2xl border border-slate-800 text-xs font-mono text-slate-300 relative group/code overflow-hidden">
|
||||
<pre className="whitespace-pre-wrap line-clamp-3 leading-relaxed">
|
||||
{item.content}
|
||||
</pre>
|
||||
|
||||
<button
|
||||
onClick={() => handleCopy(item.id, item.content)}
|
||||
className="absolute top-2 right-2 px-2.5 py-1 rounded-lg bg-slate-900 border border-slate-800 text-[11px] font-bold text-slate-300 hover:text-white flex items-center gap-1 shadow-md transition-colors"
|
||||
>
|
||||
{copiedId === item.id ? (
|
||||
<>
|
||||
<Check className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span className="text-emerald-400">Copied!</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="w-3.5 h-3.5 text-slate-400" />
|
||||
<span>Copy</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 flex items-center justify-between">
|
||||
<Link
|
||||
href={`/${locale}/prompts/${item.slug}`}
|
||||
className="inline-flex items-center gap-1.5 text-xs font-bold text-red-400 hover:text-red-300 transition-colors"
|
||||
>
|
||||
<span>View Full Prompt & Usage</span>
|
||||
<ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-12 text-center bg-slate-900/40 rounded-2xl border border-slate-800 text-slate-400 text-xs">
|
||||
No prompts found matching your search.
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Code2, BookOpen, Mail, Sparkles } from 'lucide-react';
|
||||
import { Code2, BookOpen, Mail, Sparkles, Terminal } from 'lucide-react';
|
||||
|
||||
export function Navbar({ locale }: { locale: string }) {
|
||||
const t = useTranslations('nav');
|
||||
@@ -13,6 +13,7 @@ export function Navbar({ locale }: { locale: string }) {
|
||||
{ href: `/${locale}`, label: t('home'), icon: Sparkles },
|
||||
{ href: `/${locale}/lessons`, label: t('lessons'), icon: Code2 },
|
||||
{ href: `/${locale}/cheatsheets`, label: t('cheatsheets'), icon: BookOpen },
|
||||
{ href: `/${locale}/prompts`, label: 'Prompts', icon: Terminal },
|
||||
{ href: `/${locale}/contact`, label: t('contact'), icon: Mail },
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user