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

🐞 fix: Add min-height for cards

Browse Source
This commit is contained in:
Keith Solomon
2025-07-16 21:44:47 -05:00
parent 29b7764e7f
commit 7087f3099d
3 changed files with 122 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/PromptCard.astro
View File

@@ -23,7 +23,7 @@ const formatDate = (dateStr: string | undefined) => {
};
---
<div class="border rounded p-4 bg-gray-400 text-gray-800 shadow-sm flex flex-col gap-2">
<div class="border rounded p-4 bg-gray-400 text-gray-800 shadow-sm flex flex-col gap-2 min-h-[12rem]">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold">{title}</h3>
<span class={`text-xs font-medium px-2 py-1 rounded ${

119
src/pages/add.astro Normal file
View File

@@ -0,0 +1,119 @@
---
import "../styles/global.css";
const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL;
const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
---
<html>
<head>
<title>Add Prompt</title>
</head>
<body class="font-sans antialiased bg-gray-800 text-gray-100">
<div
id="supabase-env"
data-url={supabaseUrl}
data-key={supabaseKey}
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>
<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>
<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">
import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
const SUPABASE_URL = document.getElementById('supabase-env').dataset.url;
const SUPABASE_ANON_KEY = document.getElementById('supabase-env').dataset.key;
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('add-form');
const successBox = document.getElementById('success');
const errorBox = document.getElementById('error');
document.getElementById('title').addEventListener('input', (e) => {
const value = e.target.value
.toLowerCase()
.replace(/[^\w\s-]/g, '')
.replace(/\s+/g, '-')
.trim();
document.getElementById('slug').value = value;
});
form.addEventListener('submit', async (e) => {
e.preventDefault();
successBox.style.display = 'none';
errorBox.style.display = 'none';
const formData = new FormData(form);
const payload = {
title: formData.get('title'),
slug: formData.get('slug'),
type: formData.get('type'),
description: formData.get('description'),
tags: formData.get('tags')?.split(',').map(t => t.trim()).filter(Boolean),
notes: formData.get('notes')
};
const { error } = await supabase.from('prompts').insert([payload]);
if (error) {
errorBox.innerText = error.message;
errorBox.style.display = 'block';
} else {
successBox.style.display = 'block';
form.reset();
}
});
});
</script>
</body>
</html>

4
src/pages/index.astro
View File

@@ -17,12 +17,12 @@ const allTags = Array.from(
---
<MainLayout>
<div class="border-b p-4 bg-gray-800 text-gray-100">
<div class="border-b p-4">
<h1 class="text-2xl font-bold">Prompt Catalog</h1>
<p class="text-sm mt-1">Explore and filter AI prompts</p>
</div>
<div class="flex h-screen bg-gray-800 text-gray-100">
<div class="flex h-screen">
<SearchBar allTags={allTags} />
<div class="flex-1 flex flex-col overflow-hidden">