From 4acb26142cf1470520fc6564701558a5081f9683 Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn123@googlemail.com>
Date: Thu, 5 Sep 2019 20:19:27 +0100
Subject: [PATCH] added filter options

---
 .../app/Tabs/Explore/searchHeader.vue         | 75 +++++++++++++++++--
 1 file changed, 68 insertions(+), 7 deletions(-)

diff --git a/src/components/app/Tabs/Explore/searchHeader.vue b/src/components/app/Tabs/Explore/searchHeader.vue
index 099ba35..aea1db1 100644
--- a/src/components/app/Tabs/Explore/searchHeader.vue
+++ b/src/components/app/Tabs/Explore/searchHeader.vue
@@ -1,18 +1,38 @@
 <template>
   <div class="search-header">
-    <div class="search-area">
-      <input type="text" :placeholder="`Search for ${name}`">
+    <div class="filter-area">
+      <div class="filter">
+        <div class="title">Filter:</div>
+        <div class="filter-item">
+          <div class="item">All</div>
+          <div class="item selected">Verified</div>
+        </div>
+      </div>
+      <div class="filter">
+        <div class="title">Sort By:</div>
+        <div class="filter-item">
+          <div class="item selected">Most Users</div>
+          <div class="item">Least Users</div>
+          <div class="item">Date Added</div>
+        </div>
+      </div>
+    </div>
+    <div class="search-area">
+      <input type="text" :placeholder="`Search for ${name}`" />
     </div>
-    <div class="filter-area"></div>
   </div>
 </template>
 
 <script>
 export default {
-  props: [
-    'name'
-  ]
-}
+  props: ["name"],
+  data() {
+    return {
+
+    }
+
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -32,8 +52,49 @@ export default {
   align-content: center;
   flex-direction: column;
   justify-content: center;
+  margin: auto;
+  margin-right: 0;
 }
 input {
   border-radius: 5px;
 }
+
+.filter-area {
+  display: flex;
+}
+.filter {
+  margin-top: 2px;
+  user-select: none;
+  margin-left: 10px;
+  width: 200px;
+  .filter-item {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    height: 57px;
+  }
+  .title {
+    font-size: 17px;
+    color: white;
+    border-bottom: solid 1px rgba(255, 255, 255, 0.575);
+    padding-left: 2px;
+    padding-right: 5px;
+    padding-bottom: 2px;
+  }
+  font-size: 15px;
+  .item {
+    background: rgba(0, 0, 0, 0.356);
+    color: white;
+    opacity: 0.5;
+    cursor: pointer;
+    margin: 2px;
+    transition: 0.3s;
+    &.selected {
+      opacity: 0.9;
+    }
+    &:hover {
+      opacity: 0.8; 
+    }
+  }
+}
 </style>
\ No newline at end of file