keith/Prompt_Catalog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨feature: Style add page and add sidebar

Browse Source
This commit is contained in:
Keith Solomon
2025-07-16 22:03:37 -05:00
parent b3723556ab
commit f5cfc55e0a
2 changed files with 60 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Sidebar.astro
View File

@@ -3,19 +3,13 @@
--- ---
<aside class="w-64 border-r h-full p-4 text-gray-100"> <aside class="w-64 border-r h-full p-4 text-gray-100">
<h2 class="text-lg font-semibold mb-4">Prompt Types</h2> <h2 class="text-lg font-semibold mb-4">Add a prompt</h2>
<ul class="space-y-2"> <p class="text-sm mb-4">
<li> Use the form to add a new AI prompt to the catalog.
<button class="w-full text-left bg-blue-100 text-blue-700 px-3 py-2 rounded hover:bg-blue-200">
System
</button>
</li>
<li> Make sure to include a title, type, description, and any relevant tags.
<button class="w-full text-left bg-green-100 text-green-700 px-3 py-2 rounded hover:bg-green-200">
Task You can also add notes for your own reference.
</button> </p>
</li>
</ul>
</aside> </aside>

97
src/pages/add.astro
View File

@@ -1,5 +1,6 @@
--- ---
import "../styles/global.css"; import "../styles/global.css";
import Sidebar from "../components/Sidebar.astro";
const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL; const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL;
const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY; const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
@@ -7,7 +8,7 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
<html> <html>
<head> <head>
<title>Add Prompt</title> <title>Prompt Catalog - Add New Prompt</title>
</head> </head>
<body class="font-sans antialiased bg-gray-800 text-gray-100"> <body class="font-sans antialiased bg-gray-800 text-gray-100">
@@ -18,52 +19,60 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
hidden hidden
></div> ></div>
<h1 class="text-2xl font-bold mb-4">Add New Prompt</h1> <div class="border-b p-4">
<h1 class="text-2xl font-bold">Prompt Catalog - Add New Prompt</h1>
<div id="success" class="bg-green-100 text-green-700 p-4 rounded mb-4 hidden"> <p class="text-sm mt-1">Add a new AI prompt to the catalog</p>
Prompt added successfully!
</div> </div>
<div id="error" class="bg-red-100 text-red-700 p-4 rounded mb-4 hidden"></div>
<form id="add-form" class="space-y-4"> <div class="flex h-screen">
<div> <Sidebar />
<label for="title" class="block font-medium">Title</label>
<input name="title" id="title" required class="border p-2 w-full rounded" /> <div class="flex-1 flex flex-col overflow-hidden">
<input type="hidden" name="slug" id="slug" /> <main class="flex-1 overflow-y-auto p-4">
<div id="success" class="bg-green-100 text-green-700 p-4 rounded mb-4 hidden">
Prompt added successfully!
</div>
<div id="error" class="bg-red-100 text-red-700 p-4 rounded mb-4 hidden"></div>
<form id="add-form" class="space-y-4">
<div>
<label for="title" class="block font-medium">Title</label>
<input name="title" id="title" required class="border p-2 w-full rounded" />
<input type="hidden" name="slug" id="slug" />
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="type" class="block font-medium">Type</label>
<select name="type" id="type" required class="border border-gray-100 p-2 rounded w-full bg-gray-800">
<option value="System">System</option>
<option value="Task">Task</option>
</select>
</div>
<div>
<label for="tags" class="block font-medium">Tags (comma-separated)</label>
<input name="tags" id="tags" class="border p-2 pt-1 w-full rounded" />
</div>
</div>
<div>
<label for="description" class="block font-medium">Description</label>
<textarea name="description" id="description" rows="2" required class="border p-2 w-full rounded"></textarea>
</div>
<div>
<label for="notes" class="block font-medium">Notes</label>
<textarea name="notes" id="notes" rows="3" class="border p-2 w-full rounded"></textarea>
</div>
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">
Add Prompt
</button>
</form>
</main>
</div> </div>
</div>
<!-- <div>
<label for="slug" class="block font-medium">Slug</label>
<input name="slug" id="slug" required class="border p-2 w-full rounded" />
</div> -->
<div>
<label for="type" class="block font-medium">Type</label>
<select name="type" id="type" required class="border border-gray-100 p-2 rounded w-full bg-gray-800">
<option value="System">System</option>
<option value="Task">Task</option>
</select>
</div>
<div>
<label for="description" class="block font-medium">Description</label>
<textarea name="description" id="description" rows="2" required class="border p-2 w-full rounded"></textarea>
</div>
<div>
<label for="tags" class="block font-medium">Tags (comma-separated)</label>
<input name="tags" id="tags" class="border p-2 w-full rounded" />
</div>
<div>
<label for="notes" class="block font-medium">Notes</label>
<textarea name="notes" id="notes" rows="3" class="border p-2 w-full rounded"></textarea>
</div>
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">
Add Prompt
</button>
</form>
<script type="module"> <script type="module">
import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm'; import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';