From 9511682906c126a105577ce061aab0363038b289 Mon Sep 17 00:00:00 2001
From: AyrisAI <ayris@ayris.tech>
Date: Fri, 24 Jul 2026 00:04:12 +0300
Subject: [PATCH] feat: restore prompts page to public site

---
 app/[locale]/prompts/page.tsx | 178 +++++++++++++++++++++++++++++++++-
 components/Navbar.tsx         |   3 +-
 2 files changed, 177 insertions(+), 4 deletions(-)

diff --git a/app/[locale]/prompts/page.tsx b/app/[locale]/prompts/page.tsx
index bbe25a3..2f45874 100644
--- a/app/[locale]/prompts/page.tsx
+++ b/app/[locale]/prompts/page.tsx
@@ -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>
+  );
 }
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 319330f..bead771 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -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 },
   ];