Add a clear button

.air.toml

@@ -5,27 +5,30 @@ tmp_dir = "tmp"
 [build]
   args_bin = []
   bin = "./tmp/main"
-  cmd = "templ generate && tailwindcss -i ./styles/input.css -o ./assets/css/output.css --minify && go build -o ./tmp/main ."
+  cmd = "go build -o ./tmp/main ."
   delay = 1000
-  exclude_dir = ["assets", "tmp", "vendor", "testdata"]
-  exclude_file = []
+  exclude_dir = ["assets/css", "tmp", "vendor", "testdata"]
+  exclude_file = ["components/**/*.go"]
   exclude_regex = ["_test.go",".*_templ.go"]
-  exclude_unchanged = false
+  exclude_unchanged = true
   follow_symlink = false
   full_bin = "LOG_LEVEL=debug ./tmp/main"
   include_dir = []
-  include_ext = ["go", "tpl", "tmpl", "templ", "html"]
+  include_ext = ["go", "tpl", "tmpl", "templ", "html", "css"]
   include_file = []
-  kill_delay = "10s"
+  kill_delay = "1s"
   log = "build-errors.log"
   poll = false
-  poll_interval = 0
+  poll_interval = 500
   post_cmd = []
-  pre_cmd = []
-  rerun = false
+  pre_cmd = [
+    "templ generate -path ./components",
+    "tailwindcss -i ./styles/input.css -o ./assets/css/output@dev.css",
+  ]
+  rerun = true
   rerun_delay = 500
   send_interrupt = true 
-  stop_on_error = false
+  stop_on_error = true
 
 [color]
   app = ""

components/filter.templ

@@ -6,35 +6,47 @@ import (
 
 templ filterForm() {
 	<form
- 		id="filter-form"
- 		class="ml-3 mr-3 mt-3 flex items-center space-x-2"
- 		hx-get="/jobs"
- 		hx-target="#jobs"
- 		hx-swap="outerHTML"
+		id="filter-form"
+		class="ml-3 mr-3 mt-3 flex items-center space-x-2"
+		hx-get="/jobs"
+		hx-target="#jobs"
+		hx-swap="outerHTML"
 	>
 		<div class="w-full">
 			<label for="company" class="block text-sm font-medium leading-6 text-gray-900">Company</label>
 			<div class="mt-2">
 				<input
- 					type="text"
- 					name="company"
- 					id="company"
- 					class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 sm:text-sm sm:leading-6"
- 					placeholder="Awesome Company"
+					type="text"
+					name="company"
+					id="company"
+					class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 sm:text-sm sm:leading-6"
+					placeholder="Awesome Company"
 				/>
 			</div>
 		</div>
 		@inputSelect(types.SelectOpts{
-			Name: "status",
-			Label: "Status",
+			Name:        "status",
+			Label:       "Status",
 			Placeholder: "All",
-			Options: types.JobApplicationStatusSelectOptions,
+			Options:     types.JobApplicationStatusSelectOptions,
 		})
 		<button
- 			type="submit"
- 			class="rounded-md bg-blue-600 mt-8 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+			type="submit"
+			class="rounded-md bg-blue-600 mt-8 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
 		>
 			Filter
 		</button>
+		<button
+			onclick={ clearFilter() }
+			type="submit"
+			class="rounded-md mt-8 px-3 py-2 text-sm font-semibold bg-white text-gray-900 shadow-sm hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600 ring-1 ring-insert ring-gray-300"
+		>
+			Clear
+		</button>
 	</form>
 }
+
+script clearFilter() {
+	document.getElementById('company').value = '';
+	document.getElementById('status-select').value = '';
+}