From 6cc56919e3ea3befb049e3ca6531d413078ec2ce Mon Sep 17 00:00:00 2001
From: Aravinth Manivannan <realaravinth@batsense.net>
Date: Sat, 4 Mar 2023 18:58:48 +0530
Subject: [PATCH] feat: search bar

---
 static/cache/css/main.css            | 44 ++++++++++++++++++++++++++--
 templates/components/nav/pub.html    |  6 ++--
 templates/components/nav/search.html | 17 +++++++++++
 3 files changed, 60 insertions(+), 7 deletions(-)
 create mode 100644 templates/components/nav/search.html

diff --git a/static/cache/css/main.css b/static/cache/css/main.css
index 6e4d75e..a4f6a8f 100644
--- a/static/cache/css/main.css
+++ b/static/cache/css/main.css
@@ -97,6 +97,7 @@ a:hover {
 
 .nav__link {
   text-decoration: none;
+  margin: 0 5px;
 }
 
 a {
@@ -254,9 +255,6 @@ button {
   border: none;
 }
 
-
-
-
 /* Inline #1 | http://localhost:7000/ */
 
 .repository__container {
@@ -282,3 +280,43 @@ button {
   border-radius: 5px;
 }
 
+.search__bar {
+  height: 1.6rem;
+  width: 70%;
+  padding: 0;
+  margin: 0 auto;
+  display: flex;
+}
+
+#search {
+  width: 100%;
+  margin: auto;
+  height: 1.3rem;
+}
+
+#search:placeholder-shown {
+  margin: auto;
+  padding-left: 5px;
+  display: inline-block;
+  font-size: 0.8rem;
+}
+
+.search__button {
+  position: relative;
+  left: -30px;
+  background: none;
+  border: none;
+  align-items: center;
+  display: flex;
+}
+
+.search__icon {
+  margin: auto;
+  filter: invert(47%) sepia(1%) saturate(0%) hue-rotate(278deg) brightness(92%)
+    contrast(88%);
+  height: 55%;
+}
+
+.search__icon:hover {
+  cursor: pointer;
+}
diff --git a/templates/components/nav/pub.html b/templates/components/nav/pub.html
index 872dccc..e9f3f10 100644
--- a/templates/components/nav/pub.html
+++ b/templates/components/nav/pub.html
@@ -10,14 +10,12 @@
     </label>
   </div>
 
-  <div class="nav__spacer"></div>
+  {% include "search_bar" %}
 
   <div class="nav__link-group">
     <div class="nav__link-container">
+      <a class="nav__link" rel="noreferrer" href="{{ page.explore }}">Explore</a>
       <a class="nav__link" rel="noreferrer" href="/federate/">Download Data</a>
-    </div>
-
-    <div class="nav__link-container">
       <a class="nav__link" rel="noreferrer" href="{{ page.auth.add }}">Spider Forge</a>
     </div>
   </div>
diff --git a/templates/components/nav/search.html b/templates/components/nav/search.html
new file mode 100644
index 0000000..d83e846
--- /dev/null
+++ b/templates/components/nav/search.html
@@ -0,0 +1,17 @@
+<form class="search__bar" action="{{ page.search }}" method="post">
+    <input
+      placeholder="Search for repositories, builders, and all things software development!"
+      type="text/submit/hidden/button"
+      name="query"
+      required
+      id="query"
+      {% if search_query %}
+      value="{{ search_query }}"
+      {% else %}
+        value=""
+      {% endif %}
+    />
+    <button class="search__button" type="submit">
+      <img class="search__icon" src="search/icon" alt="Search icon" />
+    </button>
+</form>