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"> <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>

31
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,8 +19,16 @@ 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>
<p class="text-sm mt-1">Add a new AI prompt to the catalog</p>
</div>
<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"> <div id="success" class="bg-green-100 text-green-700 p-4 rounded mb-4 hidden">
Prompt added successfully! Prompt added successfully!
</div> </div>
@@ -32,11 +41,7 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
<input type="hidden" name="slug" id="slug" /> <input type="hidden" name="slug" id="slug" />
</div> </div>
<!-- <div> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<label for="slug" class="block font-medium">Slug</label>
<input name="slug" id="slug" required class="border p-2 w-full rounded" />
</div> -->
<div> <div>
<label for="type" class="block font-medium">Type</label> <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"> <select name="type" id="type" required class="border border-gray-100 p-2 rounded w-full bg-gray-800">
@@ -46,13 +51,14 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
</div> </div>
<div> <div>
<label for="description" class="block font-medium">Description</label> <label for="tags" class="block font-medium">Tags (comma-separated)</label>
<textarea name="description" id="description" rows="2" required class="border p-2 w-full rounded"></textarea> <input name="tags" id="tags" class="border p-2 pt-1 w-full rounded" />
</div>
</div> </div>
<div> <div>
<label for="tags" class="block font-medium">Tags (comma-separated)</label> <label for="description" class="block font-medium">Description</label>
<input name="tags" id="tags" class="border p-2 w-full rounded" /> <textarea name="description" id="description" rows="2" required class="border p-2 w-full rounded"></textarea>
</div> </div>
<div> <div>
@@ -64,6 +70,9 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
Add Prompt Add Prompt
</button> </button>
</form> </form>
</main>
</div>
</div>
<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';