keith/PromptBase
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">
<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">
<li>
<button class="w-full text-left bg-blue-100 text-blue-700 px-3 py-2 rounded hover:bg-blue-200">
System
</button>
</li>
<p class="text-sm mb-4">
Use the form to add a new AI prompt to the catalog.
<li>
<button class="w-full text-left bg-green-100 text-green-700 px-3 py-2 rounded hover:bg-green-200">
Task
</button>
</li>
</ul>
Make sure to include a title, type, description, and any relevant tags.
You can also add notes for your own reference.
</p>
</aside>

97
src/pages/add.astro
View File

@@ -1,5 +1,6 @@
---
import "../styles/global.css";
import Sidebar from "../components/Sidebar.astro";
const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL;
const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
@@ -7,7 +8,7 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
<html>
<head>
<title>Add Prompt</title>
<title>Prompt Catalog - Add New Prompt</title>
</head>
<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
></div>
<h1 class="text-2xl font-bold mb-4">Add New Prompt</h1>
<div id="success" class="bg-green-100 text-green-700 p-4 rounded mb-4 hidden">
Prompt added successfully!
<div class="border-b p-4">
<h1 class="text-2xl font-bold">Prompt Catalog - Add New Prompt</h1>
<p class="text-sm mt-1">Add a new AI prompt to the catalog</p>
</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 class="flex h-screen">
<Sidebar />
<div class="flex-1 flex flex-col overflow-hidden">
<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>
<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>
</div>
<script type="module">
import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';