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

✨feature: Filtered card list, connected to Supabase

Browse Source
This commit is contained in:
Keith Solomon
2025-07-16 17:24:11 -05:00
parent 6b8ef77dca
commit fe86173abe
14 changed files with 2174 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/SearchBar.astro
View File

@@ -2,10 +2,53 @@
// SearchBar.astro
---
<div class="border-b p-4">
<input
type="text"
placeholder="Search prompts..."
class="w-full p-2 border rounded bg-gray-300 text-gray-800 focus:outline-none focus:ring"
/>
<div class="w-64 border-r h-full p-4 text-gray-100">
<form id="filter-form" method="GET">
<div>
<label for="q" class="block text-lg font-semibold mb-1">Search</label>
<input
name="q"
id="q"
type="text"
placeholder="Search prompts..."
class="w-full p-2 border rounded bg-gray-300 text-gray-800 focus:outline-none focus:ring"
/>
</div>
<div class="my-4 flex flex-col gap-8 items-start">
<div>
<label for="type" class="block text-lg font-semibold mb-1">Type</label>
<select name="type" id="type" class="border p-2 rounded w-full bg-gray-800">
<option value="">All</option>
<option value="System">System</option>
<option value="Task">Task</option>
</select>
</div>
<div>
<fieldset class="flex flex-col">
<legend class="block text-lg font-semibold mb-1">Tags</legend>
<div class="flex flex-wrap gap-2 max-w-[30rem]">
{Astro.props.allTags.map((tag: string) => (
<label class="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
name="tag"
value={tag}
class="sr-only peer"
/>
<span class="px-3 py-1 pt-0 rounded-full border border-gray-300 peer-checked:bg-blue-600 peer-checked:text-white hover:bg-blue-600 hover:text-white text-sm">
{tag}
</span>
</label>
))}
</div>
</fieldset>
</div>
</div>
<button id="clear-filters"type="button" class="bg-blue-600 text-white px-4 py-2 rounded">
Reset Filters
</button>
</form>
</div>