feat: better style + reset button for search field

templates/components/search.tsx

@@ -0,0 +1,29 @@
+/** @jsxImportSource hono/jsx */
+
+import type { FC } from "hono/jsx";
+
+export const SearchIcon: FC<{ className?: string }> = (props: {
+  className?: string;
+}) => {
+  const { className } = props;
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-search"
+    >
+      <circle cx="11" cy="11" r="8" />
+      <path d="m21 21-4.3-4.3" />
+    </svg>
+  );
+};
+
+export default SearchIcon;

templates/index.tsx

@@ -4,6 +4,7 @@ import type { FC } from "hono/jsx";
 import { Layout } from "./components/layout.tsx";
 import type { Article } from "../blog.ts";
 import { Articles } from "./components/articles.tsx";
+import SearchIcon from "./components/search.tsx";
 
 type IndexProps = {
   posts: Article[];
@@ -60,18 +61,30 @@ export const Index: FC<IndexProps> = (props: IndexProps) => {
         {indexTitle && <h1 class={"index-title"}>{indexTitle}</h1>}
         {indexSubtitle && <h2 class={"index-subtitle"}>{indexSubtitle}</h2>}
       </header>
-      <form action="/?page=1" method="get">
+      <form action="/?page=1" method="get" class="search-container">
+        <SearchIcon className="search-icon" />
         <input
           class="search-field"
           id="search-field"
           type="search"
           name="search"
-          placeholder="Look up titles, tags or text"
+          placeholder="Titles, tags or content"
           hx-get="/?page=1"
           hx-trigger="input changed delay:500ms, search"
           hx-target=".articles-list"
           value={props.search}
         />
+        <button
+          type="reset"
+          class="delete-button"
+          aria-label="Clear search"
+          hx-get="/?page=1"
+          hx-trigger="click"
+          hx-target=".articles-list"
+          hx-on--before-request="this.form.reset()"
+        >
+          &times;
+        </button>
       </form>
       {!noPosts && (
         <Articles

templates/style.ts

@@ -157,23 +157,71 @@ export const style = html`
       color: var(--color-fg-muted);
     }
 
-    .search-field {
+    .search-container {
+      display: flex;
+      align-items: center;
+      width: 75%;
       border: 1px solid var(--color-fg-muted);
       border-radius: 0.5em;
-      padding: 0.8em;
-      font-size: 1.1em;
-      width: 75%;
-      display: block;
+      background-color: #2b2f42;
+      padding: 14px;
+      transition: all 0.3s ease;
       margin: 0 auto;
       margin-bottom: 4em;
-      background-color: #2b2f42;
       color: var(--color-text);
     }
 
+    .search-icon {
+      width: 16px; /* Adjust width */
+      height: 16px; /* Adjust height */
+      margin-right: 8px;
+    }
+
+    .search-field {
+      display: block;
+      outline: none;
+      border: none;
+      background-color: inherit;
+      font-size: 1.1em;
+      color: var(--color-text);
+      width: 100%;
+    }
+
     .search-field::placeholder {
       color: #7b8092;
     }
 
+    .delete-button {
+      display: none;
+      background: none;
+      border: none;
+      color: var(--color-fg-muted);
+      font-size: 20px;
+      cursor: pointer;
+      padding: 0;
+      margin-left: 8px;
+    }
+
+    .delete-button:hover {
+      color: var(--color-fg-default);
+    }
+
+    .search-field:not(:placeholder-shown) + .delete-button {
+      display: block;
+    }
+
+    .search-container:hover {
+      border: 4px double var(--color-fg-muted);
+      padding: 11px;
+    }
+
+    .search-container:focus-within {
+      border: 4px double var(--color-fg-muted);
+      outline: none;
+      background-color: var(--color-bg-default);
+      padding: 11px;
+    }
+
     .no-articles {
       max-width: 500px;
       text-align: center;