Use headlessui for search input

rajtoshranjan · Apr 30, 2024 · 24290e0 · 24290e0
1 parent 32aeb57
commit 24290e0
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 87 deletions.
diff --git a/src/assets/icons/cross-circle.svg b/src/assets/icons/cross-circle.svg
diff --git a/src/assets/icons/selection.json b/src/assets/icons/selection.json
@@ -1,6 +1,28 @@
 {
   "IcoMoonType": "selection",
   "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M943.025 19.771c-76.17-42.378-172.111-14.809-214.252 61.204l-292.47 526.336-167.385-167.385c-61.519-61.519-161.241-61.519-222.759 0s-61.519 161.241 0 222.759l315.077 315.077c29.775 29.854 69.947 46.238 111.38 46.238l21.819-1.575c48.916-6.853 91.845-36.234 115.87-79.478l393.846-708.923c42.299-76.091 14.887-171.953-61.125-214.252z"
+        ],
+        "attrs": [{}],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": ["tick"]
+      },
+      "attrs": [{}],
+      "properties": {
+        "order": 26,
+        "id": 0,
+        "name": "tick",
+        "prevSize": 32
+      },
+      "setIdx": 0,
+      "setId": 5,
+      "iconIdx": 0
+    },
     {
       "icon": {
         "paths": [
@@ -19,7 +41,7 @@
         "name": "log-out",
         "prevSize": 32
       },
-      "setIdx": 0,
+      "setIdx": 1,
       "setId": 4,
       "iconIdx": 0
     },
@@ -86,7 +108,7 @@
         "name": "google-color",
         "prevSize": 32
       },
-      "setIdx": 1,
+      "setIdx": 2,
       "setId": 3,
       "iconIdx": 0
     },
@@ -122,7 +144,7 @@
         "name": "bin",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 0
     },
@@ -144,7 +166,7 @@
         "name": "chevron-small-left",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 1
     },
@@ -166,7 +188,7 @@
         "name": "chevron-small-right",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 2
     },
@@ -188,7 +210,7 @@
         "name": "circle",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 3
     },
@@ -210,7 +232,7 @@
         "name": "close",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 4
     },
@@ -237,7 +259,7 @@
         "name": "earth",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 5
     },
@@ -259,7 +281,7 @@
         "name": "eye-cross",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 6
     },
@@ -281,7 +303,7 @@
         "name": "eye",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 7
     },
@@ -306,7 +328,7 @@
         "name": "freehand",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 8
     },
@@ -370,7 +392,7 @@
         "name": "line",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 9
     },
@@ -392,7 +414,7 @@
         "name": "meat-ball-menu",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 10
     },
@@ -428,7 +450,7 @@
         "name": "plus",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 11
     },
@@ -450,7 +472,7 @@
         "name": "point-marker",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 12
     },
@@ -472,7 +494,7 @@
         "name": "polygon",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 13
     },
@@ -494,7 +516,7 @@
         "name": "rectangle",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 14
     },
@@ -516,7 +538,7 @@
         "name": "satellite",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 15
     },
@@ -538,7 +560,7 @@
         "name": "search",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 16
     },
@@ -561,7 +583,7 @@
         "name": "select",
         "prevSize": 32
       },
-      "setIdx": 2,
+      "setIdx": 3,
       "setId": 2,
       "iconIdx": 17
     }

diff --git a/src/assets/styles.css b/src/assets/styles.css
@@ -9,6 +9,23 @@
   height: calc(100dvh - 57px);
 }
 
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  height: 1em;
+  width: 1em;
+  border-radius: 50em;
+  background: url(./icons/cross-circle.svg) no-repeat 50% 50%;
+  background-size: contain;
+  pointer-events: none;
+  opacity: 0;
+  margin-left: 0.5em;
+}
+
+input[type="search"]:focus::-webkit-search-cancel-button {
+  opacity: 0.5;
+  pointer-events: all;
+}
+
 /* Map Styles */
 .mapboxgl-ctrl {
   background-color: theme("colors.gray.900");

diff --git a/src/components/icon/constants.ts b/src/components/icon/constants.ts
@@ -19,4 +19,5 @@ export enum IconIdentifier {
   Satellite = "satellite",
   Search = "search",
   Select = "select",
+  Tick = "tick",
 }