61 lines
2.1 KiB
Plaintext
61 lines
2.1 KiB
Plaintext
---
|
|
// SearchBar.astro
|
|
|
|
// TODO: Add options for AND/OR switching and sort by options
|
|
---
|
|
|
|
<div class="w-64 border-r h-full p-4 text-gray-100">
|
|
<a href="/add" id="add-prompt" class="block w-fit bg-green-600 text-white px-4 py-2 mb-4 rounded hover:bg-green-700 transition-colors duration-300">
|
|
Add Prompt
|
|
</a>
|
|
|
|
<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 transition-colors duration-300 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 cursor-pointer hover:bg-blue-700 transition-colors duration-300">
|
|
Reset Filters
|
|
</button>
|
|
</form>
|
|
</div>
|